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源码

1. git版本

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

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

2. 下载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 安装

1. 配置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 源码的位置。

2. 检查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

3. 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 关联目录

1. dart的相关文件
   .dart
   .dartServer
   dart的分析数据存储位置，可能会很大。

2. 配置文件
   .devtools
   .flutter
   .flutter_settings
   .flutter_tool_state

3. 依赖库
   .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

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

3.4 Flutter项目结构

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

3.5 运行

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

   
   
   

   运行模式

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

   
   
   

   热重载模式

3. 性能测试(profile)

   
   
   

   性能模式
   
   

   如果需要对Flutter的性能进行测试，需要把项目跑在Profile Mode下。

4. 发布模式(release)
   正式对外发布的Flutter apk版本。

四. 参考文档

Flutter 官网文档
Flutter 中国