Flutter初体验-安装与配置（MacOS）

背景

前两天在安装flutter的开发环境，搞了挺久，踩了一些坑，所以写出来做个总结，希望有意愿学习flutter的小伙伴们在配置开发环境的时候能更顺利一点。这里先列出我遇到的几个坑，若你在安装过程中也遇到了，可以往下看，后文会一一给出解决办法：

APP Store无法下载Xcode
pod setup巨慢且失败
flutter run安卓平台时，遭遇Initializing gradle巨慢且失败
brew update巨慢（但一般只是慢，能成功）

Flutter的简单介绍

当下，一般企业想开发一个移动端应用时，必须招聘两拨人马（IOS开发、Android开发），做两套开发，兼容两个系统，成本可想而知会有多高。所以业界也在寻求一套尽量完善的跨平台方案能兼容两个系统。目前主流的跨平台方案主要是两种：

基于浏览器技术的Hybrid；
基于桥接Native组件，如RN、WEEX

当然，这两种方案开发出的应用在使用体验上还远远达不到Native的水平。而Flutter是基于底层统一渲染的，能得到高度一致的跨端效果，其使用体验直逼Native（网上都这么说，对此本人持保留态度）。和RN、Weex不同的是，Flutter并不属于JS生态的一个分支，它采用的是Dart语言。所以要做Flutter开发，你还需要学会Dart，当然，在初体验了Dart之后，发现其语法还是很简单的，像Java又像JS，所以，拥有JS或Java编程能力的话学习Dart应该会比较轻松。

Flutter安装（MacOS版）

注：这篇博文会针对安装过程中遇到的坑做特别说明，安装过程也可参考Flutter官网。

一、系统要求

操作系统: macOS (64-bit)
磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）
工具: Flutter 依赖这些命令行工具：bash, mkdir, rm, git, curl, unzip, which

二、获取Flutter SDK

进入Flutter下载渠道：https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos下载你所想要安装的版本（本人下载的v1.5.1_dev）
解压安装包至你想要安装的目录
添加环境变量，终端进入你的Flutter安装目录,输入pwd以获取安装路径，继续输入vi ~/.bash_profile，在vim中添加以下文本，{pwd}用你的安装路径替代：

export PATH={pwd}/flutter/bin:$PATH

由于国内墙的限制，访问Flutter会有问题，请使用Flutter官方为中国特地搭建的镜像源，请在上述vim编辑器中继续添加：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

此时~/.bash_profile中的配置如下：

image.png

三、终端保存后退出，执行flutter doctor命令

doctor.jpg

如上图，flutter会检查你的配置是否齐全，针对flutter doctor抛出的问题，我们一个一个解决。

[!] Android toolchain - develop for Android devices
   ✗ ...
   ✗ ...

1.根据提示下载Android Studio并安装
下载地址：https://developer.android.com/studio/index.html。

[!] iOS toolchain - develop for iOS devices
   ✗ ...
   ✗ ...

2. 下载并安装xcode，版本要求为v7.2或以上
由于官网安装教程中给出的链接地址是xcode的最新版本，需要对应新的系统版本，否则不能下载，建议去Apple Developer下载指定版本xcode

温馨提示：xcode体积较大，一般在5.6G左右，请保证网络顺畅。

3. 安装libimobiledevice和ideviceinstaller
根据flutter doctor提示依次执行

brew update
brew install --HEAD usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller

注意，brew update会非常慢，请耐心等待，也可以选择替换Homebrew镜像源，
这是清华大学提供的镜像：https://mirrors.tuna.tsinghua.edu.cn/help/homebrew/

4. 安装ios-deploy，执行brew install ios-deploy
5. 安装CocoaPods
执行brew install cocoapods，安装完成后执行pod setup。
注意，pod setup会很慢，并且一段时间后提示失败，即使翻墙了也不行。所以我们需要手动安装，步骤如下：

