M1 芯片 Mac 配置 Flutter 开发环境

Posted 程序员大咖

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了M1 芯片 Mac 配置 Flutter 开发环境相关的知识，希望对你有一定的参考价值。

👇👇关注后回复 “进群” ，拉你进程序员交流群👇👇

1. 配置ios开发环境

（1）下载并安装Xcode

直接在AppStore上搜索并下载最新版本的Xcode。

（2）安装Cocoapods

因为mac m1笔记本都会自带可用的ruby版本,也就是不需要你去升级ruby,因为升级它还要装homebrew,你装这个又会遇到一些坑,所以能用系统自带的就用它.

查看ruby版本 ：ruby -v

然后查看sources ：gem sources

如果是 rubygems.org/[1] 那就移除替换新的：

gem sources --remove https://rubygems.org/ 
gem sources -a https://gems.ruby-china.com/

再验证下就会发现变成了 gems.ruby-china.com/[2]

然后更新最新的cocoapods,使用如下命令：

sudo gem install cocoapods -n /usr/local/bin

输入密码,更新成功,然后使用如下命令下载仓库

cd git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git ~/.cocoapods/repos/trunk

如果比较慢可以换成如下命令

cd git clone https://gitee.com/mirrors/CocoaPods-Specs.git ~/.cocoapods/repos/trunk

但因为m1芯片与ruby不兼容，所以使用pod search AFN会报错。这时你找到你的命令行应用程序（默认的终端，或者我用的iTerm），右键应用->显示简介，找到有个选项"使用Rosetta打开”，勾选它。然后重启终端后执行：

sudo gem install ffi

然后你再去执行pod命令 pod search AFN就成功了。

（3）安装Homebrew

1.直接执行如下命令：

/bin/bash -c "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install.sh)"

2.设置环境变量，具体操作步骤如下，一定要仔细阅读。

从macOS Catalina(10.15.x) 版开始，Mac使用zsh作为默认Shell，使用.zprofile，所以对应命令：

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile eval "$(/opt/homebrew/bin/brew shellenv)"

如果是macOS Mojave 及更低版本，并且没有自己配置过zsh，使用.bash_profile：

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.bash_profile eval "$(/opt/homebrew/bin/brew shellenv)"

2. 配置android开发环境

（1）下载JDK

即需要安装JAVA环境。

1. 检查是否已安装Java环境：

  • 显示JDK版本：java-version

  • 显示系统默认jdk版本路径：/usr/libexec/java_home

  • 显示系统中所有jdk版本路径：/usr/libexec/java_home -V

  • 显示系统中配置的JAVA_HOME值：echo $JAVA_HOME

如果能正常打印JDK版本和路径，那么说明系统是已经有JAVA环境了的。此时需要判断版本号是否满足条件再进行操作（这儿不详细展开）。

2.下载（或更新）JDK：

M1芯片的Mac到这里下载jdk：www.azul.com/downloads/?…[3]

在页面内筛选找到对应MacOS、ARM版本的jdk版本，选择想要的版本号进行下载。这里推荐给新手最常用的Java8版本。

建议直接选择.dmg格式的进行下载安装，安装程序会直接安装到默认目录下。

3.配置环境变量：

Mac上有4种配置环境变量的地方：

./etc/profile
 ./etc/bashrc
 .~/.bash_profile
 .~/.zshrc

具体区别可以看这个链接：www.cnblogs.com/mingaixin/p…[4]

一般情况下，我们都配置在zsh（即第4个）文件下。

在终端输入：

echo JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_291.jdk/Contents/Home >> ~/.zshrc

即可以将这行配置添加到~/.zshrc文件内（如果这个文件没有，会自动创建）。

PS：其中jdk1.8.0_291.jdk是你安装的这个版本的JDK，具体叫什么你可以通过这条命令查到（即上述所说的“显示系统默认jdk版本路径”的命令）：/usr/libexec/java_home

这个文件也可以直接在用户目录的根目录下查看到：

