本人计划用 flutter 重写公司的老的应用，所以在业余时间进行 flutter 的苦逼学习之旅。我深知厚积而薄发，不积硅步无以至江河的道理，学习过程难免有痛苦也有挣扎，好记性真不如烂笔头，随着年纪增大更加是记不住那么多琐事了。所以要写博客来巩固和方便自己后续快速查阅，当然如果能对读者朋友有一点点帮助那真是很开心的一件事。本文为整个学习系列的开篇。
Android Studio 和 Xcode 安装
本篇是针对 Mac os 系统来搭建 flutter 环境的，因为本人一直以来都用 Mac，所以其他平台我也就没去搭建了（很懒的😊）。 也因为本人碰巧也开发过 Android 和 IOS 原生应用，因此在某些环境设置上显得轻车熟路。笔者开发 Android 使用 Android Studio, 开发 IOS 使用 Xcode， 因此我也是比较推荐读者也使用对应的环境，当然你也可以使用 IntelliJ IDEA(Android Studio 也是基于此来定制的，因此两者搭建 flutter 的环境一致) 和 Visual Studio Code (微软开源的一款编辑器，内置很多丰富的插件可以使用)。
首先安装 Android Studio, 你可以一并将 SDK manager 下载。安装完毕后下载不同平台的 SDK 版本, 点击 perfrences -> Android SDK, 如图所示：
你可以看到打勾的都是我已经下载完成的，为什么下载这几个呢？是因为包含目前主流的 SDK，更低的就没必要在下载了。当然你也可以只下载最新的几个版本(7.0 以上)。
然后是安装 Xcode 版本，在 App store 直接搜索 Xcode 然后安装即可，直接运行，如果是第一次打开会提示允许 Xcode 许可协议或通过命令 sudo xcodebuild -license 同意。 打开后如图所示：
Flutter SDK 安装
搞定了开发环境，接下来就是 flutter sdk 下载了，首先如果你是具备梯子的用户，你可以直接看官方的文档, 如果不是的话也没关系，你可以看中文社区。 我就以中文社区来配置。
- 配置镜像访问地址
当然你要留意这个镜像地址是否改变了。你可以将下面的配置加入到你的 shell 环境配置中，笔者使用的是 oh my zsh 也是一种 shell 环境， 默认使用的是 bash, 你是 bash 使用 Vi 或 其他编辑器打开 @HONE/.bash_profile 加入如下的配置。如果跟我一样使用的是 zsh 环境就加入到 ~/.zshrc。
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
-
重启终端或者使用 source $HOME/.bash_profile 刷新终端窗口
-
下载 flutter 安装包
// 通过 clone 的方式获取 flutter, 当然你也可以去官方网站下载压缩包然后解压
git clone -b dev https://github.com/flutter/flutter.git
// 如步骤1方式加入到shell配置, 这样就可以使用 flutter 命令啦
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
// 使用 doctor 检查当前是否有依赖需要安装
flutter doctor
- 执行 flutter doctor
可以看到 flutter 为我们检查到当前环境那些未安装，可以看到笔者AS、Xcode、VSCode、IDEA 都有，因为我并不实用 VSCode 和 IDEA 去开发。因此就不去配置了，可以看到 IOS环境没有报错， Android 环境提示我运行 flutter doctor --android-licenses 然后一路同意即可, 如下图， 就可以看到Android 和 IOS 环境都解决了。接下来就可以开发了。
当然如果没有错是最好的，但是大部分来说，如果你是前端转过来的开发者可能你的环境就会报错。常见会出现 IOS 工具链错误错误。你只需要按照它的提示一步步安装即可。
- 安装 Android Studio flutter 插件
Preferences -> Plugins，搜索 flutter 然后直接安装即可。
新建一个 flutter 工程运行
如果所示，打开 AS(Android Studio) 然后选择 start a new Flutter project, 然后选择 Application 填写工程名称（小写字母，单词之间用_ 连接）和报名(一般域名倒写，例如： com.hxj.xxx)。下图是我新建的工程名称为 hello_flutter
我建议还是要用真实手机来调试，当然用模拟器也可以，不过会影响电脑的性能。比如笔者安卓使用的是红米 7 ， IOS 模拟器使用的是 iphone6s。首先我们先点击运行按钮，如图所示，先来看安卓的运行环境。IOS 还是有问题的，稍后再说。
运行效果如图所示(红米7)
要运行 IOS 项目，首先我们先要用 Xcode 打开项目进行一些设置，指定开发者， 我们找到当前项目下 ios 目录，然后找到 Runner.xcworkspace 并打开。找到图中红色警告的地方，需要我们指定一个开发者团队（一般就是 apple id 账号），现在已经支持个人开发开发和调试应用了，发布的话还需要购买个人开发者或企业开发账号。如果你没有账号的话就注册一个Apple ID 账号。
指定完开发者后就可以运行了，点击左上角的播放按钮开始运行，如果第一次 attach 真机设备进行开发，需要同时信任你的 Mac 和该设备上的开发证书。如果没有提示 Trust This Computer 对话框让你选择信任，就进入设置-> 通用 -> 描述文件与设备管理， 然后选择你的开发者应用进行信任即可。
如果自动签名错误，可以更换 General -> Identity -> Bundle Identifier 是否唯一。
最后来看 Android 和 IOS 真机效果
Android（红米7）
IOS（phone6s）
热重载调试
得益于 Dart 支持 Jit(即时编译)，调试 UI 变得十分方便，只要 widget 树发生了变动，"Hot Reload" 就会起作用。如果你的热重载不起作用（带有闪电⚡的标志灰色），你需要移除你的配置文件中的代理设置。
