Flutter環境構築 Mac M1 (Apple Silicon) 版

4 min read読了の目安(約4100字 1

MacBook Air 13inch(M1)にFlutterをインストールしたときの備忘録になります。
現時点ではAndroid Emulatorが動かない以外は普通にインストールできるという情報は事前に得ていたものの、日本語でまとまった情報はあまりなさそうだったため途中詰まりそうなポイントをまとめました。

以下2020/12/16時点の情報ですが、2021/01/04,2021/3/19に追記しています

公式

https://flutter.dev/docs/get-started/install/macos

Developing with Flutter on Apple Silicon

https://github.com/flutter/flutter/wiki/Developing-with-Flutter-on-Apple-Silicon

Terminal

git clone https://github.com/flutter/flutter.git

git clone やzipなどでFlutter SDKを落として任意のディレクトリにいれます。

この記事内では /Users/hndr/workspace/flutter/

stable版で問題ないみたいですがM1対応されているのは 1.22.4以上とのことです。

vim .zshrc

PATHを通すためにVimで編集します。

i でinsertモードに入って

export PATH="$PATH:/Users/hndr/workspace/flutter/bin"

SDKを置いたディレクトリのパスを書きます。

/Users/hndr/workspace/ の部分はダウンロードしてきたSDKを置いたディレクトリになります

esc キーで編集モードを抜け :wq で保存してvimから出ます。

which flutter

でPATHが通っているのを確認できたらOK

flutter コマンドが使えるようになったので

flutter doctor

と入力します。コマンドが無事通り現在の状況が確認できればOKです。

この時点ではXcode, Android Studioなどを入れていないのでパスしてないものが殆どです。

XcodeをInstall

XcodeをApp Storeから落としてきてインストールします。

https://apps.apple.com/jp/app/xcode/id497799835

cocoapodsのInstall

arch -x86_64 sudo gem install ffi

上記コマンドで cocoapods インストール時のffiのエラーが回避できるようなので入力します。

sudo gem install cocoapods

私の環境では何事もなく無事完了しました。

Android StudioをInstall

順調にいきますが最後にHAXMがインストールできないというエラーが出ます。
そのため現時点ではAndroid Emulatorは動きません。

Finishを押してインストール完了。
Android Studioを起動して Preferences > Plugins からFlutterプラグインをインストールします。

再びTerminal

flutter doctor

コマンドを打つとまだいくつかパスしてないものがあると思います。

画面の指示通りに以下を入力します

flutter doctor --android-licenses

ライセンスに同意するため y を7回程押して全て同意します。

flutter doctor

再度コマンドを打って確認します。

入れたはずのAndroid StudioのFlutterプラグインが❌になっていました。
これはM1 Mac以外でも出ている事象で下記Issueに対処方法が載っています。

https://github.com/flutter/flutter/issues/67986#issuecomment-715118389
ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1

flutter doctor側から見えてないだけで実際には使えるようですが、上記コマンドでシンボリックリンク作ることでエラーが消えます。(放置していてもおそらく問題ないはず)
flutter doctor は ALL Greenになります。💯

お疲れさまでした 🙌

2021/3/19 追記 Android EmulatorをInstall

Android Emulator preview版の更新が止まり、AVD Managerからダウンロードできるようになったようです
対応状況の詳細がよくわかってないですが、動かすまでをスクラップ記事にしました。

https://zenn.dev/hndr/scraps/cd131d010421b4

AVD Managerからダウンロードできるようになったため、以下のpreview版の更新は止まっています。

2021/01/04追記 Android Emulator previewをInstall

https://androidstudio.googleblog.com/2020/12/android-emulator-apple-silicon-preview.html
https://github.com/741g/android-emulator-m1-preview/releases/
2020/12/4 にプレビュー版が出ており、Youtube動画を参考に preview version2をInstallしてみました。
https://youtu.be/YjUCXGGJu7E


android-emulator-m1-preview.dmg をダウンロードして Android Emulator.app をアプリケーションディレクトリ配下に配置します。


Android Emulator.app 起動時にAlertが出ますのでキャンセルを押し、

システム環境設定 > セキュリティとプライバシー項目 に移動、ロックを解除して実行許可を与えて下さい。


Android Emulator起動後VS Code(Insider)でも認識されました。

preview版の起動までの確認で細かい動作確認は未検証です。

おまけ VS Code Insider版

https://code.visualstudio.com/insiders/
ARM64 のアイコンをクリックでInsider版を入れるとRosetta2で変換されないバージョンをInstallできます。

2021/3/19追記

VSCode v1.54 からStable版でもM1対応されました🙌

https://code.visualstudio.com/updates/v1_54

参考にさせていただいた記事など

インストール作業をするにあたり以下の記事を参考にさせていただきました。
ありがとうございました!

https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc

https://zenn.dev/ioridev/articles/c74af379e4e73151790d

https://zenn.dev/myb/articles/4b1dd3821703aa2ac95b

https://qiita.com/shibukawa/items/797b7cbb7e530842e6f7

この記事に贈られたバッジ