Flutter環境をM1 MacBook Pro 2022に構築してみた

このたびMacBook Pro 16インチ M1チップを入手したので、Flutter環境構築したときのログを残しておこうと思います。

Contents

環境の前提
環境構築の手順
環境構築

環境の前提

MacBook Pro 16インチ（2021）M1 Pro メモリ32GB ストレージ512GB

環境構築の手順

公式に則って環境構築をすすめていきます。

環境構築

では実際に構築をすすめていきます。

Flutter SDKのインストール

公式サイトから最新の安定版Flutter SDKをダウンロードします。

ダウンロードできたら任意のディレクトに置きます（私の場合はホーム直下にdevelopmentフォルダを作成し、その下に保存しました）

ターミナルを開いて、developmentフォルダに移動し、Flutter SDKファイルを展開（Unzip）します。

※インストール時点のバージョンは3.0.4でした

cd ~/development
unzip ~/Downloads/flutter_macos_arm64_3.0.4-stable.zip

Flutter SDKへのパスを一時的（ターミナルのセッション中のみ）に通します。これで任意のディレクトリでFlutter関連のコマンドが打てるようになります。

export PATH="$PATH:`pwd`/flutter/bin"

永続的（次回以降ターミナルを開いたときにも使えるよう）にパスを通すためには次の処理を実行します。

docs.flutter.dev

外部リンク

macOS install

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

How to install on macOS.

#update-your-path"]

M1 MacBook Proの標準のままだとZ shellを使っているのではないかと思うので、

ターミナルを開く（開いているならそのまま）
ホームディレクトリに移動する
※ 上記の流れのままだと「cd ..」でOK
vim（エディタ）で「.zshrc」ファイルを開く（なければNewになります）
「vim .zshrc」
挿入モードに変更（英数のiキーを押す）
一行目に「export PATH=”$PATH:$HOME/development/flutter/bin”」を追加
コマンドモードに変更（escapeキーを押す）
保存して終了する（英数で:wqを入力して実行）
今開いているターミナルでパスを有効にする
※「source $HOME/.zshrc」を実行する
ちゃんとパスが通っているか確認する
「echo PATH」
「which flutter」
これらのコマンド実行結果が設定どおりに返ってくればOKです

flutter doctor（flutterの環境診断コマンド）を実行します。

flutter doctor

３つのイシュー（問題）が検出されました。Android SDKがない、Xcodeがない、CocoaPodsがないの３つです。これらは今後インストールしていくので先に進みます。

iOS開発環境のセットアップ

ここからはiOSの開発環境を構築していきます。

Xcodeをインストールします。WebからダウンロードもしくはMac App Storeからインストールできます。

Mac App Storeからインストールするとアップデートがあったときにお知らせが来るので便利です。

※このときはWebからインストールしてしまったので、後ほどMac App Storeから再インストールしました。

Xcodeのコマンドラインツールを設定するためにコマンドを２つ実行します。

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

Xcodeのライセンスを承諾するためのコマンドを実行します。

sudo xcodebuild -license

最後までスクロールして読み切ります。

iOSのシミュレータを起動します。

open -a Simulator

無事に起動しました。

公式ではここでFlutterアプリを作成して実行を試していますが、このままAndroidのセットアップに進みます。

Android開発環境のセットアップ

Android Studioをインストールします。Download Android Studioからインストールします。

私のCPUはM1 Proなので Mac with Apple chipを選択します。

インストールできたら起動します。

Standardを選択

UI Theme、Verify Settings、License Agreementを経てプラグインのインストール画面まで進みます。

Flutterのプラグインをインストールしておきます。左側のメニューからPluginsを選び、Flutterを選択します。合わせてDartのプラグインもインストールされます。

プラグインのインストール後、IDE（Android Studio）を再起動します。

ここでflutter doctorを実行してみます。

Androidのコマンドラインツールとライセンスステータスに問題があります。

コマンドラインツールをインストールするためにAndroid Studioの環境設定画面（Settings）をひらき、Appearance&Behavior→System Settings→Android SDKを選択します。SDK Toolsにあるコマンドラインツール（Android SDK Command-line Tools (latest)）にチェックを入れてOKをクリックします。