本文共 9523 字，大约阅读时间需要 31 分钟。
版权声明：本文为博主原创文章，未经博主允许不得转载。
转载请标明出处：
本文出自在 Google I/O ’17 上，Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。
Flutter是什么呢?它是Google使用Dart语言开发的移动应用开发框架，用来帮助开发者在iOS和Android平台上开发高性能、高质量的原生应用。Flutter是跨平台的免费开源UI框架，iOS和Android可以共用一套代码。
Flutter是基于Dart语言编写的。主要优点：
- 免费开源
- 利用保持状态的热重载（Hot Reload）、全新的响应式框架、丰富的控件以及集成的开发工具这些特点进行快速开发。
- 通过可组合的控件集合、丰富的动画库以及分层可扩展的架构来实现富有感染力的灵活界面设计。
- 借助可移植的 GPU 加速的渲染引擎以及高性能本地 ARM 代码运行时以达到跨设备跨平台的高质量用户体验。
- 提高效率：使用一套代码同时开发Android和iOS。
- 可扩展性很强：Flutter框架本身提供了丰富的Material Design和Cupertino(iOS-flavor)风格的控件，可自由扩展控件不受手机平台控件的限制。
今年（2018年）2月，Flutter推出了第一个Beta版本。这真是个好事。期待正式版早日发布。最近研究了一下Flutter，这个工具从安装到运行经历了九九八十一难，好在终于成功运行起来了。下面看一下官方的Demo在Android模拟器的运行效果图：
下面就 详细的 讲一下我的安装之路和遇到的一些问题：
要安装并运行Flutter，你的开发环境必须满足这些最低要求：
这里以windows系统为例（）， macos安装文档请查看： linux安装文档请查看：（一） 操作系统：Windows 7 SP1或更高版本（64位）
具体描述：略
（二） 磁盘空间：400 MB（不包括IDE /工具的磁盘空间）。
具体描述：略
（三） 对Android Studio的要求：需要安装3.0 或者更高的版本。
具体描述：略
（四） Flutter支持的sdk环境：Android 4.1（API 16）或者更高版本。
具体描述：略
（五） 对Android模拟器镜像的要求：推荐使用x86或者x86_64镜像。
具体描述：略
（六） 工具：Flutter需要用到以下2个工具：
PowerShell是微软推出的代替cmd的更方便的命令行工具，不管是win7 win8 还是win10windows系统都自带有这个命令行工具。
查看PowerShell有没有安装，可以点击电脑左下角 --> 控制面板 --> 程序 --> 程序和功能，找一下PowerShell，有时候安装了也可能找不到（我电脑就找不到），那就win + R,输入cmd回车，输入$PSVersionTable ，查看powershell版本。 如果报错说明没有安装PowerShell，请点击powershell官网 【注意:】关于命令行无法显示某些字符或者中文乱码问题的解决：
1、无法显示√或者×字符
原因是点阵字体搞的鬼。设置一下控制台字体就可以了。 在控制台标题右键，选择字体，把点阵字体改为其他字体就可以了。2、cmd中文乱码的解决：
1. win+R 输入regedit 进入注册表 2. 找到 `HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe` 如果该项下已存在CodePage项，则把值改为十进制”65001”；如果不存在，在该项下新建一个 DWORD（32位值），命名为“CodePage”，值设为“65001” 3. 重启cmd后生效
1. win+R 输入regedit 进入注册表2. 找到 `HKEY_CURRENT_USER\Console\%SystemRoot%_system32_WindowsPowerShell_v1.0_powershell.exe` 下的项。如果该项下已存在CodePage项，则把值改为十进制”65001”；如果不存在，在该项下新建一个 DWORD（32位值），命名为“CodePage”，值设为“65001”3. 重启PowerShell后生效安装好之后，运行一下看看版本号，我这边的powershell版本号相关信息如下： PSVersion 5.1.15063.1029 PSEdition Desktop PSCompatibleVersions {1.0, 2.0, 3.0, 4.0...} BuildVersion 10.0.15063.1029 CLRVersion 4.0.30319.42000 WSManStackVersion 3.0 PSRemotingProtocolVersion 2.3 SerializationVersion 1.1.0.1 使用git命令行（关于如何使用git，请查看我的博文 ）：
git clone -b beta https://github.com/flutter/flutter.git
运行过程截图（这里下载的是beta版的，你也可以下载其他分支的，比如master分支）：
flutter 环境变量如果想在命令行中使用 flutter 命令，你需要添加flutter的路径到path中去。这个和配置java环境变量是同样的做法，找到flutter安装路径，比如我的是E:\develop\flutter\bin，我复制这个路径，右键我的电脑-->属性-->高级系统属性-->环境变量-->找到PATH，点击编辑-->在最后把刚复制的路径粘贴进来，-->一直保存确定就可以了。
接下来，使用flutter --version 查看一下版本号，看看环境变量配置好了没有。。如果如下图所示表示OK。
【大坑】注意：如果只输入flutter 或者输入flutter -version， 那么flutter以为是下达了自动更新命令，会自动更新最新版本，这个一定要注意了。
如果你在国内使用 Flutter，那么你可能需要找一个与官方同步的可信的镜像站点，帮助你的 Flutter 命令行工具到该镜像站点下载其所需的资源。你需要为此设置两个环境变量：
PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL，然后再运行 Flutter 命令行工具。
上海交通大学 Linux 用户组FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cnPUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cnFlutter 社区FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cnPUB_HOSTED_URL: https://pub.flutter-io.cn
建议使用Flutter 社区这个镜像，这个比较快
win + R 快捷键，输入cmd，回车，输入flutter doctor，回车。
这个命令初次运行可能会很慢，Flutter会自动安装所需依赖，并进行编译。建议科学上网。
安装过程截图：
注意：
[√]这个是安装OK的，[X]是需要安装的，或者是已安装但是没有运行起来的。（具体这里面有标记[X]的那些项如何安装后文有详细讲解，这里简单提一下。） 这里面有四项内容：
查看版本号的命令使用截图如下：
以下是常用命令：
| 常用命令 | 含义 |
|---|---|
| --version | 查看Flutter版本 |
| -h或者--help | 打印所有命令行用法信息 |
| analyze | 分析项目的Dart代码。 |
| build | Flutter构建命令。 |
| channel | 列表或开关Flutter通道。 |
| clean | 删除构建/目录。 |
| config | 配置Flutter设置。 |
| create | 创建一个新的Flutter项目。 |
| devices | 列出所有连接的设备。 |
| doctor | 展示了有关安装工具的信息。 |
| drive | 为当前项目运行Flutter驱动程序测试。 |
| format | 格式一个或多个Dart文件。 |
| fuchsia_reload | 在Fuchsia上进行热重载。 |
| help | 显示帮助信息的Flutter。 |
| install | 在附加设备上安装Flutter应用程序。 |
| logs | 显示用于运行Flutter应用程序的日志输出。 |
| packages | 命令用于管理Flutter包。 |
| precache | 填充了Flutter工具的二进制工件缓存。 |
| run | 在附加设备上运行你的Flutter应用程序。 |
| screenshot | 从一个连接的设备截图。 |
| stop | 停止在附加设备上的Flutter应用。 |
| test | 对当前项目的Flutter单元测试。 |
| trace | 开始并停止跟踪运行的Flutter应用程序。 |
| upgrade | 升级你的Flutter副本。 |
（一）AS
Flutter对Android Studio的要求：需要安装3.0 或者更高的版本。
关于AS安装，这个就不用说了，大家都安装了吧，jdk,sdk这些都配置好了吧.直接看下文好了。
（二） Flutter和Dart插件安装
Flutter需要Flutter和Dart插件才可以使用：
File --> settings --> Plugins --> Browse repositories，然后输入Flutter就可以下载了，Drat也是一样的道理。
Flutter插件安装：Dart插件安装：安装好之后重启一下AS就可以使用插件了。
要同时更新Flutter SDK和包，请使用以下命令：
flutter upgrade
前面我们下载的beta分支下面的包，最近Flutter推出了PreView版本，那么我们应该如何更新呢？
先看几个命令：
查看远程分支：
git branch -a
查看本地分支：
git branch -v
切换分支：
git checkout -b 分支名称> 例如 切换到master分支：git checkout -b master
git如何clone远程github中的分支？
git clone -b 分支名称 github上的url
例如：下载flutter的master分支（PreView版本就是这个分支），命令如下所示：
git clone -b master https://github.com/flutter/flutter.git
Flutter支持的sdk环境：Android 4.1（API 16）或者更高版本。
Android模拟器：推荐使用x86或者x86_64镜像。创建project过程和普通安卓项目是很类似的。
（一）打开AS，点击 File --> New Flutter Project，选择Flutter application
然后点击next，输入一个工程名字。
注意：项目名称必须是小写，单词之间用下划线隔开，你看我这样创建就给我提示错误了，报错的如图所示。
（二）输入包名，点击next，点击finish，等待编译就可以了。如果没配置好，这个时候往往会报错。
注意：这里可以支持ios和kotlin，如果需要的话可以勾上。
（三）首先模拟器，然后选择要运行的项目，注意了，这里有一个
MainActivity和main.dart，选择main.dart，然后点击绿色的三角号图标运行（或者点击菜单栏Run）就可以了。
我用的AS3.2，我截个图，菜单栏跟以前版本有点不同，之前的AS版本可以在Build菜单找到编译选项的。
如果代码有更改，可以点击黄色的闪电图标
运行之后的截图：
工程目录结构：
（一）卸载flutter相关环境
（二） 卸载flutter之后，重新git命令安装flutter之后，然后命令行运行
flutter doctor时，会有以下错误（以下是我的填坑指路全过程）：
注意：由于下载的国外的网站上的资料，需要科学上网！！！
我退出命令行再运行，还是照样出错。
后来我想是不是BITS传输服务未开启，于是我一顿操作猛如虎，操作如下，打开BITS：
计算机 --> 右键 “管理” --> 服务和应用程序里面，点击“服务”，然后如下图所示：
然后选中图中标记的这个，右键点击“属性”，然后改成自动，确定。如下图所示：
然后我把刚下载的flutter文件夹删掉，重新执行git命令，下载flutter。（下好了之后记得配置环境变量）然后执行flutter doctor 命令，这次好一些了，但是命令行更新的很慢，一直停留在命令行，如图所示：
等了好久，终于出来了。
然后又是漫长的等待，在下载Material fonts这里出错了,于是我关掉了命令行，重新打开命令行，执行flutter doctor命令。
然后又是失败。。不等了，关闭命令行吧。
然后重新打开命令行，执行flutter doctor命令。经历了几个小时的折腾，终于环境安装好了！
然后重新打开命令行，执行flutter doctor -v命令，。看看还有什么需要安装的？（目前我安装的flutter最新版是0.4.4）,如下图所示：
新版的跟旧版的有区别，这里的每一项里面的小项都很详细的列举了类目，只要是正确安装了IDE，以及配置了jdk,sdk环境的，都会详细列出来。
Flutter支持Android Studio、VSCode以及 的方式。如果你还安装了VSCode，命令行里面也会列举出来的。
【重点提示】按照提示来操作即可，哪个缺少（前面是 X 符号的）就配置哪一个。。一般来说，命令行会给你一些提示，比如需要使用什么命令操作，需要在哪个路径下面操作等。。
ANDROID_HOME环境变量，jdk配置路径，jdk运行环境版本，android licenses(协议)。下面是安装过程中出现的一些安装包缺少的问题：
↓这个 问题的原因：是sdk环境变量没配置，找到sdk路径，比如我的是E:\debelop\sdk，我复制这个路径，打开环境变量，新建一个变量，取名为ANDROID_HOME，然后在path变量里面最后加入;%ANDROID_HOME\%
↓这个 问题的原因：一些android licenses没有同意，按上面的要求在命令行输入flutter doctor --android-licenses，回车，然后会出现要你输入y/n 你只要输入y 回车就好了。
↓其他问题：基本都是开发工具的配置了，这个就不多说了，大家应该很熟悉了。
（三） 使用cmd执行
flutter doctor报错：无法与服务器建立连接。
报错如下所示：
问题排查：
首先：我在电脑属性服务里面开启了BITS，这个问题已排除。
其次：我的环境配置都是没问题的。最后我看flutter官方安装文档推荐使用PowerShell，于是我打开PowerShell命令行（必须安装5.0+版本），输入flutter doctor，终于好了。所以为了不出奇怪的错误，请下载使用 PowerShell 5.0版本
（四） Flutter插件不支持当前AS版本。当前的AS是3.2，我的gradle编译的api是27的，可能Flutter目前最高只能支持26，果然我在build.gradle里面的编译版本改成了26，重新编译一下，OK了。
（五）系统重装了，flutter工具也是重新安装的，由于没有备份C盘的之前下载的三方库，导致项目加载的时候重新加载一大堆三方库，很卡，下载用了很长时间（需要科学上网）。
【顺便说明一下三方库使用方式】：
Flutter使用外部开源包，打开pubspec.yaml文件，在如下加了中文注释之处添加依赖库：
dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 # 在这里添加依赖库，比这个是英文单词的库 english_words：^3.1.0 # 这个是图片选择的库 image_picker: ^0.4.1
格式：库名称: ^库版本号
注意：冒号是中文标点，有一些库需要^，不要忘记^
可以在 pub.dartlang.org 上找到开源软件包。（需要翻墙）直接添加依赖，可能会很慢，
也可以直接去 查找想要的依赖库，直接下载压缩包，然后复制到以下路径：
C:\Users\XXX\AppData\Roaming\Pub\Cache\hosted\pub.dartlang.org\(使用依赖库安装完成后的本地路径也是这个)，建议把这个文件夹备份，以便系统出故障之后或者重装系统之后好还原。
（六）明明开启了模拟器，可是AS就是不显示模拟器，如下图所示：
然后新建了一个API 26的模拟器，然后命令行窗口提示以下错误：
（七） 编译一个demo居然安装包是30多M，这个也太坑了吧。。安卓原生的apk包最多就几M。但是这是debug模式下的apk包，签名打包后的release版本的包很小，大概几兆的样子。
（八）Flutter有一个Flutter Inspector的工具，主要是检查Widget的，可以用于诊断布局渲染问题，查看app当前的视图树结构。但是：这个视图树层次太深了，看起来很费劲有木有。。 详细使用描述可以参考官网文档：
【备注：】不同电脑视图树工具显示不一样，可能跟cpu是x86或者x64有关，另外一台电脑就没有这么多层次了，用到了哪些控件就显示哪些，很明确清晰。如下图所示：
Flutter有关网站
Flutter官方文档
官方主页，英文版。Flutter中文官网
官方的中文网，最新出来的，资料齐全，视频、博客、文档、最新咨询都有。Flutter中文版 （不想翻墙的，推荐看这个网站） 网友自制的中文网，翻译更新的比较快，基本跟官网同步，但是翻译的只有一部分。
Flutter中文网
网友自制的中文网，内容翻译的比较多，但是内容还比较老，还没来得及更新最新内容。Flutter Github地址
Dart有关网站
开源代码下载库 三方库都可以在这里下载。
Dart语言官方主页
官方主页，英文版。Dart编程语言中文网 这是翻译自Dart官网的一个网站，内容页比较新，可以去看看。
国内最大的Dart语言中文社区 （推荐看看） 这个网站有Flutter和Dart的学习资料很全面，但是博客内容很久没更新了。
Dart中文主页
Dart语言中文社区,这是一个发帖论坛类型的。DartPad在线编辑器 Dart语言的在线编辑器
DartPad的Github地址
DartPad的源码。另外可以推荐下载nodejs和 yarn，以后使用yarn下载更新包很方便。（这个不是重点，了解就可以了）