5.1 进入CocoaPods的git地址下载或clone，若是下载的压缩文件，请解压，默认的下载目录名为Specs-master
5.2 终端执行cd ~/.cocoapods/repos进入cocoapods目录
5.3 另开一个终端，cd到你的工程目录，执行pod setup，此时~/.cocoapods/repos目录下会产生一个master目录
5.4 Specs-master目录名字修改为master，并使用cp命令替换~/.cocoapods/repos下的master目录

终端再执行flutter doctor，发现关于ios的报错信息已解决

四. 配置IOS和Android模拟器

IOS
xcode安装成功后，在终端输入open -a Simulator便可打开模拟器，如图所示为IOS模拟器截图：

image.png
Android
2.1 Android Studio安装成功后启动应用
2.2 点击Configure -> AVD Manager -> Create Virtual Device
2.3 选择一项设备后点Next
2.4 为要模拟的Android版本选择一个或多个系统映像并执行download，下载成功后选择 Next.
2.5 在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用硬件加速, 完成后点finish，模拟器安装完成
2.6 完成后测试模拟器是否正常，双击模拟机列表中你安装的设备，将弹出模拟器

image.png

五. 配置编辑器（VSCode）

启动VSCode
调用查看>命令面板
输入install, 然后选择 Extensions: Install Extension
在搜索框输入flutter, 在搜索结果列表中选择 Flutter, 然后点击 Install
选择 OK，重新启动 VSCode

六. 创建Flutter工程并启动IOS及Android模拟器

在VSCode的命令面板中输入flutter, 选择 Flutter: New Project，输入project name
VSCode会帮你创建一个Flutter项目的骨架，调用调试 -> 启动调试
选择你要调试的模拟器
在模拟器中进行调试，其中这个骨架的主体业务代码在/lib/main.dart中

也可以在终端执行flutter run进行启动，但是要确保VSCode右下角已选择了一个模拟器设备

如下图所示：

image.png

注：第一次启动安卓模拟器时，会提示Initializing gradle...这个操作如果不进行翻墙，可能会失败（事实上，我翻了墙也是失败的），下载会非常慢。如果你也遇到这个问题，请按照以下步骤进行配置镜像：

进入你的工程目录，打开/android/gradle/wrapper/gradle-wrapper.properties，查看distributionUrl配置

image.png
手动下载对应的gradle（如上图的话是gradle-4.10.2-all.zip）并解压，下载地址：http://services.gradle.org/distributions/
打开Macintosh HD -> 用户 -> 选择自己的用户名，按shift+command+.组合键显示隐藏文件夹，进入.gradle目录
注：如果你的Finder左侧栏没有Macintosh HD，可以点进下载，然后按三次command + ⬆️组合键，Finder就会进入Macintosh HD，可以把Macintosh HD拉进左侧栏中

image.png

进入.gradle -> wrapper -> dists，可以看到这里有gradle-4.10.2-all目录了，再进入会有一个挺长的类似hash值的一个目录，进入此目录，将步骤2中解压的目录拷贝进来

image.png

image.png

设置Flutter SDK的镜像
打开你的Flutter SDK的安装目录，进入flutter -> packages -> flutter_tools -> gradle，打开flutter.gradle文件，在buildscript > repositories对象下注释掉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' }

如图：

image.png

设置工程中的镜像
打开你的工程目录，打开android/build.gradle文件，如上个步骤，在buildscript > repositories和allprojects > repositories两个对象下添加镜像源，如图：

image.png
再次尝试启动调试，成功！

image.png

七. Flutter初体验
Flutter可以通过热重载进行快速的代码调试，如果你做过webpack工程，它就和webpack的热重载是一样的。打开lib/main.dart，修改MyApp类下build方法的home page title，command + s进行保存后你发现了什么？无需重新构建，模拟器上立即出现了效果：

image.png

至此，MacOS上的Flutter安装和环境配置已经完成了，我们已经可以开发Flutter项目并在模拟机上进行调试了，如果想要在真机上调试，请参考Flutter官网。

PS. 如果你在安装过程中遇到了更多的问题，或者上述解决方案没有成功，欢迎和我讨论。