Flutter介绍
Flutter是什么?
Flutter是一款移动应用程序SDK，包含框架、widget和工具，为开发人员提供了一种在Android和iOS上构建和部署精美移动应用程序的简单高效的方式。
Flutter的安装配置
flutter 的安装配置相对比较简单主要分为以下几步:
- 将flutter sdk 下载到本地
- git clone -b master https://github.com/flutter/flutter.git
./flutter/bin/flutter --version
- git clone -b master https://github.com/flutter/flutter.git
- 配置环境变量
- export PATH=
pwd/flutter/bin:$PATH
- export PATH=
- 运行 flutter doctor
- 检查本机flutter环境，根据提示安装修改相关
集成到原生现有app中参考官网Wiki
Add Flutter to existing apps
具体安装配置细节参考Flutter安装配置
Flutter 应用和原生应用的区别
Flutter 应用运行在一个用 C++ 写的引擎中，Flutter 应用可以看做是一个游戏 App，代码都是在 引擎中运行。
对于 Android 应用来说，Flutter 框架在引擎中实现了一个 继承于 SurfaceView 的 FlutterView 。用户所看到的 UI 都是在这个 SurfaceView 中显示。如果要和原生平台功能交互，则可以在 Activity 中使用 FlutterView，并通过 Flutter 提供的消息 API 和原生平台收发消息。
Flutter 应用和 React Native 应用的区别
- 使用的编程语言不同，Flutter 使用的是 谷歌自己新的 Dart 语言，而 React Native 使用的 JavaScript 语言。
- React Native 是把应用编译为原生控件运行，这样在转换的时候会有性能损耗，并且有些平台特性可能无法做成跨平台使用 ,而Flutter 是有自己专属的一套 Widget，并通过自己的渲染引擎来绘制界面。
- flutter还处于仍然在技术验证开发阶段。react native已经相对成熟稳定。
Flutter支持哪些设备和操作系统版本？
移动操作系统：
- Android v16,4.1.x或更新的版本
- iOS ios8或更新版本
移动硬件：
64位iOS设备（从iPhone 5S和更新的iPhone型号开始）以及ARM Android设备。
请注意，Flutter目前不支持：
- ARM32 iOS设备（iPhone 4，iPhone 5;问题＃2089）
- x86 Android设备（问题＃9253）
flutter支持使用Android和iOS设备(包括Android模拟器和iOS模拟器)来开发测试Flutter应用。
Flutter开发语言 Dart语言
Flutter 用Dart作为开发框架和widget的语言，详情请参考为什么Flutter选择使用Dart语言
Dart语言的相关学习文档:
Flutter热重载
“热重载” Hot Reload 通过将更新的源代码文件注入正在运行的Dart VM（虚拟机）中工作。这不仅包括添加新类，还包括向现有类添加方法和字段，以及更改现有函数。尽管有几种类型的代码更改无法热重新：
- 全局变量初始化器。
- 静态字段初始化程序。
- main()应用程序的方法。
请参阅使用Hot Reload获取更多详细信息
简析热重载:
- dart语言可以同时支持JIT/AOT编译的语言
- JIT(just in time)即时编译技术 (动态编译)
- JIT编译器将字节码编译成本机机器代码,具体参考深入浅出 JIT 编译器
- flutter debug模式下使用的是JIT 编译，将更新的源代码文件注入正在运行的Dart VM中,从而运行的时候实时刷新最新代码
- AOT (Ahead Of Time) 运行前编译(静态编译),具体参考AOT编译器
- flutter 打包时使用的是AOT编译，运行之前将代码编译为本机机器语言
- JIT(just in time)即时编译技术 (动态编译)
Flutter原理简介
Flutter使用C、C ++、Dart和Skia（2D渲染引擎）构建。具体参考架构图列表
[图片上传失败...(image-6ae527-1543882512080)]
从该架构图可知，Flutter框架可分为Framework层和Engine层；
Flutter Framework: 整个框架层都是用Dart语言实现，该层提供一套基础库， 用于处理动画、绘图和手势等。并且基于绘图封装了一套 UI组件库，并且细分为两种风格的组件
- Materail : Android风格的Widget
- Cupertino: IOS风格的Widget
Skia是什么？
Skia是一个 2D的绘图引擎库，其前身是一个向量绘图软件，Chrome和 Android均采用 Skia作为绘图引擎。Skia提供了非常友好的 API，并且在图形转换、文字渲染、位图渲染方面都提供了友好、高效的表现。Skia是跨平台的，所以可以被嵌入到 Flutter的 iOS SDK中，而不用去研究 iOS闭源的 Core Graphics / Core Animation。
Flutter Engine: 这是一个纯 C++实现的框架层，包含了 Skia引擎（高性能渲染引擎）、Dart运行环境、文字排版引擎等。它可以以 JIT、JIT Snapshot 或者 AOT(预先编译)的模式运行 Dart代码。AOT直接将Dart源码编译成了本地字节码，没有了解释执行的过程，提升执行性能。和Java显著不同的是Dart的"线程"(Isolate)是不共享内存的，各自的堆(Heap)和栈(Stack)都是隔离的，彼此之间通过消息通道来通信。所以，Dart不存在数据竞争和变量状态同步的问题，整个Flutter Framework Widget的渲染过程都运行在一个isolate中，在代码调用 dart:ui库时，提供 dart:ui库中 Native Binding 实现。 这个运行时还控制着 VSync信号的传递、GPU数据的填充等，并且还负责把客户端的事件传递到运行时中的代码。
[图片上传失败...(image-d0acd1-1543882512081)]
Flutter工程目录结构
参照创建您的第一个Flutter应用创建一个默认的Flutter App功能目录结构如下
[图片上传失败...(image-7049d4-1543882512081)]
- lib目录
- lib目录下主要编辑Dart相关代码
- pubspec.yaml
- pubspec文件管理Flutter应用程序的assets(资源，如图片、package等)项目依赖:
- android
- Android工程
- ios
- Ios工程
[图片上传失败...(image-1674f3-1543882512081)]
Flutter生命周期
State生命周期
widget是immutable的(不可变)，发生变化的时候需要重建，所以谈不上状态。StatefulWidget 中的状态保持其实是通过State类来实现的。State拥有一套自己的生命周期，下面做一个简单的介绍。
| 名称 | 状态 |
|---|---|
| initState | 插入渲染树时调用，只调用一次 |
| didChangeDependencies | state依赖的对象发生变化时调用 |
| didUpdateWidget | 组件状态改变时候调用，可能会调用多次 |
| build | 构建Widget时调用 |
| deactivate | 当移除渲染树的时候调用 |
| dispose | 组件即将销毁时调用 |
生命周期图如下:
[图片上传失败...(image-8fd367-1543882512081)]
几个注意点:
- didChangeDependencies有两种情况会被调用。
- 创建时候在initState 之后被调用
- 在依赖的InheritedWidget发生变化的时候会被调用
- 正常的退出流程中会执行deactivate然后执行dispose。但是也会出现deactivate以后不执行dispose，直接加入树中的另一个节点的情况。
- 这里的状态改变包括两种可能：
- 1.通过setState内容改变
- 2.父节点的state状态改变，导致孩子节点的同步变化。
App生命周期
需要指出的是如果想要知道App的生命周期,那么需要通过WidgetsBindingObserver的didChangeAppLifecycleState 来获取。通过该接口可以获取是生命周期在AppLifecycleState类中。常用状态包含如下几个：
| 名称 | 状态 |
|---|---|
| resumed | 可见并能相应用户的输入 |
| inactive | 处在并不活动状态，无法处理用户相应 |
| paused | 不可见并不能相应用户的输入，但是在后台继续活动中 |
一个实际场景中的例子：
- 在不考虑suspending的情况下：从后台切入前台生命周期变化如下:
- AppLifecycleState.inactive->AppLifecycleState.resumed;
- 从前台压后台生命周期变化如下：
- AppLifecycleState.inactive->AppLifecycleState.paused;
