作者简介
目前就职于甜橙金融，负责公司的前端开发工作。Flutter作为一款跨平台的移动APP开发框架，受到的关注也是越来越高。于是为追赶潮流，利用自己业余时间学习了一波，但还有很多需要学习的地方。下面记录下初识flutter的一些知识点。方便自己以后学习查阅，也希望有志同道合的人可以一起学习，一起进步，一起交流~~~
Flutter介绍
Flutter 是谷歌基于 Dart 语言开发的一款跨平台的移动 App 开发框架，可以让我们快速的在 Android 和iOS 上构建高质量 App。它最大的特点就是跨平台、以及高性能。
先展示一下初期写的几个小demo，给你们看看~~
为啥选择Dart呢？
据称Dart语言可以编译成原生代码，直接跟原生通信。
1. 灵活性
基于 Flutter 框架使用 Dart 编写的移动应用都是原生的跨平台应用，因此可以同时支持 Android 和 iOS。甚至可以是Web 应用，然后这些应用就可以在任意浏览器上运行了。
2. 易上手
Dart是强类型语言，并支持类型推断：类型推断是指在编程语言中自动检测表达式的数据类型
3. 足够的生产力
Dart 集成了大量的库和框架；你想实现一项功能的时候不需要重新发明轮子，节省了大量时间；你只要按文档说明扔进去一些代码就足够了，从而显著提高生产力。
4. 稳健的语言
Dart 由谷歌开发，其主要目的是创造像 C#和 Java 之类基于 C 语言的面向对象编程语言。它是一种相对简单、现代化且高效的语言。它像 C 一样也是编译语言，所以它比 Java 快得多。Dart 比 Javascript 也快了大约 1 倍。它是类型安全语言，并可使用 AOT（静态编译） 和 JIT（动态编译） 编译器编译
Flutter框架设计
Flutter框架是由Dart语言实现的，提供了 Material、Cupertino 风格的小部件，框架的底层是flutter引擎，它负责绘图，动画，网络，Dart运行时等功能。从上到下包含三个不同的层：框架、引擎和嵌入器。
Framework层
Material，Cupertino：针对 Android 的 Material 风格，和针对 iOS 的 Cupertino 风格；
Widgets: 按钮、文本、输入框、图片等组件;
Rendering：渲染层，负责布局、绘制、合成等；
Animation, Painting, Gestures：动画、绘图、手势；
Foundation：最底层，提供上层需要使用的工具类和方法；
Engine由C++实现，包含以下三项
Skia：图形绘制; 渲染引擎依靠跨平台的Skia图形库来实现
Dart：主要包括Dart运行时和垃圾回收
Text：文本渲染库
嵌入器将Flutter嵌入到各种平台中
Flutter部件生命周期&状态控制
Flutter 框架的 UI 是基于 Widget 的，一切皆 Widget，这些widget都有自己的生命周期。
大致可以看成三个阶段
1. 初始化（插入渲染树）
2. 状态改变（在渲染树中存在）
3. 销毁（从渲染树中移除）
Flutter如何渲染界面的
移动设备中有GPU和CPU，一般是GPU控制将数据渲染到显示设备上的，GPU主要是通过发出VSync同步信号去帧数据来传递给显示器。
1. GPU将信号同步到UI线程
2. UI线程用Dart来构建RenderTree
3. RenderTree在GPU线程进行合并
4. 合成后的试图数据提供给Skia引擎
5. Skia引擎将显示数据提供给GPU
Flutter Widgets
有些widget是有状态的，有些事无状态的。如果用户与widget发生交互，widget发生变化，那么这个widget就是有状态的。
无状态Stateless widget 不会发生变化。Icon、IconButton和 Text 都是无状态widget，它们都是StatelessWidget的子类。
有状态Stateful widget 是动态的。例如，可以通过与用户的交互或是随着数据的改变而导致外观形态的变化。 Checkbox、Radio、Slider、InkWell、Form和TextField都是有状态 widget，它们都是StatefulWidget的子类。当 widget 状态改变时, State对象调用 setState(), 告诉框架去重绘 widget。
Flutter应用怎么编写
Flutter从 lib/main.dart文件的 main 函数开始：
Flutter 布局的核心机制是widgets。在 Flutter 中，几乎所有东西都是widget，且Widget前面的new可省略。
布局Widget
Flutter自带了一套强大的基础widgets;
Container widget 可以用来创建一个可见的矩形元素。 类似于html中的div， Container可以使用BoxDecoration来进行装饰，如背景，边框，或阴影等；
Row,Column这两个 flex widgets 可以让你在水平 (Row) 和垂直(Column) 方向创建灵活的布局。它是基于 web 的flexbox 布局模型设计的。
Stack widget 不是线性（水平或垂直）定位的，而是按照绘制顺序将 widget 堆叠在一起。可以用 Positioned widget 作为Stack 的子 widget，以相对于 Stack 的上，右，下，左来定位它们。 Stack 是基于 Web 中的绝对位置布局模型设计的。
路由和导航
路由对象会放在堆（stack）中
1、普通路由跳转：Navigator.push()
2、命名路由跳转：Navigator.pushNamed()
如果我们需要在应用的很多地方导航到同一界面，这样做就会导致代码重复。在这种情况下，定义命名路由(named route)并使用它进行导航就会非常方便。通过 MaterialApp额外的属性：initialRoute 和 routes 自身，来定义我们的路由。
MaterialApp( //定义命名路由
initialRouter : '/', //初始化路由，不用设置home属性
routes: {
'/': (context)=> Home( ),
/about': (context)=> Page(title : 'about')
}
)
跳转：
Navigator.pushNamed(context, '/about')
路由返回：Navigator.pop(context)
路由传参
回传参数到上一个页面
Navigator.pop() 方法可以接受第二个参数 result，它是可选的，如果传递了 result，数据将会通过 Future 方法的返回值传递。
Navigator.pop(context, 'Yep!');
状态管理Provider
当我们想在多个页面（组件/Widget）之间共享状态（数据），或者一个页面（组件/Widget）中的多个子组件之间共享状态（数据），这个时候我们就可以用 Flutter 中的状态管理来管理统一的状态（数据），实现不同组件直接的传值和数据共享。
现在Flutter 的状态管理方案很多，redux、bloc、state、provide、provider。
目前我们推荐使用 provider，这个是官方提供的状态管理解决方案。相比其他状态管理库使用起来比较方便。
用法：
1、配置依赖provider
2、新建一个文件夹叫 provider，在provider 文件夹里面放我们对于的状态管理类
3、 在 provider 里面新建Counter.dart
4、main.dart中
5、 获取并设置
从我目前接触到的flutter来说，最大的困难是找不到合适的widget去实现相应的布局及相应widget中的属性及样式，比如说Padding是一个Widget而不是CSS样式。所以还是要多实践。
好啦，今天的分享就到这里，欢迎大佬们私信批评指正。
