これまでに何度もFlutterの環境構築をやってきましたが、この作業自体が技術力の基礎トレーニングという感じがします。
このたびMacBook Pro 16インチ M1チップを入手したので、Flutter環境構築したときのログを残しておこうと思います。
追記 2023年9月)MacBookのストレージ肥大化により、初期化&再セットアップしました。合わせて構築手順を詳細化しました😀
環境の前提
MacBook Pro 16インチ(2021)M1 Pro メモリ32GB ストレージ512GB
環境構築の手順
公式に則って環境構築をすすめていきます。
環境構築
では実際に構築をすすめていきます。
Flutter SDKのインストール
公式サイトから最新の安定版Flutter SDKをダウンロードします。
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-04-14.29.16-1024x305.jpg)
ダウンロードできたら任意のディレクトに置きます(私の場合はホーム直下にdevelopmentフォルダを作成し、その下に保存しました)
ターミナルを開いて、developmentフォルダに移動し、Flutter SDKファイルを展開(Unzip)します。
※インストール時点のバージョンは3.0.4でした
cd ~/development
unzip ~/Downloads/flutter_macos_arm64_3.0.4-stable.zip
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット_2022-10-04_14_31_47-1024x632.jpg)
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」
![](https://kevins-blog.com/wp-content/uploads/2023/09/スクリーンショット_2023-09-22_15_38_25-1024x693.png)
4. 挿入モードに変更 (英数のiキーを押す)
5.一行目に「export PATH=”$PATH:$HOME/development/flutter/bin”」を追加
![](https://kevins-blog.com/wp-content/uploads/2023/09/スクリーンショット-2023-09-22-15.37.44-1024x693.png)
6. コマンドモードに変更 (escapeキーを押す)
7. 保存して終了する(英数で:wqを入力して実行)
8. 今開いているターミナルでパスを有効にする
※「source $HOME/.zshrc」を実行する
9. ちゃんとパスが通っているか確認する
「echo PATH」
「which flutter」
これらのコマンド実行結果が設定どおりに返ってくればOKです
![](https://kevins-blog.com/wp-content/uploads/2023/09/スクリーンショット_2023-09-22_15_54_08-1024x693.png)
flutter doctor(flutterの環境診断コマンド)を実行します。
flutter doctor
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット_2022-10-04_14_41_55-1024x627.jpg)
3つのイシュー(問題)が検出されました。Android SDKがない、Xcodeがない、CocoaPodsがないの3つです。これらは今後インストールしていくので先に進みます。
iOS開発環境のセットアップ
ここからはiOSの開発環境を構築していきます。
Xcodeをインストールします。WebからダウンロードもしくはMac App Storeからインストールできます。
Mac App Storeからインストールするとアップデートがあったときにお知らせが来るので便利です。
※このときはWebからインストールしてしまったので、後ほどMac App Storeから再インストールしました。
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-04-14.49.42-1024x311.jpg)
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-04-14.50.32-1024x668.jpg)
Xcodeのコマンドラインツールを設定するためにコマンドを2つ実行します。
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
![](https://kevins-blog.com/wp-content/uploads/2023/09/スクリーンショット_2023-09-22_16_04_54-1024x761.png)
Xcodeのライセンスを承諾するためのコマンドを実行します。
sudo xcodebuild -license
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット_2022-10-04_14_57_37-1024x686.jpg)
最後までスクロールして読み切ります。
Xcode15以上であれば次のコマンドでiOSシミュレータをインストールできます。
xcodebuild -downloadPlatform iOS
![](https://kevins-blog.com/wp-content/uploads/2023/09/スクリーンショット_2023-09-22_16_07_29-1024x761.png)
iOSのシミュレータを起動します。
open -a Simulator
![](https://kevins-blog.com/wp-content/uploads/2023/09/2023-09-22_16_15_45-1024x901.jpg)
無事に起動しました。
つぎにAndroid開発環境のセットアップに進みます。
Android開発環境のセットアップ
Android Studioをインストールします。
なお、FlutterはAndroid開発に必要なツール一式をAndroid Studioのフルインストールに依存しています。なのでIDEとして使うか否かは別として、(ちょっとサイズが大きいのですが)いれていきます。
Download Android Studioからインストールします。
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-04-15.05.07-1024x546.jpg)
私のCPUはM1 Proなので Mac with Apple chipを選択します。
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-04-15.06.41-1024x625.jpg)
インストールできたら起動します。
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-04-15.08.46-1024x771.jpg)
Standardを選択
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-04-15.10.10-1024x728.jpg)
UI Theme、Verify Settings、License Agreementを経てプラグインのインストール画面まで進みます。
![](https://kevins-blog.com/wp-content/uploads/2023/09/スクリーンショット-2023-09-25-11.57.23-1024x799.png)
このインストールでAndroid SDKや Android SDK などAndroid開発に必要なツールが導入されます。
Flutterのプラグインをインストールしておきます。左側のメニューからPluginsを選び、Flutterを選択します。合わせてDartのプラグインもインストールされます。
プラグインのインストール後、IDE(Android Studio)を再起動します。
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-04-15.16.38-1024x751.jpg)
ここでflutter doctorを実行してみます。
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット_2022-10-04_15_17_56-1024x452.jpg)
Androidのコマンドラインツールとライセンスステータスに問題があります。
コマンドラインツールをインストールするためにAndroid Studioの環境設定画面(Settings)をひらき、Language&Frameworks→Android SDKを選択します。SDK Toolsにあるコマンドラインツール(Android SDK Command-line Tools (latest))にチェックを入れてOKをクリックします。
![](https://kevins-blog.com/wp-content/uploads/2023/09/スクリーンショット_2023-09-25_12_04_32-1024x771.png)
コマンドラインツールをインストールできたら、つぎにライセンスを承諾します。
ターミナルで以下を実行します。
flutter doctor --android-licenses
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-04-15.25.40-1024x144.png)
iOSの実行
ここからFlutterアプリをiOSで実行していきます。flutter doctorでエラーの出ていたcocoapodsをインストールします。
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット_2022-10-04_15_29_27-755x1024.jpg)
コマンドでAndroid StudioのプロジェクトルートディレクトリからFlutterアプリを作成します。以下のコマンドを実行します。
※test_appは任意のアプリプロジェクト名を付けられます。
flutter create test_app
cd test_app
flutter run
このような感じでiOSで実行できました。
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット_2022-10-04_15_37_55-1024x690.jpg)
この段階でflutter doctorの問題がなくなりました。
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット_2022-10-04_15_42_41-1024x330.jpg)
Androidの実行
AndroidエミュレータをAndroid Studioから設定していきます。
Android Studio画面右上のDevice Managerをクリックします。
![](https://kevins-blog.com/wp-content/uploads/2023/09/スクリーンショット-2023-09-25-12.16.18-1024x200.png)
エミュレータとして起動したい機種を選びます。
![](https://kevins-blog.com/wp-content/uploads/2023/09/スクリーンショット-2023-09-25-12.10.26-1024x729.png)
OSを選びます。下記では執筆時点最新のTiramisu(Android 13.0)をインストールしています。
![](https://kevins-blog.com/wp-content/uploads/2023/09/スクリーンショット-2023-09-25-12.11.48-1024x801.png)
インストールが終わったら、デバイスを起動してみます。Device Managerから作成した機種をクリックします。
![](https://kevins-blog.com/wp-content/uploads/2023/09/スクリーンショット_2023-09-25_12_14_00-1024x663.png)
無事にPixel 7 Proが起動しました。
公式のこちらから作成できます。
作成してサンプルアプリが実行できるとこのような画面になります。
![](https://kevins-blog.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-04-15.46.02-1024x670.jpg)
スマホ実機での実行
ここでは実機での実行は割愛しますが、公式に実行方法が掲載されています。
以上で環境構築を完了します。flutter doctorで問題がゼロになるところまでが環境構築のいったんの目標になります。
みなさんの参考になれば幸いです。