一、创建Flutter项目
1.1. 通过命令行创建
通过命令行创建非常简单，在终端输入以下命令即可：
注意：Flutter的名称不要包含特殊的字符，另外不可以使用驼峰标识
创建完之后使用自己喜欢的开发工具打开即可
flutter create learn_flutter
1.2 通过开发工具创建
直接通过Android Studio来进行创建：
选择Start a new Flutter project，之后填写相关的信息即可
二、 开始Flutter代码
2.1 Hello World
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(Text("Hello World", textDirection: TextDirection.ltr));
}
2.2 代码分析
2.2.1 runApp和Widget
runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的,该函数让我们传入一个参数 Widget，Widget翻译过来是小部件，类似Android、iOS中的控价，Flutter中万物皆Widget
2.2.2Material设计风格
material是什么呢？
material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；
在Flutter中高度集成了Material风格的Widget；
在我们的应用中，我们可以直接使用这些Widget来创建我们的应用textDirection
指定文本方向，在上述例子中，如果不指定文本方向会报错。No Directionality widget found。 这是由于Flutter是面向全球的，有些国家文本排列顺序是从右到左的，如果不指定文本方向，Flutter无法绘制。
但如果部件是包裹在MaterialApp中的话，可以不指定，这是由于MaterialApp默认文本方向从左到右
2.3 代码改进
2.3.1 改进界面样式
我们可能希望文字居中显示，并且可以大一些；
居中显示： 需要使用另外一个Widget，Center；
文字大一些： 需要给Text文本设置一些样式；
我们在Text小部件外层包装了一个Center部件，让Text作为其child；并且，我们给Text组件设置了一个属性：style，对应的值是TextStyle类型；
void main(List<String> args) {
runApp(Center(
child: Text(
"Hello World",
textDirection: TextDirection.rtl,
style: TextStyle(fontSize: 30),
),
));
}
2.3.2改进界面结构
正常的App页面应该有一定的结构，比如通常都会有导航栏，会有一些背景颜色等
在开发当中，我们并不需要从零去搭建这种结构化的界面，我们可以使用Material库，直接使用其中的一些封装好的组件来完成一些结构的搭建
void main(List<String> args) {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Hello World")),
body: Center(
child: Text(
"Hello Fultter!",
style: TextStyle(fontSize: 30),
),
),
),
));
}
在最外层包裹一个MaterialApp,这意味着整个应用我们都会采用MaterialApp风格的一些东西，方便我们对应用的设计
Scaffold是什么呢？
翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；
所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；
Scaffold也有一些属性，比如appBar和body；
appBar是用于设计导航栏的，我们传入了一个title属性；
body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；
2.4. 代码重构
我们可以使用StatelessWidget 和 StatefulWidget 来自定义widget
有状态的Widget: StatefulWidget 在运行过程中有一些状态(data)需要改变
无状态的Widget: StatelessWidget 在运行过程中没有状态(data)的改变
在上面的案例中对代码的重构，我们使用StatelessWidget即可
void main(List<String> args) {
runApp(MaterialApp(
home: MSHomePage(),
));
}
class MSHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hello World"),
),
body: MSHomeBody(),
);
}
}
class MSHomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
"Hello Fultter!",
style: TextStyle(fontSize: 20, color: Colors.red),
),
);
}
}
StatelessWidget包含一个必须重写的方法：build方法
build方法的解析：
Flutter在拿到我们自己创建的StatelessWidget时，就会执行它的build方法；
我们需要在build方法中告诉Flutter，我们的Widget希望渲染什么元素，比如一个Text Widget；
StatelessWidget没办法主动去执行build方法，当我们使用的数据发生改变时，build方法会被重新执行；
build方法什么情况下被执行呢
1、当我们的StatelessWidget第一次被插入到Widget树中时（也就是第一次被创建时）；
2、当我们的父Widget（parent widget）发生改变时，子Widget会被重新构建；
3、如果我们的Widget依赖InheritedWidget的一些数据，InheritedWidget数据发生改变时；
3.进阶案例
我们现在想要实现一个同意协议案例
void main(List<String> args) {
runApp(MaterialApp(
home: MSHomePage(),
));
}
class MSHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hello World"),
),
body: MSHomeBody(),
);
}
}
class MSHomeBody extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MSHomeBodyState();
}
}
class _MSHomeBodyState extends State<MSHomeBody> {
var flag = true;
@override
Widget build(BuildContext context) {
return Center(
child: Row(
children: [
Checkbox(
value: flag,
onChanged: (value) {
setState(() {
flag = value!;
});
print(value);
}),
Text("同意协议")
],
),
);
}
}
为什么不可以用StatelessWidget？
因为StatelessWidget 是继承Widget
@immutable // A class is immutable if all of the instance fields of the class, whether defined directly or inherited, are final.
abstract class Widget extends DiagnosticableTree
Widget 标记为immutable，是不可变的，类不可变，意味着类一旦创建了，里面所有东西都是不可变的。当然StatefulWidget 也是继承Widget，也是不可变的，但是它和State绑定，所有widget也是在State中绘制的。
状态改变需要在setState中处理
setState源码
void setState(VoidCallback fn) {
...
final Object? result = fn() as dynamic; // 执行setState传入的函数
...
_element!.markNeedsBuild(); // 重新绘制
}
状态改变放到setState函数中，setState 会先执行状态改变，再重新绘制
其他知识点
运行一个Flutter项目3种方式:
1.冷启动（从零启动）
2.热重载(最主要执行build方法)
3.热重启（重新运行整个app
