Flutter

Flutter環境構築 for 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"

永続的にパスを通すためにはこの処理を流します。

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のプラグインをインストールしておきます。

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

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

コマンドラインツールをインストールするためにAndroid Studioの環境設定画面(Preferences)をひらき、Appearance&Behavior→System Settings→Android SDKを選択します。SDK Toolsにあるコマンドラインツールにチェックを入れて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で問題がゼロになるところまでが環境構築のいったんの目標になります。

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