🥳

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

2020/12/16に公開
1

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

以下2020/12/16時点の情報ですが、2021/01/04,2021/3/19に追記しています。
今ではAndroid Emulatorはある程度動かせるようになっています。

公式

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を落として任意のディレクトリにいれます。

vim .zshrc

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

i でinsertモードに入って

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

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

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

which flutter

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

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

flutter doctor

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

XcodeをInstall

XcodeをApp Storeから落としてきてインストールします。
https://apps.apple.com/jp/app/xcode/id497799835

cocoapodsのInstall

arch -x86_64 sudo gem install ffi

上記コマンドで cocoapods インストール時のffiのエラーが回避できるようなので入力します。
https://github.com/flutter/flutter/issues/70796

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

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)でも認識されました。

おまけ 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

Discussion