M1 MacにFlutterをセットアップする

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/binPATH に通します。

export PATH=~/Documents/src/flutter/bin:$PATH

GateKeeper 関連の設定

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 cocoapods

Chromeのセットアップ (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!」と表示されます。

投稿者プロフィール

林 晃
林 晃macOS/iOSアプリ/SDK/ミドルウェア開発が専門の開発者
アールケー開発代表。macOS/iOSアプリ/SDK/ミドルウェア開発が専門の開発者。ObjC/Swift/C++使い。豊富な開発実務経験を基に、教育コンテンツ開発、技術書執筆、技術指導、技術セミナー講師、企業内研修講師、行政・自治体職員研修講師も行います。

基礎から学ぶMetal


「基礎から学ぶMetal」を執筆しました。本書はMetalを使ってGPUプログラミングを行うための最初のステップを解説するMetalの解説書です。

私が初めてGPUプログラミングを行ったとき、どこから手をつけて、学んでいけば良いのか分からず呆然としました。もし、あのとき、これを教えてくれればという部分を解説しました。本書で解説している部分はMetalの基礎となる部分で、Metalを使うときに必ず触れることになる部分です。

詳細

基礎から学ぶSwiftUI


「基礎から学ぶ SwiftUI」というタイトルの本を執筆しました。

SwiftUIの入門書です。

SwiftUIのコンセプトは「ユーザーインターフェイスを作るための最短パスを提供する」「一度学べば(Appleのプラットフォームの)どこにでも適用できる」です。

SwiftUIの概要から始まって、一つ一つのテクノロジートピックに注目しながらSwiftUIとは何か?どんなことができるのか?どのようなコードを書けば良いのかなどを丸々一冊使って解説しています。

詳細

関連記事

  1. M1 Mac への JDK のセットアップ

  2. M1 MacへのAndroid Studioのセットアップ

最近の著書

  1. 基礎から学ぶ SwiftUI

最近の記事