你可以直接通过文本打开这个文件，手动添加配置到这个文件中，然后保存。文件内容大致如下：

保存后再执行命令让环境变量生效：source ~/.zshrc

这样JDK就配置完成了。

（2）下载并安装Android Studio

直接进入Android开发者网站的下载页面：developer.android.google.cn/studio#down…[5]

因为是M1芯片，采用ARM架构，所以不能直接使用首页推荐的下载包（其实可能是正确的，但为了避免不出错，按照下面的来）。选择如下所示的Download Options按钮：

然后选择列表下的Mac（64-bit, ARM）版本的下载：

如果弹出的网页显示“无法正常运作”，无法下载zip，可能是你梯子的问题（我是这样）。你可以把这个链接拷贝下来，通过其他软件（比如迅雷）新建任务进行下载：

安装完毕后，直接运行就打开了

如果从google下载sdk要设置vpn代理，下载sdk需要翻墙，那这里就可以设置代理，如果用国内源下载就不需要设置代理，直接cancel进入下一步，中间有个需要选择jdk的步骤，选择自己安装的jdk，因为android studio自带了jdk，它默认选的是自带的。finish以后，选择sdk manager，如下图：

这里可以选择兼容的安卓版本（我这里下载的是最新版本的，自己可以根据具体业务选择）：

这边是开发相关的工具（我下载了截图里的这些，我忘记了哪些是默认的了）：

上图中框出的位置就是安卓SDK的安装目录，如果后续一些工具通过命令行使用不了，可以在这个目录下找到对应的文件去执行。

之后需要配置Android的环境变量。同样是.zshrc文件内，补充以下配置到文件中（已有的配置不用覆盖）：

JAVA_HOME=/Library/Java/JavaVirtualMachines/你下载的JAVA版本.jdk/Contents/Home
CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
ANDROID_HOME=/Users/你的用户名称/Library/Android/sdk
PATH=.$JAVA_HOME/bin:$PATH:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$ANDROID_HOME/build-tools/31.0.0
export JAVA_HOME
export CLASSPATH
export ANDROID_HOME
export PATH

PS：注意上文中的中文要修改为你自己的内容。不要直接拷贝就不管了。其中第4行的31.0.0是你下载的Android版本号。

保存，关闭文档，终端命令行输入：source ～/.zshrc

然后终端输入：adb

显示出adb命令的选项说明就成功了，没有成功的，确认一下安装路径。

（3）安装adb（安卓调试工具）

这里我忘记adb是不是下载Android Studio后默认就支持了。如果没有，则通过以下命令安装：

brew cask install android-platform-tools

可以测试adb是否正常：

adb devices

3.配置Flutter开发环境

（1）下载Flutter SDK

其实最好的就是按照Flutter中文网（官网）的教程一步一步安装：flutterchina.club/get-started…[6]

以下我简化以下步骤，把步骤中关键的点说一下。

1.配置环境变量（包括官网介绍的永久配置PATH）

在用户目录下有个.bash_profile的文件（没有则创建一个），用文本打开并填入以下信息：

