M1芯片Mac搭建Flutter开发环境全攻略

Flutter是目前全世界最流行的一个跨平台的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

并且是Google的亲儿子，也对于混合开发非常友好，最重要的是，他是完全免费的，并且开源。

Flutter有什么优点呢？官方也很明确的表达了三个点:

1、快速开发；

2、富有表现力和灵活的UI；

3、原生性能。

首先，能够进行快速开发。得益于Flutter的热重载特性，修改任意代码后保存，模拟器上的应用会立即更新，做到几乎与前端发开一样的便捷高效，并且还不会丢失状态，什么意思呢，就是说，我们操作过的数据，滑动过的列表的位置，都不会重置，总之，非常高级就对了。

其次，灵活的UI搭建以及布局。Flutter已经内置了Material和iOS风格的widget，客户没有特别的要求的话，搭建一个框架出来也就分分钟的事，全部是widget进行排列组合。

并且，布局方面也比苹果的AutoLayout高级多了，直接拿来了前端的FlexBox布局，写代码的时候完全不用考虑去计算frame，也不用考虑多设备适配问题，非常的前卫。

最后，Flutter可以达到与原生应用几乎一样的性能，所以，最最影响用户体验的性能问题，我们也不用担心太多，常用的UI组件也都用widget封装好了，拿来即用。

而且，很多企业、很多项目，已经在使用Flutter了，甚至也有了不少纯Flutter开发的app，原因很简单，使用Flutter进行app开发可以给企业至少节省一半的成本，企业就不需要养着一群安卓开发和iOS开发。

只需要几个Flutter工程师，一套代码，就齐活了，时间成本、金钱成本、沟通成本，都节省了，并且Flutter他的性能是非常优秀的，使用也非常稳定，几乎不会造成莫名其妙的crash，容错率也大大增加了，而这些恰好都是企业最关心的痛点。

当前的移动端大环境越来越卷，跨平台也一直在挤兑移动端，对于我们iOS开发者来说，掌握一门跨平台技术是越来越迫在眉睫的事情了，不仅是对提升当前的薪资水平有帮助，而且也能给自己提供一个更大的发展空间，未来就有一个更多的可能性。

铺垫完了回到正题，这篇文章呢，主要记录我使用M1芯片的Mac Mini搭建Flutter开发环境的全过程，以及注意事项和坑点。

首先明确配置步骤：

1、Flutter环境配置；

2、IDE安装配置；

3、Java环境配置。

首先，去官网下载Flutter安装包，最新的稳定版即可：

然后就要使用命令了，打开终端之前，在终端的简介中勾选“使用Rosetta打开”，防止配置过程中出现某些莫名其妙的问题：

然后把国内的镜像加入到环境变量：

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

我的Flutter是安装在development目录下的：

cd ~/development

然后解压下载好的Flutter包到该目录下：

unzip ~/Downloads/flutter_macos_2.2.3-stable.zip

把flutter安装包里面的工具暂时添加到PATH里面：

export PATH=`pwd`/flutter/bin:$PATH

这样就完成了最基本的Flutter环境配置，接下来激动人心的时刻来了，就是首次执行Flutter命令：

flutter doctor

首次执行Flutter命令的时候，会自动下载依赖项并自行编译，当然你也可以不执行。

因为这句命令是用来检查Flutter配置的，仅仅是做到这一步肯定会有问题。这个时候我们再来配置完整的环境变量，执行：

vim ~/.zshrc

怎么用我就不多介绍了，如果不擅长的话，就直接open吧，然后添加如下内容：

保存并退出编辑，然后刷新一下，让我们的配置立即生效：

source ~/.zshrc

如果你是配在了$HOME/.bash_profile文件里面，也没有关系，在~/.zshrc里面添加source ~/.bash_profile就搞定，因为Mac系统版本在10.15之后shell默认是zsh，之前都是bash，如果你还是依然用的bash，那就配置在.bash_profile就行了。

然后进入下一个阶段，我们需要选一个IDE，一般来说，IntelliJ IDEA，Android Studio和VS Code三选一即可，当然你要显摆你的能力的话，用文本编辑器或者直接终端上vim一样可以做Flutter开发。

我选择的是Android Studio，原因很简单，Android Studio是基于IntelliJ IDEA的，而且集成了Android开发工具很方便开发调试，跟Flutter都是Google的亲儿子，兄弟之间，会更有默契。

安装好Android Studio之后，意味着Android SDK和自带的Java开发环境也装好了，然后还需要安装两个插件，Flutter插件和Dart插件，让Android Studio支持Flutter开发：

安装完成后重启Android Studio让插件生效，然后创建一个Flutter项目来测试一下可否正常运行及调试：

选择Flutter App，然后选择你的Flutter SDK路径，就是你的安装包解压路径：

填写你的项目名称，默认选中Android、iOS，然后点击Finish：

