[Flutter]基于arm64架构的Flutter环境配置

[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. 安装及环境配置

1. 前提需要安装Homebrew，然后在终端执行以下命令安装fvm

brew tap leoafarias/fvm
brew install fvm

# 执行以下命令，如果出现版本信息则说明安装完毕
fvm --version

2. 安装并配置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

3. 执行命令fvm flutter doctor检测flutter运行环境，出现如下图所示的情况，说明配置完成

4. 安装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
  

5. 安装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中配置开发环境

1. 在VS Code扩展中安装Dart,Flutter和Flutter Widget Snippets

2. 在.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平台和个人博客中，对本文技术点有疑问欢迎在评论区友好交流。