Claude CodeでFlutterアプリ開発完全ガイド【2026年最新】：CLAUDE.md設計から状態管理・テスト・App Store申請まで

Claude CodeでFlutterアプリ開発、実際どうなの？

FlutterとClaude Codeの相性

FlutterとClaude Codeの組み合わせで何ができるか

CLAUDE.mdの設計：FlutterプロジェクトのAI辞書を作る

Flutterプロジェクト向けCLAUDE.md実例

# MyApp — CLAUDE.md

## 技術スタック
- Flutter 3.41 / Dart 3.11
- 状態管理: Riverpod 2.x（AsyncNotifierProvider パターン）
- ルーティング: go_router 13.x
- ネットワーク: dio + retrofit
- ローカルDB: Hive 4.x
- テスト: flutter_test + mocktail + integration_test

## ディレクトリ構造
lib/
├── features/        # Feature-first アーキテクチャ
│   └── {feature}/
│       ├── data/    # Repository / DataSource
│       ├── domain/  # UseCase / Entity
│       └── presentation/ # Page / ViewModel
├── core/            # 共通ユーティリティ
└── generated/       # Riverpod コード生成出力

## コーディング規約
- すべてのウィジェットは ConsumerWidget を継承
- 非同期処理は AsyncNotifierProvider を使用
- 画面遷移は Navigator.push 禁止 → go_router の context.go / context.push を使用
- 多言語対応: ARBファイルに日本語と英語の両方を必須で追加

## テスト戦略
- ビジネスロジック: ユニットテスト（80%以上のカバレッジ）
- UI: WidgetTest（重要パスのみ）
- E2E: integration_test（主要フロー5件以上）

.claude/settings.jsonのFlutter向け設定

{
  "permissions": {
    "allow": [
      "Bash(flutter:*)",
      "Bash(dart:*)",
      "Bash(fvm:*)",
      "Write(lib/**)",
      "Write(test/**)",
      "Write(integration_test/**)"
    ]
  }
}

Riverpodの状態管理コードを自動生成する

WallpaperListNotifier を作成してください。
- AsyncNotifierProvider を使用
- WallpaperRepository を DI（依存性注入）で受け取る
- カーソルベースのページネーションに対応
- エラーハンドリング: NetworkException と ServerException を区別する
- お気に入りのトグル操作でオプティミスティックアップデートを実装
- 出力先: lib/features/wallpaper/presentation/wallpaper_list_notifier.dart

生成されるコードの例

// lib/features/wallpaper/presentation/wallpaper_list_notifier.dart
import 'package:riverpod_annotation/riverpod_annotation.dart';
import '../data/wallpaper_repository.dart';
import '../domain/wallpaper.dart';

part 'wallpaper_list_notifier.g.dart';

@riverpod
class WallpaperListNotifier extends _$WallpaperListNotifier {
  @override
  Future<List<Wallpaper>> build() async {
    return _fetchPage(null);
  }

  Future<List<Wallpaper>> _fetchPage(String? cursor) async {
    final repo = ref.read(wallpaperRepositoryProvider);
    try {
      return (await repo.fetchWallpapers(cursor: cursor)).items;
    } on NetworkException catch (e) {
      throw WallpaperNetworkError(message: e.message);
    } on ServerException catch (e) {
      throw WallpaperServerError(statusCode: e.statusCode);
    }
  }

  // お気に入りのオプティミスティックアップデート
  Future<void> toggleFavorite(String wallpaperId) async {
    final previous = state;
    state = AsyncData(
      state.value!.map((w) =>
        w.id == wallpaperId ? w.copyWith(isFavorite: !w.isFavorite) : w
      ).toList(),
    );
    try {
      await ref.read(wallpaperRepositoryProvider).toggleFavorite(wallpaperId);
    } catch (e) {
      state = previous; // 失敗時は元に戻す
      rethrow;
    }
  }
}

UIコンポーネントをデザインシステムに沿って生成する

レスポンシブレイアウトの自動実装

デザイン変更が特に強い

テストコードの自動生成：WidgetTestからE2Eまで

WidgetTestの書き方をClaude Codeに任せる

LoginFormウィジェットのWidgetTestを書いてください。
テストケース:
- メールアドレスが空のままSubmitを押したとき、バリデーションエラーが表示される
- 正しいメールアドレスとパスワードを入力したとき、onLoginCallbackが呼ばれる
- ローディング中はSubmitボタンが非活性になる
モックには mocktail を使用。

void main() {
  group('LoginForm', () {
    testWidgets('空のメールアドレスでSubmitを押すとバリデーションエラーが出る', (tester) async {
      await tester.pumpWidget(
        const MaterialApp(
          home: Scaffold(body: LoginForm()),
        ),
      );

      await tester.tap(find.byType(ElevatedButton));
      await tester.pump();

      expect(find.text('メールアドレスを入力してください'), findsOneWidget);
    });

    testWidgets('正しい入力でonLoginCallbackが呼ばれる', (tester) async {
      var callbackCalled = false;

      await tester.pumpWidget(
        MaterialApp(
          home: Scaffold(
            body: LoginForm(
              onLogin: (email, password) {
                callbackCalled = true;
              },
            ),
          ),
        ),
      );

      await tester.enterText(
        find.byKey(const Key('emailField')),
        'test@example.com',
      );
      await tester.enterText(
        find.byKey(const Key('passwordField')),
        'password123',
      );
      await tester.tap(find.byType(ElevatedButton));
      await tester.pump();

      expect(callbackCalled, isTrue);
    });
  });
}

iOS/Androidのプラットフォーム設定を自動化する

ビルドスクリプトの自動生成

Flutterの多言語対応（ARBファイル）を自動生成する

Flutter開発の進め方：探索・計画・実装の3ステップ

コンテキストウィンドウの管理

App Store申請の準備もClaude Codeで

よくある質問

まとめ

• CLAUDE.mdに技術スタック・ディレクトリ構造・コーディング規約・テスト戦略を書く
• settings.jsonでflutter:*とdart:*コマンドを許可する
• 状態管理のボイラープレート（Riverpod AsyncNotifierProvider）は丸ごと任せる
• UIコンポーネントはデザイントークンをCLAUDE.mdに書いてから生成させる
• テストは「実装と同時に書かせる」のが最も効率的
• 探索→計画→実装の順で進める

出典

• Flutter公式サイト
• Flutter テストドキュメント
• Flutter デプロイメントドキュメント
• Claude Code 公式ドキュメント（ベストプラクティス）
• Claude Code 公式ドキュメント（概要）