環境
- PC: M1 Macbook Pro
- OS: Ventura Version 13.6
- VScode Version: 1.85.2
▼ ソフトのインストール状況
✅ VSCode
✅ Chrome
◽️ XCode
◽️ Android Studio
◽️ Flutter SDK
📝 結論
以下の手順で開発環境を構築できます。
- XCode のインストール
- Android Studio のインストール
- Flutter SDK のインストール
- Android Studio に Flutter の Extention をインストール
💻 実際の手順
🍎 XCode のインストール
App Store からインストールしています。
変なタイミングでアプデが入らないよう、アプリの自動アップデートは Mac の設定から切っておいた方が良いでしょう。
起動すると規約に同意するかを選択する画面になります。同意するしかないので同意しましょう。
その後アプリを開発したい環境を選べるので iOS のみを選択します。
以上で終了です。
🤖 Android Studio のインストール
公式サイト からインストールしました。
ダウンローダを入手する際、Mac with Apple chip を間違えないように選びましょう。Intel ではありません。
その後ダウンローダを起動 & アプリをインストールし、起動しましょう。
最初にインポートの設定ができるようですが、今のところ特にこだわりはないのでデフォルトで行きます。
セットアップが始まるので「Next」を押します。
セットアップもカスタムできるようですが、何も分からないので「Standard」で進めました。
「Next」を押すと規約の同意画面になります（スクショを撮り忘れました）。2つの規約に同意して「Finish」を押すとセットアップが始まるので、あとは放置で完了です。
Flutter SDK のインストール
公式サイト からインストールしました。
まずは動作環境を聞かれるようなので、「Mac OS」を選びます。
その後、どんなアプリを作るか尋ねられます。私はまず Web アプリを作ってみたいので「Web」を選択しました。
その後に遷移するページをスクロールしていき、「Install the Flutter SDK」のパートに到着すると詳しい手順が書いてあります。今回は「Use VS Code to install Flutter」に従って進めていきましょう。
まずは公式サイトのリンクから Flutter 開発用の VSCode Extention をインストールします。
Cmd + Shift + P でコマンドパレットを開き、「flutter」と入力して一番上の「Flutter: New Profect」を選択。
まだ Flutter SDK を導入していないため、ここで「Download SDK」をクリックします。数分かかるのでコーヒーでも飲んで待ちましょう。
「パスを通したいだろうし、SDK のパスをコピペしていっていいよ」と言われるのでありがたくコピペしましょう。
ではパスを通していきましょう。まずは .zshrc を vim で編集します。
vim .zshrc
i を押すと文字入力が可能な INSERT モードになります。以下の行を追加してください。ちなみに [] は不要です（私は一度間違えました）。
export PATH="$PATH:[ここにFlutterのPATH]/bin"
# 例：user以下にDeveloperフォルダを作成してflutterフォルダを配置した場合
export PATH="$PATH:/Users/dentou/Developer/flutter/bin"
esc を押すと INSERT モードが解除でき、またコマンドを入力するモードになるので :wq! と入力して vim を終了します。
通常のターミナルに戻ってくるはずです。
さてここで忘れないように Terminal を一度再起動しましょう！
その後、以下のコマンドで問題なくパスが通っていることを確認できるはずです。
which flutter
# /Users/dentou/Developer/flutter/bin/flutter
# のようにパスが表示されればOK
なお私は再起動を忘れてしまいしばらく「パスが通らないぞ…？」と困っていました。
VScode もここで再起動しておきましょう。
では FlutterSDK が本当に正常にインストールできているかを確かめていきます。以下のコマンドを実行しましょう。
flutter doctor
環境によって完了できていない項目が違うかもしれませんが、この記事では上記スクショでエラーが出ている部分のみ解説していきます。
1つずつエラーを解消していきましょう。
1つ目のエラー
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
こちらのエラーは Android Studioに「cmdline-tools component」がインストールされていない という内容です。
コマンドが書いてあったのですがパスを調べるのが面倒くさかっため、調べてみると以下の手順でクリアできました。
- Android Studio を起動
- More Actions → SDK Manager を選択
1.「Android SDK Command-line Tools(latest)」を選択してインストール
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
2つ目のエラー
こちらのエラーはライセンスに同意してほしいという内容ですね。
メッセージにあるコマンドの実行で解消できました。
flutter doctor --android-licenses
3つ目のエラー
XCode のインストールが未完了であるというエラーです。
✗ Xcode installation is incomplete; a full installation is necessary for iOS and macOS development.
Download at: https://developer.apple.com/xcode/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
App Store からのダウンロードは済んでいるので、こちらもコマンドの実行でクリアできます！
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
再度 flutter doctor すると…
正常に Flutter SDK のインストールが完了しました！
Android Studio に Flutter の Extention をインストール
サイドバーの Plugins を選択し、「flutter」と検索してインストールします。同時に「Dart」のプラグインもインストールを要求されるので、まとめて入れておきましょう。
以上です。お疲れ様でした！
まとめ
以下の手順で Flutter の環境構築ができました。
- XCode のインストール
- App Store を使用してインストール
- 起動してセットアップ
- Android Studio のインストール
- 公式サイトからインストール
- 起動してデフォルトの選択肢でセットアップ
- Flutter SDK のインストール
- まずは公式サイトのリンクから Flutter 開発用の VSCode Extention をインストール
- VSCode のコマンドパレットでコマンド入力して Flutter SDK をインストール
- パスを通す
- Terminal, VSCode の再起動を忘れずに
-
flutter doctorを実行し、1つずつエラーを解消
- Android Studio に Flutter の Extention をインストール
参考文献
概ね 【Flutter】開発環境のセットアップ手順（M1 Mac編） の手順に従って進め、公式ページ と記載が異なる場合は公式ページを優先しました。
エラーの対処法がわからなかった際に【Mac M1】「flutter doctor」実行時の「cmdline-tools component is missing」の解決法 を参照しました。