1. Flutter 简介与配置

一. 背景

1.1 产生背景

随着移动互联网的发展，在业务需求、开发成本、迭代速度等方面有了越来越高的要求。为了解决这些方面的需求，Google提出了Flutter方案。

1.2 发布时间

2018年12月5正式发布Flutter 1.0版本。

1.3 Flutter

Flutter是Google发布的一个用于创建跨平台、高性能移动应用的框架。它完全没有使用原生控件，是实现了一个自绘引擎，使用自身的布局、绘制的框架。

优点
- 跨平台UI
  利用自绘引擎来绘制UI，不依赖系统UI，渲染速度快。
- 性能强大，流畅。
  与weex、react native相比，不基于DOM树解析成原生组件再渲染。直接对接系统底层API渲染，UI性能可以比肩原生。
- 路由设计优秀
  Flutter的路由传值非常方便，push一个路由，会返回一个Future对象（也就是Promise对象）
缺点
- 新的学习成本
  相对于weex、ReactNative相比，学习成本低一点。但是有一定的学习成本，需要学习Dart语法、API、第三方库等。
- 糟糕的UI控件API
  2020年1月10日，Flutter才有1.12.13的标准版本，相关的UI API、第三方库还没有那么完善。

二. Flutter SDK安装

本文是基于MAC环境搭建Flutter SDK环境的。推荐下载源码的方式。

2.1 下载Flutter源码

git版本

git --version
git version 2.21.0 (Apple Git-122.2)

备注： 本文的git版本是mac版本。

下载Flutter源码

git命令下载

git clone https://github.com/flutter/flutter.git
error: RPC failed; curl 18 transfer closed with outstanding read data remaining
fatal: the remote end hung up unexpectedly

备注： 因为下载速度慢，远程中断，导致下载失败。

SourceTree下载
用SourceTree下载可能遇到因无模板导致的错误。

warning: templates not found in /usr/local/git/share/git-core/templates

解决方案：

sudo mkdir /usr/local/git/share/git-core/templates
sudo chmod -R 755 /usr/local/git/share/git-core/templates

2.2 Flutter SDK 安装

配置Flutter环境变量
为了支持flutter命令，需要把flutter sdk加入到PATH中。
```
open .bash_profile
export FLUTTER_SDK=/Users/XXX/Downloads/Soft/Android/Flutter/bin
export PATH=$PATH:$FLUTTER_SDK
```
备注： /Users/XXX/Downloads/Soft/Android/Flutter 为用户存放Flutter 源码的位置。
检查Flutter安装
```
which flutter    #查看是否有flutter命令
flutter doctor   #查看flutter是否安装成功
flutter doctor --verbose 
```
备注1： flutter doctor会检查安装成功，下载相关依赖包，flutter/bin/cache下的相关数据；同意Android Licenses等。
备注2： flutter下载的Dart SDK就存储在flutter/bin/cache/dart-sdk
Flutter其它命令
- flutter Config
```
flutter config --android-sdk /xxx/xxx/xxx/xxx/Android/Sdk
```
  配置Android SDK目录。或者在.bash_profile中添加ANDROID_HOME指向Android Sdk目录。
- flutter devices
  查看支持flutter的设备。
- flutter channel
  查看flutter sdk的当前分支。
- flutter --version
  查看flutter当前版本
- flutter upgrade
  flutter sdk更新
- flutter packages get
  下载应用依赖的第三方flutter库。
- flutter packages upgrade
  更新应用依赖的第三方flutter 库版本。

2.3 关联目录

dart的相关文件
.dart
.dartServer
dart的分析数据存储位置，可能会很大。
配置文件
.devtools
.flutter
.flutter_settings
.flutter_tool_state
依赖库
.pub-cache
项目依赖的Dart Packages和Flutter Plugins，都下载在该目录下。

三. HelloWorld

笔者是基于Android Studio开发的，所以基于Android Studio，创建Flutter HelloWorld。

3.1 开发工具：Android Studio

笔者安装的是Android Studio 3.5.3。Android Studio的安装配置及Android环境的搭建，不在赘述。

3.2 安装Flutter插件

给Android Studio安装Flutter插件，在安装Flutter插件的过程中，会提示安装Dart插件。
问题1： 在Android Studio 3.5.1中安装了Markdown Navigator插件后，无法通过Android创建一个新的Flutter项目。
错误原因： 错误原因未知，可能和Markdown插件有冲突关系。
解决方案：

卸载Markdown Navigator或Markdown Support插件，重启。
修改Android Studio的内存变小，重启。
修改Android Studio的内存变大，重启。

3.3 创建HelloWorld

打开 IDE，选择新 Flutter 项目 (Start a new Flutter project).
选择 Flutter 应用程序作为项目类型，然后点下一步。
输入项目名称(比如 ‘myapp’)和选择Flutter SDK目录、项目存储位置等。填写后选择完成。

3.4 Flutter项目结构

pubspec.yaml
这里配置Flutter项目的依赖库、项目名称、项目描述等信息。
使用flutter packages get来获取项目的依赖库。
lib目录
该目录下一般是用户开发的项目dart文件。
android/ios
该目录是存放生成对应平台的壳文件。
res
国际化语音包
assets
项目需要的图片资源
test
项目测试文件。

3.5 运行

运行(Run)
正常的运行包含了：flutter packages get 、编译、安装过程。

运行模式
热重载(带有闪电⚡️图标的按钮)。
文件如果有改动，则用热重载来快速生效。

热重载模式
性能测试(profile)

性能模式

如果需要对Flutter的性能进行测试，需要把项目跑在Profile Mode下。
发布模式(release)
正式对外发布的Flutter apk版本。

四. 参考文档

Flutter 官网文档
Flutter 中国