クロスプラットフォームでアプリケーションを開発できるフレームワーク「Flutter」の開発環境をMacに構築する手順のメモ。
1. Homebrewのインストール
インストール状況確認
Homebrewがインストールされているか確認します。
% brew --version
Homebrew 4.3.8インストール
インストールされていない場合は、以下のコマンドを実行してインストールします。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"2. Xcode Command Line Toolsのインストール
Flutter開発にはXcode Command Line Toolsが必要です。
インストール状況確認
以下のコマンド（xcode-select -p Or gcc --version）でインストール状況を確認します。
% xcode-select -p
/Library/Developer/CommandLineTools
% gcc --version
Apple clang version 15.0.0 (clang-1500.3.9.4)
Target: x86_64-apple-darwin23.5.0
Thread model: posix
InstalledDir: /Library/Developer/CommandLineTools/usr/bin3. Flutter SDKのインストール
SDKダウンロード
Flutterの公式サイトからSDKをダウンロードします。
flutter_macos_3.22.2-stable.zip をダウンロードディレクトリ作成
以下のコマンドを実行してディレクトリを作成し、SDKを展開します。
mkdir ~/development
cd ~/development
unzip ~/Downloads/flutter_macos_3.22.2-stable.zip4. 環境変数の設定
設定ファイルの編集
~/.zshrc ファイルを編集して、Flutterのパスを追加します。
vi ~/.zshrc以下の行を追加します。
export PATH=$HOME/development/flutter/bin:$PATH設定の反映
以下のコマンドを実行して設定を反映させます。
source ~/.zshrc設定確認
環境変数が正しく設定されたか確認します。
echo $PATH期待される出力例：
/Users/username/development/flutter/bin:/usr/local/bin:...Flutterのバージョン確認
flutter --version期待される出力例：
Flutter 3.22.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 761747bfc5 (5 weeks ago) • 2024-06-05 22:15:13 +0200
Engine • revision edd8546116
Tools • Dart 3.4.3 • DevTools 2.34.35. Flutter Doctorの実行
以下のコマンドを実行して、環境が正しく構築されているか確認します。
flutter doctorFlutter Doctorの実行結果例
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-x64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from:
https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[✗] Xcode - develop for iOS and macOS
✗ 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
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.91.0)
[✓] Connected device (2 available)
[✓] Network resources
! Doctor found issues in 3 categories.6. 不足しているツールのインストール
flutter doctor の実行結果で問題が報告された場合、それらの問題を解決するために以下の手順に従います。
6.1. Android SDKのインストールと設定
Android Studioのインストール
Android Studioをインストールして、Android SDKを設定します。
FlutterにAndroid SDKの場所を設定
以下のコマンドを実行してFlutterにAndroid SDKのパスを設定します。
flutter config --android-sdk ~/Library/Android/sdk期待される出力例：
Setting "android-sdk" value to "/Users/username/Library/Android/sdk".
You may need to restart any open editors for them to read new settings.Command Line Toolsのダウンロードと展開
以下のコマンドでCommand Line Toolsをダウンロードし、展開します。
mkdir -p ~/Library/Android/sdk/cmdline-tools
unzip ~/Downloads/commandlinetools-mac-11076708_latest.zip -d ~/Library/Android/sdk/cmdline-tools
mv ~/Library/Android/sdk/cmdline-tools/cmdline-tools ~/Library/Android/sdk/cmdline-tools/latest環境変数の設定
再度、~/.zshrc ファイルを編集してAndroid SDKのパスを追加します。
vi ~/.zshrc以下の行を追加します。
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/cmdline-tools/latest/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools設定の反映
以下のコマンドを実行して設定を反映させます。
source ~/.zshrccmdline-toolsのインストール
以下のコマンドを実行してcmdline-toolsをインストールします。
sdkmanager --install "cmdline-tools;latest"Androidライセンスの承認
以下のコマンドを実行してAndroid SDKのライセンスを承認します。
flutter doctor --android-licenses6.2. Xcodeの完全なインストールとCocoaPodsのインストール
Xcodeのインストール
App StoreからXcodeをダウンロードしてインストールします。
Xcodeコマンドラインツールの設定
以下のコマンドを実行してXcodeコマンドラインツールを設定します。
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunchCocoaPodsのインストール
以下のコマンドを実行してCocoaPodsをインストールします。
sudo gem install cocoapodsCocoaPodsのセットアップ
以下のコマンドを実行してCocoaPodsをセットアップします。
pod setup7. 再度Flutter Doctorの実行
全てのセットアップが完了したら、再度 flutter doctor を実行して、環境が正しく構築されているか確認します。
flutter doctor全てのチェック項目が緑色のチェックマーク（✓）で表示されれば、Flutter開発環境のセットアップは完了です。
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.91.0)
[✓] Connected device (2 available)
[✓] Network resources
• No issues found!環境情報
- 使用デバイス: MacBook Air
- プロセッサ: 1.2 GHz クアッドコアIntel Core i7
- macOS バージョン: Sonoma バージョン 14.5（23F79）
コメント