[[ -s "$HOME/.profile" ]] && source "$HOME/.profile" # Load the default .profile
[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # Load RVM into a shell session *as a function*
export PUB_HOSTED_URL=https://pub.flutter-io.cn # 国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn # 国内用户需要设置
export PATH=/Users/你的用户名称/flutter/bin:$PATH
export JAVA_HOME=/Library/Java/JavaVirtualMachines/你下载的JAVA版本.jdk/Contents/Home

其中3-5行是配置flutter的国内镜像（下载更快），第6行是配置JDK。

保存后应用配置：source $HOME/.bash_profile

2.下载并配置Flutter SDK

直接去官网下载（可能需要全局VPN）：flutter.dev/docs/develo…[7]

建议选择macOS加的Stable版本（稳定版本）：

下载并解压后，将文件夹移动到用户目录下（不建议电脑内保存2套以上版本的Flutter SDK，容易出现一些意想不到的错误）。

添加flutter相关工具到path中：export PATH=pwd/flutter/bin:$PATH

注意：如果使用zsh，终端启动时 ~/.bash_profile 将不会被加载，所以需要修改 ~/.zshrc ,在其中添加：

source ~/.bash_profile

运行以下命令查看是否需要安装其它依赖项来完成安装：

flutter doctor

检查通过后如下所示（以下截图不代表你的真实截图）：

如果Flutter项目是[ √ ]状态，说明Flutter配置成功。

一般环境配置问题在flutter doctor检查之后，会有明确的错误提示和解决办法，可以按照相关提示命令进行解决（一些具体问题会在接下来的篇章讨论）。

4.安装VSCode（可选）

VSCode作为轻量级编译器，兼容flutter开发。可以直接编译运行到安卓和iOS两套系统上。

直接去微软官网下载并安装即可：https://code.visualstudio.com/

建议注册一个outlook邮箱，登录到vscode里。因为vscode开发Flutter需要下载各种组件，如果你的账号在其他电脑上下载过这些组件了，就可以直接同步到你现在使用的电脑上。以下推荐一些必须和常用的Flutter开发组件。

● Dart（必须）

VS Code 对 dart 语言的支持，初次打开会提示安装，选择安装即可。

● Flutter（必须）

运行 Flutter 项目必须，和 dart 一样，初次用 VS Code 打开 Flutter 项目会提示安装，选安装即可。

● Flutter Widget Snippets

插件提供 Widget 代码片段。

● Awesome Flutter Snippets

提供常用函数的代码片段。例如创建一个 Stateful App，只需要输入 fstful，即可快速创建。

● Flutter tree

通过简单的语法，自动快速构建 widget 树，有点像前端 Emmet。

● Pubspec Assist

在 pubspec.yaml 文件下快速搜索、添加需要安装项目所需要的依赖，不必打开浏览器去获取插件和插件版本信息。

操作如下所示：

至此，整套Flutter环境配置就搭建完成了。

参考资料

[1]

rubygems.org/: https://rubygems.org/

[2]

gems.ruby-china.com/: https://gems.ruby-china.com/

[3]

www.azul.com/downloads/?…: https://www.azul.com/downloads/?package=jdk

[4]

www.cnblogs.com/mingaixin/p…: https://www.cnblogs.com/mingaixin/p/6281795.html

[5]

developer.android.google.cn/studio#down…: https://developer.android.google.cn/studio#downloads

[6]

flutterchina.club/get-started…: https://flutterchina.club/get-started/install/

[7]

flutter.dev/docs/develo…: https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

[8]

blog.csdn.net/youxianzide…: https://blog.csdn.net/youxianzide/article/details/117513123

[9]

blog.csdn.net/youxianzide…: https://blog.csdn.net/youxianzide/article/details/117606657

[10]

www.jianshu.com/p/79bbefbae…: https://www.jianshu.com/p/79bbefbaee49

[11]

zhuanlan.zhihu.com/p/341831809: https://zhuanlan.zhihu.com/p/341831809

[12]

www.jianshu.com/p/66eefaaad…: https://www.jianshu.com/p/66eefaaada7a

作者：Ztfiso

https://juejin.cn/post/7051921108957659166

-End-

最近有一些小伙伴，让我帮忙找一些 面试题 资料，于是我翻遍了收藏的 5T 资料后，汇总整理出来，可以说是程序员面试必备！所有资料都整理到网盘了，欢迎下载！

点击👆卡片，关注后回复【面试题】即可获取

在看点这里好文分享给更多人↓↓

以上是关于M1 芯片 Mac 配置 Flutter 开发环境的主要内容，如果未能解决你的问题，请参考以下文章

Mac M1安装php开发环境

M1芯片Mac搭建前端开发环境

Mac M1开发环境的安装与配置(Maven)

Mac M1开发环境的安装与配置(VSCode)

Mac环境下的flutter配置及安装

M1 上的 Flutter：GoogleMapsBase 和 Flutter.h 从 Windows 移至 mac 后未发现错误