Flutter

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

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

環境の前提

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"

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

#update-your-path"]

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

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

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

flutter doctor

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

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

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

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

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

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

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

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をクリックします。

コマンドラインツールをインストールできたら、つぎにライセンスを承諾します。

ターミナルで以下を実行します。

flutter doctor --android-licenses

iOSの実行

ここからFlutterアプリをiOSで実行していきます。flutter doctorでエラーの出ていたcocoapodsをインストールします。

コマンドでAndroid StudioのプロジェクトルートディレクトリからFlutterアプリを作成します。以下のコマンドを実行します。

※test_appは任意のアプリプロジェクト名を付けられます。

flutter create test_app
cd test_app
flutter run

このような感じでiOSで実行できました。

この段階でflutter doctorの問題がなくなりました。

Androidの実行

エミュレータの作成スクショを撮り忘れてしまったので残っていないのが申し訳ないです。。。

公式のこちらから作成できます。

作成してサンプルアプリが実行できるとこのような画面になります。

スマホ実機での実行

ここでは実機での実行は割愛しますが、公式に実行方法が掲載されています。

以上で環境構築を完了します。flutter doctorで問題がゼロになるところまでが環境構築のいったんの目標になります。

みなさんの参考になれば幸いです。