[Flutter]基于arm64架构的Flutter环境配置(Apple M1为例)
一、前言
硬件:MacBook Air 2021(Apple M1) 系统:macOS Monterey 12.4
SDK:Flutter 3.0.1(arm64)Dart 2.17.1
二、FVM
1. 简介
用来管理flutter sdk版本的,作用和nvm几乎一样
2. 安装及环境配置
- 前提需要安装Homebrew,然后在终端执行以下命令安装fvm
brew tap leoafarias/fvm
brew install fvm
# 执行以下命令,如果出现版本信息则说明安装完毕
fvm --version
- 安装并配置flutter sdk
# 此步骤是自定义flutter sdk安装的位置,不执行以下代码会安装到默认位置
fvm config --cache-path /Users/xxxx/xxxx
# 安装flutter 3.0.1(stable) & 2.10.5(stable)
fvm install 3.0.1
fvm install 2.10.5
# 配置fvm映射到环境变量中
vim ~/.bash_profile
export PATH=/Users/xxxx/fvm/default/bin:$PATH
# 扩展:在环境变量配置文件中添加以下命令,实现命令简写
alias f="fvm flutter"
alias d="fvm dart"
# 配置环境变量生效
source ~/.bash_profile 或者 source ~/.zshrc
# 配置全局版本
fvm global 3.0.1
- 执行命令
fvm flutter doctor
检测flutter运行环境,出现如下图所示的情况,说明配置完成
- 安装CocoaPods和Xcode,配置ios运行环境
-
安装第三方库依赖[CocoaPods](CocoaPods Guides - Getting Started)
sudo gem install cocoapods
安装完毕后再次执行
fvm flutter doctor
,出现如下图所示的情况说明CocoaPods安装成功
-
接下来在App Store中安装Xcode,然后依次执行以下代码(如果原先就用Xcode开发的,忽略这一步)
# 将Xcode命令行工具配置为使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch # 运行以下代码来签署Xcode许可协议 sudo xcodebuild -license
- 安装Android Studio并配置安卓开发环境
下载地址:Download Android Studio and SDK tools | Android Developers
选择 Mac(64-bit, ARM) 版本
-
安装后在启动界面
Plugins
界面安装Dart & Flutter
两个插件 -
导入自己flutter项目中的
android
文件夹,然后在工具栏:Tools->SDK Manager中按照下图所示安装相应的工具和sdk
-
在
.bash_profile
中配置sdk的相关环境变量,别忘了最后执行source ~/.bash_profile
# .bash_profile export ANDROID_HOME=/Users/errui/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/platform-tools export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools
-
回到Android Studio,执行
File->Sync Project with Gradle Files
安装grade工具此处安装时间过长,根据每个人的网速,安装完毕的时间不同,我装了半小时
-
打开Preferences,在
Languages & Frameworks -> Flutter -> Flutter SDK path
按照下图所示配置路径
-
在终端执行
fvm flutter doctor
,如果结果如下图所示,执行命令flutter doctor --android-licenses
重新执行命令fvm flutter doctor
,如果全部都显示[✔️],则表示安装完毕。
3. 在VS Code中配置开发环境
-
在VS Code扩展中安装
Dart,Flutter和Flutter Widget Snippets
-
在
.vscode/settings.json
中配置以下命令"dart.flutterSdkPath": ".fvm/flutter_sdk", // Remove .fvm files from search "search.exclude": { "**/.fvm": true }, // Remove from file watching "files.watcherExclude": { "**/.fvm": true }
4. 创建一个Flutter项目
# 创建一个新的flutter项目
fvm flutter create project_name
# 进入此目录
cd project_name
# 在项目根目录下执行以下命令,配置这个项目需要的flutter版本
fvm use 3.0.1
# 在.gitignore中添加以下命令
.fvm/flutter_sdk
5. 注意点
- 如果是在已配置flutter sdk的情况下转成用fvm管理,在使用
fvm use
会出现以下报错,在~/.bash_profile
中更改对应的path即可
三、在iOS上运行Flutter项目
1. iOS模拟器上运行
# 初始化ios模拟器
open -a Simulator
fvm flutter clean
fvm flutter pub get
fvm flutter run -d <deviceID>
下图中项目名已经用白色块遮盖,命令f是fvm flutter的简写
-
如果出现以下bug
# 执行以下命令以解决以上bug
sudo gem uninstall ffi && sudo gem install ffi -- --enable-libffi-alloc
# 再度执行以下命令,如果成功会在模拟器上显示项目
fvm flutter run -d <deviceID>
2. 在iPhone上运行
-
进入项目根目录,打开
ios/Runner.xcworkspace
-
接下来参考macOS install | Flutter第2点内容
四、在Android上运行Flutter项目
1. 在Android模拟器上运行
-
打开
Tools->Device Manager
,并点击Create device
-
选择你需要的虚拟机机型并点击下一步,最后设置完毕后点击
Finish
-
回到
Device Manager
界面会发现添加的虚拟机,点击运行即可
2. 在Android真机上运行
这里使用MIUI12系统作为演示,手机连上mac,并进入开发者模式,下图是我开发者选项的截图
如果在Android Studio
中看到如下图所示表示配置成功
最后
文章仅发布在CSDN平台和个人博客中,对本文技术点有疑问欢迎在评论区友好交流。