Flutter打卡学习

1.Flutter打卡-Hello World

2019-05-31  本文已影响0人  leaflying

       针对原生开发和混合开发的优缺点,咱也不多说了,总的来说,就是牺牲一部分性能,然后适应各大平台,想了解原生开发和混合开发的区别以及各大混合开发具体区别的,可以在https://book.flutterchina.club/chapter1/mobile_development_intro.html了解一下,这里就不做过多介绍。下面开始Hello world。

        关于flutter的安装教程,请移步https://book.flutterchina.club/chapter1/install_flutter.html

第一步:新建工程

1.Create New Flutter Project,选择Flutter Application

图1-1 创建项目 

2.点击next,进入项目配置页面,Project name填写Hello world!注意,项目名称只能由小写字母,数字,下划线组成,第一个字符必须是小写字母,最后一个不能为下划线

图1-2 设置项目属性

3.点击Next 设置包名

图1-3 设置包名

4.点击Finish完成项目的创建。

图1-4 项目创建完成

5.运行项目查看效果,运行结果如图1-5所示,对于项目的具体解析,可以查看https://book.flutterchina.club/chapter2/first_flutter_app.html

图1-5 默认程序运行结果

6.清空main.dart中所有的代码,开始编写我们自己的Hello world!

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyAppextends StatelessWidget {

@override

  Widgetbuild(BuildContext context) {

return MaterialApp(

title:'Flutter Demo',

      theme:ThemeData(

primarySwatch: Colors.blue,

      ),

      home:Scaffold(

appBar:AppBar(

title:Text("Welcome to Flutter"),

        ),

        body:Center(

child:Text("Hello world!"),

        ),

      )

);

  }

}

7.进行调试,查看运行结果

图1-6 点击绿色三角块,运行程序 图1-7 Hello world运行结果

        到这里位置,完成了我们的第一个Flutter程序的编写,学习Flutter迈出了人生中的第一大步。

上一篇 下一篇

猜你喜欢

热点阅读