Flutter開発環境の構築

Flutter開発に必要な環境を構築します。現在はmiseを使用したバージョン管理を推奨しています。

Flutterのインストール（mise推奨）

miseでFlutterをインストール

miseを使用すると、FlutterとDartが同時にインストールされます：

# 最新の安定版をインストール
mise install flutter

# 特定バージョンをインストール
mise install flutter@3.16.0

# プロジェクトで使用するバージョンを設定
mise use flutter@3.16.0

旧方式：FVMでのインストール（非推奨）

FVMは現在miseに置き換えられていますが、参考のため記載します：

# FVMのインストール
brew tap leoafarias/fvm
brew install fvm

# Flutterバージョンの管理
fvm releases               # 利用可能なバージョンを確認
fvm list                  # インストール済みバージョンを確認
fvm install 3.3.10        # 特定バージョンをインストール
fvm use 3.3.10 --force    # プロジェクトで使用

開発環境のセットアップ

Android Studioのインストール

1. Android Studio公式サイトからダウンロード
2. インストール後、以下の設定を行う：
   • Android SDK
   • Android SDK Platform-Tools
   • Android SDK Build-Tools

Android Studioの既知の問題対処

バージョン2022.1以降で発生する”Unable to find bundled Java version”エラーの解決：

# jbrフォルダをjreとしてコピー
cd "/Applications/Android Studio.app/Contents"
cp -r jbr jre

Androidライセンスの承認

flutter doctor --android-licenses

ADBコマンドの設定

.zshrcに追加：

# Android Debug Bridge
export PATH=$PATH:~/Library/Android/sdk/platform-tools/

iOS開発環境の設定

Xcodeの設定

Xcodeインストール後、以下のコマンドを実行：

# Developer toolsのパスを設定
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

# 初回起動の設定
sudo xcodebuild -runFirstLaunch

CocoaPodsのインストール

brew install cocoapods

グローバルパッケージのインストール

Dartパッケージ

# パッケージマネージャー
dart pub global activate melos

# Firebase CLI for Flutter
dart pub global activate flutterfire_cli

# コード生成ツール
dart pub global activate mason_cli

Firebaseツール

npm install -g firebase-tools

パスの設定

.zshrcに追加：

export PATH="$PATH":"$HOME/.pub-cache/bin"

プロジェクトの作成と実行

新規プロジェクトの作成

flutter create sample_app
cd sample_app

依存関係のインストール

flutter pub get

アプリケーションの実行

# iOSシミュレーターで実行
flutter run

# Androidエミュレーターで実行
flutter run

# Webブラウザで実行
flutter run -d chrome

# Web開発サーバーとして実行
flutter run --web-port 4444 -d web-server --web-renderer html

エミュレーターの管理

iOSシミュレーター

# 利用可能なシミュレーターを確認
xcrun simctl list devices

# シミュレーターを起動
open -a Simulator

Androidエミュレーター

Android Studio内のAVD Manager、または以下のコマンドで管理：

# エミュレーターのリスト表示
emulator -list-avds

# エミュレーターを起動
emulator -avd <avd_name>

環境確認

# Flutter環境の診断
flutter doctor

# 詳細な診断情報
flutter doctor -v

トラブルシューティング

flutter doctorで問題が表示される場合

1. 各ツールが正しくインストールされているか確認
2. パスが正しく設定されているか確認
3. 必要なライセンスを承認しているか確認

ビルドエラーの対処

# キャッシュのクリア
flutter clean

# パッケージの再取得
flutter pub get

# iOS固有の問題の場合
cd ios && pod install

参考リンク

• Flutter公式ドキュメント
• Dart公式サイト
• mise公式ドキュメント