需要测试一个基于Flutter编写的项目,于是走上了搭建Flutter环境之旅,虽然不难,但是首次搭建还是挺繁琐的.因为某些原因,我们访问Flutter会有些网络麻烦,可以把Flutter的镜像更新为中国开发者专用的,打开终端输入如下命令:

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

去官网下载一份Flutter最新的SDK包:https://flutter.dev/docs/development/tools/sdk/releases#macos

解压到一个固定目录,比如 ~/development 下,注:~代表当前登录用户文件夹.解压后完整目录如 ~/development/flutter.

接下来把flutter的工具添加到系统path中,在终端中输入如下命令,注:该命令只针对当前终端窗口会话,再次打开终端窗口需要重新输入命令,文后会写如何永久添加到PATH中使用:

export PATH=~/development/flutter/bin:$PATH

在终端窗口运行以下 flutter doctor 命令查看当前安装是否完整,如有错误提示,根据提示逐一排查,如提示Git错误:

Error: The Flutter directory is not a clone of the GitHub project.
The flutter tool requires Git in order to operate properly;
to install Flutter, see the instructions at:
https://flutter.dev/get-started

遇到上面这个问题首先可以尝试重新下载Stable版本Flutter SDK配置,检查Flutter环境是否安装妥当命令为,它会自动补齐缺失的工具包:

flutter doctor

接下来安装cocoapods工具,它将自动补齐项目需要的Flutter插件.终端输入以下命令,如本机没有安装brew,则先安装brew(可能也要更换国内源https://www.jianshu.com/p/bea984d27cd2):

brew install  cocoapods

打开Xcode并确保Xcode可以正常使用,即Xcode许可协议等都确认通过.然后就可以到你的Flutter项目目录了,Flutter项目会包含ios子目录,在终端中使用如下命令打开Xcode workspace.

open ios/Runner.xcworkspace

在打开的Xcode中配置APP的签名,根据需要链接设备,如实体机则确认USB线缆链接到了iOS设备,如模拟器则 open -a Simulator 打开运行一个虚拟机,Flutter将根据当前连接的设备进行相应的编译,如没有连接实体机也没有开启模拟器,那么使用run命令将编译出H5版本.

上图这种状态(没有连接实体机)且没有运行任何模拟器,将不能自动编译出iOS APP,确认签名置好后再次回到终端窗口,输入如下命令让Flutter自动编译运行:

flutter run

可以在终端窗口中看到编译的进度,如项目文件缺失Flutter需要的插件则cocoapods会自动查找补齐,最终将在所设定的Target中部署运行,如下图:

当实体机有编译后的APP,遇到再次点击直接闪退,仅能在flutter run运行一次的时候,可以使用如下命令解决:

flutter run --release

上面提到对于PATH的设置只生效于当前终端会话,要永久生效可修改 .bash_profile 文件,终端输入:

$HOME/.bash_profile

填入下列三行

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=~/development/flutter/bin:$PATH

保存后终端中输入如下指令刷新终端窗口:

source $HOME/.bash_profile

终端中使用 echo $PATH 可以验证是否设置好了PATH,包含”flutter/bin”字样.如果我们使用了zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加: source ~/.bash_profile .

好了,今天就写到这里,回见!

参考资料:
https://flutter.dev/docs/get-started/install/macos
https://flutterchina.club/setup-macos/
https://www.jianshu.com/p/dc4caaaed36d