项目打开后，首先在右上角的工具栏里选择已经在运行的iOS模拟器（由于我做开发平时iOS模拟器从来不关，如果你不知道怎么单独打开模拟器就用Xcode跑个项目吧）：

然后control+R运行，一般很快就跑起来了，不会有任何问题：

然后我来试一下Android模拟器，如果设备下拉列表中没有Android Emulator选项，就点击最下面的Refresh，刷新一下，等待几秒钟一般就有了，或者也可以通过点击右上角的手机小图标来打开Android Virtual Device Manager列表，从列表中启动自带的模拟器：

启动好后，下拉列表中选中这个Android Emulator，control+R运行，虽然心情很激动，但是问题还是来了：

就三行错误描述，说明这个问题好解决，没有安装JRE，就是Java的运行环境，我去官网整一个：

安装好后，系统偏好设置.app面板中就能看到Java的图标了：

再来运行，不出所料，依然报错：

这个我就不翻译了，虽然比上个问题多了很多描述，但还是很好理解的，没有找到JDK，就是Java Development Kit。

这里先明确一下JDK和JRE的区别，如果只是要运行Java程序，安装JRE就可以了，如果是做开发的话，就安装JDK。

同时，JDK包含了JRE。我记得Android Studio是自带了JDK的，为什么找不到呢，打开Project Structure，Project SDK，选中default JDK，运行也并没有什么用：

对Java本来就不甚了解的我，表示到了拼运气环节，尝试了几种方式无果后，索性先来看一下Flutter配置还有什么问题：

就两个小问题了，第二个问题短一些，感觉比较好下手，意思是，找不到捆绑的Java版本，难道是需要配置环境变量吗？

于是，我照着网上各种JDK的环境变量配置方式操作了一遍（这里开始不要跟着我来操作了，请看到最后）：

vim ~/.zshrc

JAVA_HOME我试过了JRE、安装包里自带的，甚至gradle和android我都配置了，然而，并没有什么用，一样运行不起来，

那没关系，我姑且认为我姿势不对，找不到JDK我就再去oracle官网下载一个：

当然，Mac系统也是自带有JDK的，但是版本可能太低满足不了要求，我就没有去尝试了，安装好后找到安装的路径：

然后配置环境变量，替换如下内容：

保存后进行刷新，然后验证配置是否正确：

source ~/.zshrc
echo $JAVA_HOME

没问题的话再来查看Java版本，如果内容如下图，则配置成功：

安装JDK之前是这样的：

另外，还可以用Android Studio来安装JDK，如下图：

这就省事多了，各个版本都可以选，比官网上那种看不懂的列表更容易理解，配置好JDK后万事俱备，再来运行：

怎么问题描述越来越长了，也越来越看不懂了，真是一个头两个大，这个时候表示没什么耐心了，先来看看Flutter配置的第一个问题，提示也很清楚，按照提示执行一下：

flutter doctor --android-licenses

执行完了没报错，再来看看Flutter配置有没有问题：

竟！然！没有问题了！我再来运行，然鹅，错误依旧，这就有点超出我的能力范围了，最后一个办法，开始疯狂尝试，各种查资料，经历了九九八十一试之后，成功搞定：

怎么搞定的呢？其实是我想复杂了，直接找到Android Studio.app，然后右键显示包内容，找到jre文件夹，然后在文件夹里面新建一个jdk文件夹，把jre文件夹里面的Contents文件夹，直接拷贝一份到jdk文件夹里面去：

这是Android Studio自己的一个不友好的地方，也怪他把配置搞的太复杂，当然Java大佬可以指点我一下，我确实没有通过配置环境变量来搞定这个问题，甚至手动安装的JDK也派不上用场，我删掉了一样没有任何问题。

而且配置的环境变量最后我只留了Flutter的那三句，Java的全部不需要，当然，JAVA_HOME那句可以留着，否则执行flutter doctor过不了，但删掉也不影响跑安卓模拟器。

模拟器都正常运行和调试没问题之后，我来试一下iPhone真机运行，依然没有成功，不过已经见怪不怪了，提示：无法打开“iproxy”，因为无法验证开发者，这个问题可能是因为权限不够，执行这句命令就可以搞定：

sudo xattr -d com.apple.quarantine /Users/zions/development/flutter/bin/cache/artifacts/usbmuxd/iproxy

（滑动显示更多）

至此，就可以愉快的跟Flutter玩耍了。

就我的感受而言，整个过程还是挺折腾的，特别是对于纯iOS开发者来说，让我去搞这些知识体系之外的东西，遇到问题确实也只能碰碰运气，如果你身边正好有Java大佬的话，一定要去问一问。

可能会简单很多，也不会毫无头绪，不要像我一样喜欢自己埋头去钻（混的比较惨，身边没有Java朋友），到最后碰对了可能也不知其所以然，也不敢发表自己的看法，毕竟不是自己的专业领域，记录以共勉。

- END -

文章由作者：子松 逻辑iOS讲师提供