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版本。

outside_default.png

建议直接选择.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

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

outside_default.png

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

outside_default.png

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

这样JDK就配置完成了。

(2)下载并安装Android Studio

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

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

outside_default.png

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

outside_default.png

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

outside_default.png

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

outside_default.png

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

outside_default.png

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

outside_default.png

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

outside_default.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…[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版本(稳定版本):

outside_default.png

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

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

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

source ~/.bash_profile

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

flutter doctor

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

outside_default.png

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

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

4.安装VSCode(可选)

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

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

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

● Dart(必须)

outside_default.png

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

● Flutter(必须)

outside_default.png

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

● Flutter Widget Snippets

outside_default.png

插件提供 Widget 代码片段。

● Awesome Flutter Snippets

outside_default.png

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

● Flutter tree

outside_default.png

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

cb422d830e513ca38439cd0c025f0b3a.gif

● Pubspec Assist

outside_default.png

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

操作如下所示:

6d4dff801c0d756fc5e4ca458035d3d3.gif

至此,整套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 资料后,汇总整理出来,可以说是程序员面试必备!所有资料都整理到网盘了,欢迎下载!

01ad9b25aac8ac768e158e8b2faa0fe6.png

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

在看点这里358d9245783770b18b25c8041ee51036.gif好文分享给更多人↓↓

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值