时间节点
市面上使用到Flutter的应用
谁在用Flutter
Flutter架构
这个是Flutter的框架结构
Flutter框架结构
Flutter主要由两块构成Framework和Engine
Framework是由纯Dart实现的SDK，它里面包含一套基础库，其中Animation Painting Gestures Foundation 是由Framework下方的Engine层暴露出来的底层UI库，提供了动画，手势操作以及自定义绘制能力。Rendering层，是抽象的布局层，在这一层中会构建一个UI树，当UI树发生变化时，会计算变化部分，然后更新UI树，最终将UI树绘制到屏幕上，这个过程类似React中的虚拟DOM。
最上面的两层 Widgets是Flutter提供的一套基础组件库，在它之上，是Flutter提供的两种视觉风格库，来自iOS的Cupertino和来自Android的Material。
Engine 这是一个纯 C++实现的 SDK，其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在这里执行真正的绘制逻辑。
Flutter如何描述UI
如何描述UI
我们知道在前端是以HTML + CSS + JavaScript的方式来组织项目，其中HTML负责描述UI界面各个元素的布局，CSS描述元素的样式，JavaScript组织各个元素中的具体逻辑。同样的在Android中，XML文件负责了页面的布局和样式，再由Java或Kotlin代码组织控件间的具体逻辑。
而在Flutter中布局样式和逻辑都是在Dart代码中完成的。可以看到右边的Dart代码里初始化了一个Widget类，Flutter中Widget的功能就包含了布局样式和逻辑。这段代码里用到了两个Flutter提供的基础Widget，Container和Text，Text是用来展示文本的Widget，可以看到里面有两个参数，字符串和style，第一个传入的参数就是需要展示的文本，第二个style参数是设置文本的样式。
外层的Container是组合型的Widget，Flutter在Container里整合了多个基础的Widget，因此Container提供了经常会用到的参数来设置样式，在这段代码里往Container传入了4个参数，child， width， height， color描述了容器的宽高和颜色，其中child是传入一个Widget，描述容器内需要包含的UI。
Flutter常用Widget
Flutter 提供的Widget不同于HTML提供的标签或Android提供的View，并不是每个Widget都有width height padding margin可以设置，反而是把各种GUI框架会提供的参数再拆分为更基础的Widget，每个Widget只承载了一点功能。开发者可以通过这些Widget自由组合自己想要的控件。接下来会简单列举几个Widget。
容器Widget
SizedBox
SizedBox，用于限制内部Widget的长宽
SizedBox
Padding
Padding 描述父Widget和子Widget的边距
Padding
Align
Align, 描述子Widget在父Widget的对齐位置
可以设置八个方位上、下、左、右、左上、右上、左下、右下
Align
DecoratedBox
DecoratedBox，提供了颜色，边框圆角，边框，阴影等样式的设置
DecoratedBox
上述介绍的Widget可能没法满足日常开发的需求，如果想要上述几个Widget参数的集合可以使用Container
Container
提供了我前面介绍那些Widget的全部参数，还有一些其他的参数，大家感兴趣可以自己去探索
实际上Container是将前面说到的Widget组合包装起来
Continer
布局Widget
前面简单说了下，我们怎么通过Widget来描述一个容器的样式，通常在编写UI界面代码时，还需要能够为多个组件编排位置，为组件布局的能力，接下来会介绍几个布局组件。
Column
列布局Column，可以将多个WIdget排布按列显示
Column
Row
行布局Row，可以将多个Widget排列按行显示
Row
Stack
层叠布局Stack，可以将多个Widget堆叠在一起
Stack
ListView
当需要按行或列排布数量不固定且可能会超出屏幕边界时，可以使用ListView
这里的scrollDirection可以设置垂直还是水平滑动
ListView
自定义Widget
前面介绍完，如何设置样式以及如何布局，接下来接下来了解下，如何自己写个Widget。
要自己写Widget有两种选择，你可以继承StatefulWidget或StatelessWidget其中一个类来编写自己的Widget，这两个类具体差别是，当你只需要组合其他Widget展示一个固定的样式时用StatelessWidget。当需要在Widget中根据用户操作，应用或自身的生命周期做不同的UI展示时或者需要在其内保存会变动的状态时，就需要StatefulWdiget。
简单来说StatelessWidget无生命周期，无状态，只是用于展示，StatefulWidget有生命周期，有状态。
自定义Widget
例子：创建一个Flutter项目并编写一个页面
写个例子看看，具体内容，这个例子，如动图展示的，会依次经历以下流程：
输入名字 -> 点击 getContent 按钮 -> 显示加载弹窗 -> 请求数据 -> 关闭加载弹窗 -> 展示获取到的数据。
演示项目
Example
Flutter项目目录
Flutter项目目录
Flutter编译模式
Flutter有三种方式构建项目，分别是用于发布正式包的Release用于测试性能的Profile和用于日常项目开发的Debug模式，三种构建方式具体的不同在于Dart代码编译模式的不同，在项目开发阶段代码编译模式是JIT，全称 Just In Time，是指在程序运行过程中实时编译执行具体的代码，这让我们在Flutter中获得了Hot Reload，Hot Restart等提高开发效率的功能。
在项目需要发布时是AOT，全称是 Ahead Of Time，在这种编译模式下程序运行前代码就已经编译为机器码了，而不需要在运行中解释执行，以此来保证应用的性能。
编译模式
Flutter Hot Reload
触发热重载会扫描项目中文件，将有改动的dart文件转化为标记化源代码kernel files，通过HTTP接口发送到正在设备上运行的DartVM中，DartVM替换本地资源，然后通知Flutter Framework重建、重新布局、重新绘制WidgetsTree，即可看到改动效果。
热更新
