创建Flutter项目

通过命令行创建
```
flutter create hello_world
```

通过开发工具创建

Android Studio:Start a new Flutter project->填写相关信息

初始代码分析

lib目录下的main.dart文件的main(){}函数是程序的入口函数。

编辑代码

Hello World

代码实现

import 'package:flutter/material.dart';
main(List<String> args) {
  runApp(Text("Hello World", textDirection: TextDirection.ltr));
}
//界面显示文字在左上角，不美观，不符合效果

代码分析

1.runApp()函数是Flutter内部提供的一个函数（启动程序之后就是从调用这个函数开始），该函数要求传入一个Widget。（导入Flutter默认提供的Mterial库，使用其中很多的内置Widget）
2.Mterial：是一套设计风格（包括了很多设计规范：颜色、文字、动画等），可以直接使用那些Widget创建应用。
3.Text（）组件分析：（用来显示文字）其继承自StatelessWidget，StatelessWidget继承自Widget。

代码改进

改进样式

1.文字居中显示：使用另外的Widget即Center；
2.文字显示大一些：给Text设置参数style。
import 'package:flutter/material.dart';
main(List<String> args) {
  runApp(
    Center(
      child: Text(
        "Hello World",
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 36),
      ),
    )
  );
}

改进结构

1.理想的结构界面：导航栏、主体界面、tab栏。
import 'package:flutter/material.dart';
main(List<String> args) {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("CODERWHY"),
        ),
        body: Center(
          child: Text(
            "Hello World",
            textDirection: TextDirection.ltr,
            style: TextStyle(fontSize: 36),
          ),
        ),
      ),
    )
  );
}
3.分析：最外层包裹 MaterialApp，即整个应用采用 MaterialApp风格，使用其中两个属性：title（系统切换窗口显示的标题）、home（该应用启动时传入的界面）。
      Scaffold脚手架，即搭建页面基本结构，其属性appBar用来设计导航栏，body是页面的内容部分。

代码重构

1.分析原理：继承StatelessWidget或StatefulWidget创建自己的Widget减少嵌套。
  StatelessWidget：没有状态改变的Widget，通常这种Widget仅仅是做一些展示工作而已；
  StatefulWidget：需要保存状态，并且可能出现状态改变的Widget。(但是StatefulWidget不能定义状态，需要创建一个单独的类用来维护状态）
2.结果代码：(以下的代码针对无状态的代码)
import 'package:flutter/material.dart';
main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
	//必须重写的build方法
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false, //去掉右上角debug标签
        home: HYHomePage()
    );
  }
}
class HYHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第一个flutter程序'),
      ),
      body: HYContentBody()
    );
  }
}
class HYContentBody extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
        child:Text(
            'hello world',
            style: TextStyle(
                fontSize: 36,
                color: Colors.red
            )
        )
    );
  }
}
3.有状态改变的demo(复选框选择使得状态改变)
import 'package:flutter/material.dart';
main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        debugShowCheckedModeBanner: false, //去掉右上角debug标签
        home: HYHomePage()
    );
  }
}
class HYHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('第一个flutter程序'),
      ),
      body: HYContentBody()
    );
  }
}
class HYContentBody extends StatefulWidget{
  @override
  State<StatefulWidget> createState() { //状态改变的方法，要返回一个StatefulWidget类型的State
    // TODO: implement createState
   return HYContentBodyState();
  }
}
class HYContentBodyState extends State<HYContentBody> {
  var flag = true;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Row(
        mainAxisAlignment:MainAxisAlignment.center,  //居中设置
        children: <Widget>[
          Checkbox(
            value: flag,
            onChanged: (value) {
              setState(() {  //状态改变，重新赋值的方法
              flag = value;
              });
            }
          ),
          Text('同意协议',style: TextStyle(fontSize: 20),),
        ],
      ),
    );
  }
}
// 在源码中StatelessWidget是被注解@immutable，被该注解标明的类或其子类都必须是不可变的；且该类下的成员变量或者继承过来的成员变量都必须的final类型的。

Says flutter---03项目入门

创建Flutter项目

编辑代码

Hello World