Mac 安装配置 Flutter 开发环境

作者: CyJay | 来源:发表于2018-11-30 13:04 被阅读0次

团队准备开一个新项目，需要开发Android和IOS两种平台App,但是我们团队的技术人员却很紧缺。于是我们便想到了跨平台开发，就目前来看，要么是小程序，要么就是Cordova、Weev、React Native,还有就是近段时间很火的Flutter了。但是，这几个，我们都没用过（毕竟，像我们这种半路出家的码农，很多东西基本上只是懂点皮毛，更深的就，，，😌）为了推广方便，我们用户端使用小程序开发，由一个学弟负责开发。服务端（服务人员用的）用Flutter开发，我负责。别问我为什么用Flutter，我不会写网站，没他玩得溜，我有点Java基础，转站Dart应该比较容易(额，我也没底)。那么，开始今天的教程吧。

获取Flutter SDK 并安装

下载最新的安装包
从Flutter官网下载，跳转到下载页面。在中国大陆地区，要想正常下载安装包，可能需要科学上网，不过，我是直接访问的（似乎现在GFW对科技网站屏蔽没那么严了，大概是学术发展受重视了吧。）如果访问受阻，也可以试试去Flutter github项目下去下载安装包，跳转到下载页面。
下载的安装包解压到你安装的目录
我打算安装在/Users/Shared下

image
flutter为Flutter根目录，什么意思呢？我们cd进flutter看看：

image
懂了吧，现在我们回到上一级目录，及/Users/Shared下，执行以下命令，将Flutter加入环境变量
```
echo 'export PATH=/Users/Shared/flutter/bin:$PATH' >> ~/.bash_profile
echo 'export PUB_HOSTED_URL=https://pub.flutter-io.cn' >> ~/.bash_profile
echo 'export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn' >> ~/.bash_profile
source ~/.bash_profile
```
以上命令中，第一条把Flutter加入环境变量，2、3条是将Flutter镜像源设置成中国的服务器(由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了镜像源)。第四条就不多说了吧，使配置生效。

安装其它依赖项

环境检查
接下来执行:
```
flutter doctor
```
依赖安装
由于我下载的版本是前几天下载的，不是最新版，所以出现了下图的内容：

image
这个时候我们需要安装提示执行红框内的命令来更新Flutter，然后就等着它更新完成。更新完成后，我们再次执行flutter doctor检查环境并在终端窗口中显示报告。仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（需要执行的任务以粗体显示）
读者按照教程一直做可能会发现输出的内容和截图中不一样，比如没有图中 Android Studio (version 3.2)，IntelliJ IDEA Ultimate Edition (version 2018.3)等，不要惊慌。这是由于我安装了Android Studio 和 IntelliJ IDEA Ultimate Edition 而读者没安装，当然，你如果不用这两个软件去开发东西，自然也不需要安装。

image
例如：
```
[!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
 ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
   --android-licenses
```
我们需要执行提示中的flutter doctor --android-licenses来解决这个问题。
执行这个命令后，终端会多次询问，均输入Y然后回车便是,命令执行完成后，你再次执行flutter doctor便可发现刚刚那个问题已经解决了。

image
接下来，我们先把这几个问题解决掉，因为这几个解决起来很简单。

image
Android Studio (version 3.2)下的问题是因为我的Android Studio没有安装Flutter和Dart插件。我们打开Android Studio的插件中心安装Flutter和Dart插件便是，你先安装Flutter插件的话，它会提示你连同Dart插件一并安装
IntelliJ IDEA Ultimate Edition下的问题也是如此，在插件中心安装这两个插件便是。
Connected device这个不管它，就是因为你没连接手机设备而已。开发软件，调试时连接就是了。
重点我们讲讲这一部分

image
我安装了Xcode,所以也需要解决一下：
```
✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
   Download at: https://developer.apple.com/xcode/download/
   Or install Xcode via the App Store.
   Once installed, run:
     sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
```
这段很好解决，按照提示执行sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer然后输入root密码便可。
从提示可以看出，iOS toolchain - develop for iOS devices 中后面这个3个叉都需要brew来安装东西。才能解决。如果你的电脑没安装brew的话，请前往这里根据文章安装brew。安装完成brew后，先根据提示把后面两个小问题解决了。

image
在解决这个问题时
```
✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
```
先按照提示安装，在执行brew install --HEAD libimobiledevice后，它会先安装好几个libimobiledevice需要的依赖，然后才安装libimobiledevice，如果运气(网络)不好，可能会出现这个问题，一直卡在下图的位置。

image
这时，我们按Ctrl+C停止安装。然后执行：
```
git clone https://github.com/libimobiledevice/libimobiledevice.git ~/Library/Caches/Homebrew/libimobiledevice--git
```
等待git克隆项目完成。
然后执行 cd ~/Library/Caches/Homebrew/libimobiledevice--git挂载到libimobiledevice--git下
依次执行：
```
./autogen.sh
./configure --disable-silent-rules --prefix=/usr/local/Cellar/libimobiledevice/HEAD-92c5462_3 --without-cython --enable-debug-code
make install
brew link libimobiledevice
brew install ideviceinstaller
```
至于第二行中的HEAD-92c5462_3是怎么得来的。。请看这里，可能打开很慢。

image
这个命名是符合brew安装的规范的。
一系列骚操作完成后，再次执行flutter doctor瞧瞧：

image
啊，好爽，强迫症的我终于满足了。
好了，Flutter 环境搭建基本Ok了。
睡觉觉😝