近几年，移动端跨平台开发方案层出不穷，从Facebook开源ReactNative，到阿里跟进WEEX，前端技术在移动端跨平台开发中大展身手，笔者作为一名Android开发者，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。笔者在2018年3月份有幸结识了Flutter，通过短暂的学习，进而开发了一款基于Flutter的开源中国客户端App(源码：码云, GitHub)。2018年5月，Google IO大会召开后，Flutter在开发者中名气越来越大，参与到Flutter开发中的开发者也越来越多，笔者遂萌生想法，希望用博客记下开发基于Flutter的开源中国客户端的过程，希望跟大家一起学习，一起进步！

Flutter简介

Flutter是什么

这是Flutter中文网上对于Flutter的介绍：

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

Flutter的特性

快速开发

毫秒级的热重载，修改后，您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。

Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载，并且不会丢失状态。

如果您是一名Android开发者，会发现在最初开发Android应用的时候，调试Android应用是一个非常繁琐的过程，经常是修改了某个地方的一点样式，就得重新打包运行App，非常耗时，后面AndroidStudio才推出Instant Run功能，让修改后的代码能快速预览在真机或者模拟器上，今天我们做Flutter开发，完全可以不必担心这种问题了，HotReload功能大大简化了调试应用的过程，修改了代码后，保存（需要在AS中设置）或者点击Flutter Hot Reload按钮，即可快速预览出新的界面。

富有表现力和灵活的UI

快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义，从而实现难以置信的快速渲染和富有表现力、灵活的设计。

使用Flutter内置美丽的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而自然的滑动效果和平台感知，为您的用户带来全新体验。

如果您是一名ReactNative或者WEEX开发者，会很清楚在构建App UI的时候，往往要写很多的样式，才能实现一个比较漂亮的用户界面，而Flutter与之不同的是，Flutter内置了很多精美的组件，让你通过简短的一些代码，即可创建漂亮的UI。

原生性能

Flutter包含了许多核心的widget，如滚动、导航、图标和字体等，这些都可以在iOS和Android上达到原生应用一样的性能。

通过平台相关的API、第三方SDK和原生代码让您的应用变得强大易用。 Flutter允许您复用现有的Java、Swift或ObjC代码，访问iOS和Android上的原生系统功能和系统SDK。

Flutter不同于Web App或者Hybrid App，使用Flutter开发的移动应用，完全是一个原生的App，拥有媲美原生应用的流畅体验。

Flutter开发环境搭建

在Flutter中文网上，关于搭建开发环境的教程已经写得比较详细了，这里笔者希望通过穿插一些图片，让各位初学Flutter的小伙伴能更轻松的搭建好开发环境，工欲善其事，必先利其器，下面就开始开发环境的搭建吧！

MacOS上搭建Flutter开发环境

1. 克隆Flutter代码

使用下面的命令克隆Flutter的代码：

git clone -b beta https://github.com/flutter/flutter.git

如果你的网络环境不太好，请使用工具科学上网，或者使用码云提供的镜像，将上面的https://github.com/flutter/flutter.git改为码云的地址：https://gitee.com/mirrors/Flutter

2. 将Flutter代码的bin目录加入到系统环境变量中

在终端中进入用户目录：

cd ~

使用下面的命令打开.bash_profile文件：

open .bash_profile

如果文件不存在，就使用touch命令创建文件并打开：

touch .bash_profile
open .bash_profile

打开.bash_profile文件后，添加如下几行：

export PATH=${PATH}:/Users/xxx/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

上面的第一行：

export PATH=${PATH}:/Users/xxx/flutter/bin:$PATH

需要注意的是将/Users/xxx/flutter更换为你自己本机的flutter目录

第二行及第三行是在国内为了正常使用flutter相关的命令而添加的，具体说明可以参考这里

修改完.bash_profile后，保存并关闭该文件，然后使用如下命令让配置生效：

source .bash_profile

为了测试flutter环境变量是否配置成功，在终端中输入flutter命令并回车，如果出现flutter命令相关用法提示，则表示flutter环境变量配置成功，如下图所示：

3. 使用flutter doctor命令安装其他依赖

flutter doctor是用于检查flutter相关依赖有没有正确安装的命令，比如Android SDK是否安装，Xcode是否安装等，笔者的机器在运行flutter doctor后输出如下：

打叉的表示没有安装，打勾的表示已安装，对于Flutter开发而言，安装了FlutterSDK和AndroidStudio、Xcode、AndroidSDK等即可（你也可以使用VSCode作为Flutter的IDE，但是笔者推荐使用AndroidStudio，开发起来更便捷）

4. 配置你的AndroidStudio，安装相关插件

上面3步搞定之后，你还需要配置一下你的AndroidStudio，由于Flutter开发的主要使用语言是Dart（关于Dart的基础语法，可以参考我的第二篇博客），所以你还需要为AndroidStudio添加支持Dart的插件。

打开你的AndroidStudio，使用Command + ，快捷键，或者点击左上角的Android Studio -> Preferences...菜单，打开AndroidStudio的设置界面，找到左侧的Plugins选项，并分别输入dart和flutter查找并安装插件，如下图所示：

笔者的机器上已安装这两个插件，所以右侧显示的是Uninstall按钮而不是Install按钮，如果你没有安装，需要点击右侧的Install按钮。

安装完插件后，还需要配置DartSDK的路径，在上面的设置对话框中，找到左侧的Languages & Frameworks -> Dart，然后在右边的Dart SDK path填入Dart SDK的路径，该路径就是最初我们clone flutter代码的目录中的/bin/cache/dart-sdk目录，如下图所示：

Windows及Linux上配置开发环境

Windows及Linux上配置开发环境跟Mac上类似，都是clone代码，配置环境变量，运行flutter doctor，配置IDE这几步，具体配置过程就不赘述了，大家可以参考Flutter中文网中的教程：
* 在Windows上搭建Flutter开发环境
* 在Linux上搭建开发环境

参考

• Flutter官网（英文）
• Flutter中文网

我的开源项目

基于Google Flutter的开源中国客户端，希望大家给个Star支持一下，源码：
* GitHub
* 码云