Flutter 体验记

终于挤出点时间，来体验一把 Flutter，虽然貌似出了很久了，一直没玩过，看起来又很有意思，多学习点东西总是好的，实践才是最好的老师。

虽然网上的教学文章很多，还是需要自己照着流程走一把，做着属于自己的笔记，才更深刻。

1. 环境搭建

• 首先，当然就是 搭建环境，打开 Fuller 中文网，地址是：https://flutterchina.club/get-started/install/，我的是 Windows 系统~

1

• 一步步走，由于在国内访问 Flutter 有时可能会受到限制，所以按照流程来先配置下用户环境变量，临时镜像不能保证一直可用，参考 Using Flutter in China 获取最新动态。

2

• 看下系统要求，这一般都是满足的，Git for Windows 工具装起来也很简单，将安装地址配置在系统环境变量的 Path 中，弄好在命令框里面输入git 验证下是否安装好即可，输入 git --version 还可以看看版本。

3 4

• 接下来，下载 Flutter SDK
  下载地址：https://flutter.dev/docs/development/tools/sdk/releases#windows
  or https://github.com/flutter/flutter/releases
  那我就下载个最新的稳定的版本，这个名字看起来是修复了啥bug的，下载共 470.21M，啧啧啧~

5

• 然后解压，我是解压到了 D 盘，按照教程说的，找到 fultter_console.bat，双击运行。

6

• 打开后的 FLUTTER 字有点酷~ 然后输入 fullter doctor，得到如下结果。
  （注意这里的 X ，开头没去管，后面就开始填坑）

7

• 输入个 flutter --version 看看版本，当然还可以输入flutter help 寻求点帮助，看看咋玩转 flutter：

8

• 作为 Android 开发，当然就是准备在 Android Studio 这个编辑器上写 Flutter，这个就是老早就安装好的，这...就不来一遍流程了。直接打开 AS （目前我电脑上的版本是 3.4），下载 Flutter 插件。

9

• 纳尼，什么情况？查网上原因，别人说IDEA的模块系统加载不出来，是由于IDEA的网络安全机制造成的，类似于windows的防火墙，IDEA误认为你的网络不安全，不给你连接，本质为公司的网络被IDEA认为不安全，具体IDEA为什么会这么认为，不知道。

• 解答：点击 File -> Settings -> Appearance&Behavior -> System Settings -> Updates 将 Use secure connection 选项的 √ 去掉！ 可是我发现我这里本来就是去掉的，只不过没勾上 Automatically check updates for Stable Channel ，于是勾上点击 Check Now，出现更新，点击 Update and Restart 顺带的更新重启一下。

10

• 重启后，Automatically check updates for Stable Channel 还没勾上，勾上 Apply 一下，再到 Plugins 的 Marketplace 中搜索 Flutter，出现了。Install 后 Restart（虽然也不知道是不是上面设置的原因，总之暂时解决了插件搜不到问题就是好的，感觉也可能是没更新的原因，哈哈）

11

2. 开始体验项目

• 一切准备完毕，终于要开始创建应用啦。打开 AS，File -> New Flutter Project。

12

• Create New Flutter Project，这当然选择 Flutter Application。

13

• 随意取个 project 的名称，这里，第一个坑来了，Flutter SDK path，这里在开头明明就下载好了，解压在 D 盘的 flutter 文件夹下，可是总是检测失败。

14

• 原来开头没有配置 flutter 的环境变量，so，赶紧去配置好一下，如下图，于是上面选择好Flutter SDK path就成功了：

15

• 项目创建完毕，如图所示了，虽然没学过 dart 语言，先跑一下 。

16

• 大坑又来了，跑不起来，copy 下图框住的英文搜索，其实这里下面 wrong 的提示也可以发现，貌似是从 jcenter 上拉不下来一下 jar 包。

17

• 搜到的 Flutter 踩坑记也都说是这种原因，网络限制，拉取不到需要的 jar 包，于是，照着别人说的改呗，从 aliyun 拉取。

18

• 将 google()、jcenter()，都替换一下。

maven{ url 'https://maven.aliyun.com/repository/google' }
maven{ url 'https://maven.aliyun.com/repository/jcenter' }
maven{ url 'http://maven.aliyun.com/nexus/content/groups/public'} 

• 别忘记了 flutter_tools\gradle 同样替换，我这的地址是 D:\flutter\flutter\packages\flutter_tools\gradle

19

• 替换了也一直没跑起来，我这里还把 gradle 也升级到了目前最新的版本。

20

• 还是没跑起来！这里坑又来了，上面没理的 X 来报复了，再次打开 flutter_console.bat ，输入 flutter doctor，检测一下，果然，这里还有两个 X 没解决呢。

21

• 好吧，阅读英文，先解决第二个吧，说是 Android 许可证没被接受是吧，那就按照提示的说，运行 flutter doctor --android-licenses。

22

• 打印了一堆东西，打入各种 y 允许一下，so，这个问题搞定了。接下来嘛，就是第一个问题了，说 Flutter 需要 Android SDK 版本为 28，而且 Android BuildTools 为 28.0.3，我这里是 28.0.1，让我自行去检查升级下，其实这里提示说我这 SDK 在 C 盘，让我去那检查，也不知道这是不是缓存的，实际上我的 AS 配置的 SDK 在 D:\sdk 下，那里也存在 28.0.3，它为啥没检测到，不管了，从 D:\sdk 里面将需要的版本拷贝一下，粘贴到这里说的目录下，继续输入 flutter doctor，终于，都是绿绿的 √ 了，开森。

23

3. 运行项目

• 现在终于，总算填完坑了吧，运行项目。

24

• Yes，跑起来了，然后改一行代码，main.dart 中，随便改几个文字，按闪电。

25

• 体验热重载（hot reload），无重启实时加载修改后的代码，并没丢失状态，好好好啊，这个感觉起来快得很，不错不错。

26

总结

回过头一看，体验过程写得真长，真的是一步步下来，记录过程。虽然有点坑在，总算完成了体验。接下来，如果不忙，就系统学习下 Flutter，看似还是很好玩的，项目建起来旁边还有 ios 目录，不知道是不是可以找个苹果手机直接运行，现在还没尝试，毕竟初步体验，留着下次再探究怎么玩。

Flutter中文网 学习 Flutter 也好方便，加油好好学，网站右上角还有本书的链接 《Flutter实战》，好好好，学学学。一步一个脚印。

Github 上还有不少不错的开源项目，自己找吧。

先记录一个：

GSYGithubAppFlutter：Flutter完整开发实战详解系列，提供在线预览和pdf下载，本系列将完整讲述：如何快速从 0 开发一个完整的 Flutter APP，配套高完成度 Flutter 开源项目 GSYGithubAppFlutter ，同时会提供一些Flutter的开发细节技巧，之后深入源码和实战为你全面解析 Flutter

立个目标：将上述几个学完，理解+实践，应该就有还不错的水准了吧。加油！