Install Flutter on Apple Silicon - 毛毛的踩坑人生

Table of Contents

前言

近兩年，Apple Silicon 的問世
一般消費者可能只是感覺到機器變快、變涼
但！！
對開發者來說，各種 x86 在 arm64 下的不相容
相信已經有很多開發者踩到很多坑
Install Flutter on Apple Silicon 也不例外
截至 2022.03.11 官方也還未完全支持，還是需要使用 Rosetta 2

這篇文章就告訴各位，從 0 開始安裝，到底哪裡需要特別注意

環境

CPU: M1 Pro
macOS: 12.2.1
Xcode: 13.2.1

註：
Xcode 為必須安裝
如果為全新安裝，記得先執行

sudo xcodebuild -license
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

開始 Install Flutter on Apple Silicon

前半段，基本上跟 x86 的機器是一模一樣的
後面會有針對 M1⬆️ 的特別操作

下載 SDK

方法一：

進入官網，直接下載
決定好 SDK 存放位置，這邊我習慣放在 ~/sdk_tools
解壓縮後，直接放在上述位置中
最終路經應該會是 ~/sdk_tools/flutter/.....

方法二：使用命令列

# 版本輸入 2.10.3
version=2.10.3

# 使用 curl 下載
curl -fSL https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_$version-stable.zip --output flutter.zip

# 創建資料夾
mkdir -p ~/sdk_tools

# 解壓縮
unzip -q flutter.zip -d ~/sdk_tools

# 刪除原始檔
rm flutter.zip

更新環境變數

如果是使用預設的 zsh，編輯 ~/.zshrc
如果是 bash，編輯 ~/.bashrc

# 在最後加入這一行
export PATH="$PATH:$HOME/sdk_tools/flutter/bin"

這個時候重開 terminal
flutter 就已經是可以使用的命令，但先別急，還沒安裝好～

iOS, iPadOS 設置

為了能夠部署到 iOS, iPadOS 裝置
這邊需要安裝 CocoaPods

sudo gem install cocoapods

安裝 Android Studio

這個步驟對於只要開發 iOS APP 的人來說，不是必要的
網路上也很很多教學怎麼不安裝 Android Sutdio，只安裝 Android SDK
但在我的情況下，那會導致 Android 模擬器解析度不正常
後來為了真正的跨平台，我還是妥協安裝了 Android Studio

我先假設大家使用 Flutter 都是為了開發跨平台的
所以 Android 模擬器得是正常的才行
這邊我們來安裝 Android Studio

方法一：官網直接下載並安裝
方法二：使用 Homebrew

brew install --cask android-studio

第一次啟動的設定，這邊就省略了

安裝 Android SDK Command-line Tools

啟動 Android Studio，進入 SDK Manager

進入 SDK Tools 的 Tab
勾選 Android SDK Command-line Tools (latest)
並點選 OK 安裝

跟著文章到這步之後
可以嘗試執行 flutter doctor -v
理論上來說會只剩下 android licence 需要確認
這時執行

flutter doctor --android-licenses

M1⬆️ 需要做的事情

安裝完前面之後
基本的開發，都沒有問題了
但如果用到一些套件，比如 Google Admob, Firebase…
就會看到類似以下的錯誤

LoadError - dlopen(/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.0/lib/ffi_c.bundle, 0x0009): missing compatible arch in /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.0/lib/ffi_c.bundle - /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.0/lib/ffi_c.bundle
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.0/lib/ffi.rb:6:in `rescue in <top (required)>'
/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.0/lib/ffi.rb:3:in `<top (required)>'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/Library/Ruby/Gems/2.6.0/gems/ethon-0.12.0/lib/ethon.rb:2:in `<top (required)>'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/Library/Ruby/Gems/2.6.0/gems/typhoeus-1.4.0/lib/typhoeus.rb:2:in `<top (required)>'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/sources_manager.rb:74:in `cdn_url?'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/sources_manager.rb:36:in `create_source_with_url'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/sources_manager.rb:21:in `find_or_create_source_with_url'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:178:in `block in sources'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:177:in `map'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:177:in `sources'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:1073:in `block in resolve_dependencies'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/user_interface.rb:64:in `section'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:1072:in `resolve_dependencies'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:124:in `analyze'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:414:in `analyze'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:239:in `block in resolve_dependencies'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/user_interface.rb:64:in `section'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:238:in `resolve_dependencies'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:160:in `install!'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command/install.rb:52:in `run'
/Library/Ruby/Gems/2.6.0/gems/claide-1.0.3/lib/claide/command.rb:334:in `run'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command.rb:52:in `run'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/bin/pod:55:in `<top (required)>'
/usr/local/bin/pod:23:in `load'
/usr/local/bin/pod:23:in `<main>'

這時就是 Apple Silicon 造成的
按照正常流程裝的 CocoaPods，安裝的版本是針對 Apple Silicon 重新編譯過的
但 Google 這邊引入的卻是 x86 版本
所以這時候我們只要安裝 x86 版本的套件就行

sudo arch -x86_64 gem install cocoapods
sudo arch -x86_64 gem install ffi

安裝過後，記得將環境清理一下
先 Clean，在 pub get

flutter clean
flutter pub get

再試試看部署到機器上，是不是可以了～

毛毛

可愛宅宅工程師、內容創作者
興趣是寫東東、寫東東跟寫東東。

Follow @Chindada Sponsor

前言

環境