FlutterをM1 Mac上で使おうとすると、少し前までは色々動かないという状況だったようですが、アップデートが進み、問題が少なくなったようです。
そこで、私もMacBook Pro 2020 M1にFlutterをセットアップすることにしました。この記事では行った操作などをまとめています。
ダウンロードと配置
FlutterのStableコード一式を公式サイトからダウンロードします。この記事を執筆している時点での最新バージョンは2.0.4です。
Flutter – Beautiful native apps in record time
ダウンロードしたアーカイブを展開すると flutter というフォルダが一つ作られるので、これを任意の場所に配置します。私は、~/Documents/src/ 下に色々置いているので、 ~/Documents/src/flutter となるように配置しました。
環境変数の設定
環境変数を設定します。 ~/.zshrc ファイルに以下のように書いて、 ~/Documents/src/flutter/bin を PATH に通します。
export PATH=~/Documents/src/flutter/bin:$PATHGateKeeper 関連の設定
Flutterの診断機能を使って必要なものを洗い出します。
$ flutter doctorすると、次のようなエラーメッセージが表示されました。
“dart”は、開発元を検証できないため開けません。
GateKeeperのチェックに引っかかってしまいました。ベストな方法は、開発元がコードサイニングと公証を行ったバイナリを配布することですが、それを待っているわけにも行かないので、個別に許可します。
次のように操作します。
(1) 「キャンセル」ボタンをクリックして、エラーアラートを閉じます。
(2) アップルメニューから「システム環境設定」を選択します。
(3) 「セキュリティとプライバシー」を開き、「一般」タブを表示します。
(4) 「”dart”は開発元を確認できないため、使用がブロックされました。」というメッセージと「このまま許可」というボタンが表示されるので、「このまま許可」ボタンをクリックします。
この手順で dart が実行できるようになったので、もう一度 flutter doctor を実行します。
$ flutter doctorまた、確認ダイアログが表示されますが、今回は「開く」ボタンがあるので、「開く」ボタンをクリックします。
しばらく待っていると、今度は gen_snapshot が同様のエラーアラートが表示されます。「キャンセル」ボタンを押して、flutter doctor が完了するのを待ちます。 dart と同様に操作して、 gen_snapshot を許可して、flutter doctor を再実行します。
面倒ですが、エラーダイアログが表示されなくなるまで繰り返します。
診断結果を確認する
私の環境だと、Xcodeはインストールされていますが、それ以外はインストールされていない環境です。（この記事のために、その状態を作りました）
flutter doctor の結果は次のようになりました。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.
[✓] Flutter (Channel stable, 2.0.4, on macOS 11.2.3 20D91 darwin-arm, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
✗ Could not determine java version
[!] Xcode - develop for iOS and macOS
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)
[!] Connected device
! Error: iPhone XS is not connected. Xcode will continue when iPhone XS is connected. (code -13)
! Error: iPadPro is not connected. Xcode will continue when iPadPro is connected. (code -13)
! Doctor found issues in 5 categories.診断結果への対応
この診断結果を見ながら、一つずつセットアップしていきます。長くなるので、いくつかは別記事に分けます。
Xcodeのセットアップ (2021年4月8日追加)
ターミナルからXcodeを使うときには、少し追加設定が必要です。次のように操作します。
(1) xcode-selectでXcodeのパスを設定します。
$ sudo xcode-select -s /Applications/Xcode.app正確には、/Applications/Xcode.app/Contents/Developerのように、Xcode内部のパスが必要なのですが、xcode-selectのマニュアルに以下の様に書かれており、省略してもxcode-selectが自分で推測してくれます。
xcode-select –switch /Applications/Xcode.app
As above, selects /Applications/Xcode.app/Contents/Developer as the
active developer directory. The Developer content directory is auto-
matically inferred by xcode-select.
man xcode-select より引用 (2) Xcodeの使用許諾に同意する
$ sudo xcodebuild -runFirstLaunch(3) SDKの使用許諾に同意する
$ sudo xcodebuild -license(4) Xcodeを起動して、Apple Developer Programの証明書などを設定する。
CocoaPodsのセットアップ (2021年4月8日追加)
FlutterはCocoaPodsを使っているので、CocoaPodsをセットアップする必要があります。次のようにします。
$ sudo gem install cocoapodsChromeのセットアップ (2021年4月8日追加)
FlutterはWebアプリも出力できます。そのときにChromeが使われるので、Chromeをセットアップします。特別な設定は必要なく、普通にChromeをダウンロードしてインストールするだけです。
Google Chrome – Google の高速で安全なブラウザをダウンロード
JDKのセットアップ (2021年4月6日追加)
Android Studioのセットアップ (2021年4月7日追加)
対応が完了したら診断を行います。
$ flutter doctor
[✓] Flutter (Channel stable, 2.0.4, on macOS 11.2.3 20D91 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] Connected device (1 available)
! Error: iPadPro is not connected. Xcode will continue when iPadPro is connected. (code -13)
! Error: iPhone XS is not connected. Xcode will continue when iPhone XS is connected. (code -13)
• No issues found!すべて対応が完了すると「No issues found!」と表示されます。
GateKeeperのメッセージ表示されなくなりました (2021年9月11日追加)
Flutter 2.5で試してみると、flutter doctor を実行したときに表示されていた GateKeeper の警告は表示されなくなりました。対応したようです。
アップグレード方法
インストール済みのFlutterをアップグレードする方法は次の記事をご覧ください。
