【Flutter】M1 MacBook Air SonomaにFlutter開発環境を構築する

Flutterの開発から約2年も遠ざかっていたので、M1 MacBook AirにSonomaをクリーンインストールしてみました。

以前はAndroid Studioで開発していましたが、最近はVisual Studio Code(以下「VSC」)での開発が主流っぽいので、Android Studioに加え、VSCでの開発環境も構築してみようと思います。

Xcodeの入手

まずXcodeはApp Storeから入手しておきます。

Xcodeは一度起動させて、同意などを済ませておきます。開発対象を聞かれた場合は、「iOS」も追加しておきましょう。

Android Studioのダウンロードとインストールそしてセットアップ

次にAndroid Studioをダウンロードしてインストールしておきます。

Android Studioをインストール後、起動しておきましょう。セットアップウィザードが開始されるので、実行します。

セットアップのタイプは「Standard」を選択します。

設定内容を確認して「Next」へ

左側の「android-sdk-license」を選択し右下の「Accept」を選択します。

さらに左側の「android-sdk-arm-dbt-license」を選択し右下の「Accept」を選択し、「Finish」を押します。

Android SDKのインストールが始まりますので、終わったら「Finish」で終了します。

Android Studioを日本語化する場合は、下記のサイトを参考に日本語化しておきましょう。

最新版の Android Studio を日本語化する方法

SDK Managerを起動します。

「SDK Tools」から「Android SDK Command-line Tools (latest)」にチェックし「OK」します。

変更の確認が表示されるので、「OK」します。

インストールが終わったら、「完了」します。

Visual Studio Codeのダウンロードとインストール

次にVSCもダウンロードしてインストールしておきます。

Homebrewのインストール

Homebrewをインストールしておきます。

ターミナルで指定のコマンドをコピペし実行するだけです。

Homebrewにパスを通します。

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/(username)/.zprofile

eval "$(/opt/homebrew/bin/brew shellenv)"

HomebrewでGitをインストールしておきます。

brew install git

Flutter公式サイトの設定方法の説明を参照する

Flutter公式サイトに移動し、右上の「Get started」から「macOS」→「iOS」を選択します。

Flutterのインストール

「Use VS Code to install Flutter」のセクションまでスクロールし、インストールしていきます。

左のアイコンから「拡張機能」を選択しMarketPlaceから「Flutter」をインストールします。

Command + Shift + Pでコマンドパレットを表示し、「flutter」と入力後、「Flutter: New Project」を選択する

「Download SDK」を選択する

ホームディレクトリ内に「development」ディレクトリを新規作成し、「Clone Flutter」を選択します。

クローン(ダウンロード)されたdevelopment配下のflutterにパスを通します。

echo export PATH=\"\$PATH:\$HOME/development/flutter/bin\" >> ~/.zshrc

設定を現ターミナルウィンドウに反映します。

source ~/.zshrc

Xcodeの設定

「Configure Xcode」のセクションへ

コマンドラインツールを構成するには下記のコマンドを実行します。

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

Xcode ライセンス契約に署名します。

sudo xcodebuild -license

iOSシミュレーターと実機の設定

「Configure your target iOS device」セクションへ

「Virtual Device(iOSシミュレーター)」か「Physical Device(実機)」かによって設定内容が詳しく記載されているので実施します。

ただし、Xcode起動後の設定は、Flutterプロジェクト作成後の話なので、後回しにしても大丈夫です。

CocoaPodsのインストール

次に「Install CocoaPods」セクションへ

下記のコマンドを実行します。

sudo gem install cocoapods

下記のようなメッセージが表示され、インストールに失敗します。

ERROR:  Error installing cocoapods:
	The last version of drb (>= 0) to support your Ruby & RubyGems was 2.0.6. Try installing it with `gem install drb -v 2.0.6` and then running the current command again
	drb requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

ご忠告通りのコマンドを実行してみます。

sudo gem install drb -v 2.0.6

実行後に、再度下記のコマンドを実行します。

sudo gem install cocoapods

するとまた下記のようなメッセージが表示され、インストールに失敗します。

ERROR:  Error installing cocoapods:
	The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.7. Try installing it with `gem install activesupport -v 6.1.7.7` and then running the current command again
	activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

またご忠告通りのコマンドを実行してみます。

sudo gem install activesupport -v 6.1.7.7

実行後に、またまた下記のコマンドを実行します。

sudo gem install cocoapods

下記のようなメッセージが表示されれば成功です。

Successfully installed cocoapods-core-1.15.2
Successfully installed cocoapods-1.15.2
Parsing documentation for cocoapods-core-1.15.2
Installing ri documentation for cocoapods-core-1.15.2
Parsing documentation for cocoapods-1.15.2
Installing ri documentation for cocoapods-1.15.2
Done installing documentation for cocoapods-core, cocoapods after 1 seconds
2 gems installed

Flutter開発環境の確認

設定した開発環境の確認フェーズに移ります。

「Run Flutter doctor」セクションへ

ターミナルを起動し下記を実行します。

flutter doctor

下記のような結果が出ます。Androidのライセンスが受諾されていないとのことなので、指定のコマンドを実行します。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.3, on macOS 14.4 23E214 darwin-arm64, locale
    ja-JP)
[!] 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
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] VS Code (version 1.87.2)
[✓] Connected device (3 available)
    ! Device QV722LMX2R is not authorized.
      You might need to check your device for an authorization dialog.
[✓] Network resources

下記を実行します。

flutter doctor --android-licenses

数回下記のように受諾するか尋ねられるので、「y」とします。

Review licenses that have not been accepted (y/N)?

下記のように表示されたらAndroidのライセンス受諾が完了です。

---------------------------------------
Accept? (y/N): y
All SDK package licenses accepted

再度「flutter doctor」を実行します。下記のように表示されたらFlutterのセットアップが完了です。

~ $ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.3, on macOS 14.4 23E214 darwin-arm64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] VS Code (version 1.87.2)
[✓] Connected device (3 available)
    ! Device QV722LMX2R is not authorized.
      You might need to check your device for an authorization dialog.
[✓] Network resources

• No issues found!

以上

flutter doctorは、問題が発見されても、「run:〜」という感じで「これを実行すれば問題が解決するよ」って丁寧に教えてくれるので、根気よくやってみましょう。また問題の解決方法がわからない場合は、素直にエラー内容をググれば大概解決方法が見つかりますよ。

About The Author