📚

Gemini CLIのFlutter拡張でAI駆動なモバイルアプリ開発環境を作ってHello Worldしてみる

に公開
Android
Flutter
Dart
Gemini CLI
zennfes2025ai
tech

Gemini CLI の Flutter拡張機能でAI駆動なモバイルアプリ開発ができそうなので試してみました。
https://github.com/gemini-cli-extensions/flutter

前提条件

  • 開発端末: Windows 11 PC
  • モバイル端末: Android 実機 (Galaxy Z Fold7)
  • Java JDK / Android Studio はすでにインストール済み
  • ANDROID_HOME / JAVA_HOME の設定、PATH 追加済み
  • Git インストール済み

Java, Android 周りは下記記事を参照
https://zenn.dev/fujihide/articles/c945bc79071030

1. Flutter SDK のインストール

# 例: C:\src に配置する場合
cd C:\src
git clone https://github.com/flutter/flutter.git -b stable
  • 環境変数 PATH に C:\src\flutter\bin を追加。

2. Dart SDK の確認

Flutter に Dart が同梱されているため通常は不要。必要に応じて単体でインストール。

3. Flutter doctor の実行

flutter doctor
  • ✅ が揃うまで依存関係を解決。
  • Android Studio が検出されない場合:
flutter config --android-studio-dir="<パス>"

5. エミュレータ/実機の準備

  • USB デバッグを有効化した実機を接続
adb devices

6. Gemini CLI のインストールと Flutter 拡張

npm install -g @google/gemini-cli
gemini --version  # v0.4.0 以上を確認

# Flutter 拡張を導入
gemini extensions install https://github.com/gemini-cli-extensions/flutter.git --auto-update

# 導入確認
gemini extensions list

7. プロジェクト作成

cd <開発ディレクトリ>
gemini
/create-app  # Flutter アプリを生成
  • 対話形式でアプリ構成を決定。

8. アプリ実行

flutter pub get
flutter run

Android 端末 でこの画面が表示されたらOK。

  • ホットリロード: r
  • フルリスタート: R
  • 終了: q

9. 推奨ワークフロー

  • AI に設計やコード生成を任せるとき: Gemini CLI 内で /refactor, /commit を活用。
  • ビルド・実行・テスト: 別ターミナルから flutter run, flutter build を使用。
  • IDE 利用: VS Code/Android Studio に Flutter & Dart プラグインを導入。

トラブルシュート

  • コマンドが見つからない → 新しいターミナルを開き gemini extensions list を確認
  • Flutter doctor が警告を出す → 指示通りに追加設定
  • 画面が表示されない → flutter logs や flutter run -v で詳細確認

まとめ

  1. Flutter SDK & Dart セットアップ
  2. Gemini CLI + Flutter 拡張をインストール
  3. /create-app で雛形作成
  4. 通常ターミナルで flutter run 実行、Gemini CLI でリファクタやコミット補助

これで AI 補助付きの Flutter 開発環境が完成します。

Discussion