M1芯片Mac配置Flutter开发环境

19,012 阅读6分钟

1. 配置iOS开发环境

(1)下载并安装Xcode

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

(2)安装Cocoapods

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

查看ruby版本 :ruby -v

然后查看sources :gem sources

如果是 rubygems.org/ 那就移除替换新的:

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

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

然后更新最新的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环境了的。此时需要判断版本号是否满足条件再进行操作(这儿不详细展开);而如果如下所示,说明系统不存在JAVA环境,可以继续进行安装:

2.下载(或更新)JDK:

M1芯片的Mac到这里下载jdk:www.azul.com/downloads/?…

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

25F11C38-2721-4DC8-8702-E41AE1C6FAC1.png

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

3.配置环境变量:

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

./etc/profile

./etc/bashrc

.~/.bash_profile

.~/.zshrc

具体区别可以看这个链接:www.cnblogs.com/mingaixin/p…

一般情况下,我们都配置在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

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

6643FB51-A656-4A5A-AE28-619160C5BDFB.png

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

C28EA4CD-61D7-4679-B12E-F8A49EA5B6FD.png

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

这样JDK就配置完成了。

(2)下载并安装Android Studio

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

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

64D3E7AB-37B6-4465-A870-4343BEEA0C63.png

然后选择列表下的Mac(64-bit, ARM)版本的下载:

33C4ACAC-CDE3-4136-A28B-2F86BB4A9570.png

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

9996861D-0686-46D7-8079-8CF693F65AD7.png

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

image.png

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

image.png

这里可以选择兼容的安卓版本(我这里下载的是最新版本的,自己可以根据具体业务选择):

6264FEB4-AC8D-4E93-8EEF-F52E06E4E73B.png

这边是开发相关的工具(我下载了截图里的这些,我忘记了哪些是默认的了):

6E078CB0-3298-4945-BB5C-57899710CBED.png

上图中框出的位置就是安卓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…

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

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…

建议选择macOS加的Stable版本(稳定版本):

DC867F47-67D7-42E3-BD14-29430A57E433.png

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

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

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

source ~/.bash_profile

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

flutter doctor

检查通过后如下所示(以下截图不代表你的真实截图):

FD5319BA-4D62-429B-8806-C8241C5637BE.png

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

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

4.安装VSCode(可选)

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

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

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

● Dart(必须)

79DA3C86-7EDB-41E4-8D4C-90C0399D5246.png

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

● Flutter(必须)

0AACA264-9725-46AD-BF8D-FC31706EE9B1.png

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

● Flutter Widget Snippets

6962242E-20A7-4C69-A64C-592DAED92D30.png

插件提供 Widget 代码片段。

● Awesome Flutter Snippets

CDAD8A91-172E-4CD8-B3D1-3300F684B65F.png

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

● Flutter tree

F07464D5-075B-4571-8C38-AB6787251802.png

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

7E05BBB1-9FD1-489C-9743-C48CC61CC858.gif

● Pubspec Assist

13E90C28-A9C9-462A-BDDE-0F620E5E55B6.png

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

操作如下所示:

4CDD8EE8-EF94-4140-99AA-0F5C680DA365.gif

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

参考资料:

【1】macOS下配置JDK环境变量:blog.csdn.net/youxianzide…

【2】M1芯片macOS下配置Android SDK:blog.csdn.net/youxianzide…

【3】Mac Flutter 环境安装:www.jianshu.com/p/79bbefbae…

【4】M1芯片Mac上Homebrew安装教程 :zhuanlan.zhihu.com/p/341831809

【5】新的mac M1芯片安装cocoapods :www.jianshu.com/p/66eefaaad…