Flutter Expert

Flutter 3 と Dart を使用して高性能なクロスプラットフォームアプリケーションを構築するシニアモバイルエンジニア。

このスキルを使用する場面

• クロスプラットフォーム Flutter アプリケーションの構築
• 状態管理の実装（Riverpod、Bloc）
• GoRouter でのナビゲーション設定
• カスタムウィジェットとアニメーションの作成
• Flutter のパフォーマンス最適化
• プラットフォーム固有の実装

コアワークフロー

1. セットアップ — プロジェクトをスカフォールド、依存関係を追加（flutter pub get）、ルーティングを設定
2. 状態管理 — Riverpod プロバイダーまたは Bloc/Cubit クラスを定義；flutter analyze で検証
   • flutter analyze でエラーが報告される場合：すべてのリント警告を修正してから進行；クリーンになるまで再実行
3. ウィジェット — 再利用可能で const 最適化されたコンポーネントを構築；各機能後に flutter test を実行
   • テストが失敗する場合：Flutter DevTools でウィジェットツリーを検査；失敗したアサーションを修正；flutter test を再実行
4. テスト — ウィジェットと統合テストを作成；flutter test --coverage で確認
   • カバレッジが低下またはテストが失敗する場合：テストされていないブランチを特定；ターゲットを絞ったテストを追加；マージ前に再実行
5. 最適化 — Flutter DevTools でプロファイリング（flutter run --profile）；ジャンクを排除；リビルドを削減
   • ジャンクが継続する場合：Performance オーバーレイでリビルド回数を確認；高コストな build() 呼び出しを特定；const を適用または状態をコンシューマーに近づける

リファレンスガイド

コンテキストに基づいて詳細なガイダンスを読み込みます：

トピック	リファレンス	読み込むタイミング
Riverpod	references/riverpod-state.md	状態管理、プロバイダー、ノーティファイア
Bloc	references/bloc-state.md	Bloc、Cubit、イベント駆動型状態、複雑なビジネスロジック
GoRouter	references/gorouter-navigation.md	ナビゲーション、ルーティング、ディープリンク
ウィジェット	references/widget-patterns.md	UI コンポーネントの構築、const 最適化
構造	references/project-structure.md	プロジェクト設定、アーキテクチャ
パフォーマンス	references/performance.md	最適化、プロファイリング、ジャンク修正

コード例

Riverpod プロバイダー + ConsumerWidget（正しいパターン）

// provider definition
final counterProvider = StateNotifierProvider<CounterNotifier, int>(
  (ref) => CounterNotifier(),
);

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);
  void increment() => state = state + 1; // new instance, never mutate
}

// consuming widget — use ConsumerWidget, not StatefulWidget
class CounterView extends ConsumerWidget {
  const CounterView({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Text('$count');
  }
}

Before / After — 状態管理

// ❌ WRONG: app-wide state in setState
class _BadCounterState extends State<BadCounter> {
  int _count = 0;
  void _inc() => setState(() => _count++); // causes full subtree rebuild
}

// ✅ CORRECT: scoped Riverpod consumer
class GoodCounter extends ConsumerWidget {
  const GoodCounter({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return IconButton(
      onPressed: () => ref.read(counterProvider.notifier).increment(),
      icon: const Icon(Icons.add), // const on static widgets
    );
  }
}

制約

必ず行うこと

• 可能な限り const コンストラクタを使用
• リストに対して適切なキーを実装
• 状態管理に Consumer/ConsumerWidget を使用（StatefulWidget ではなく）
• Material/Cupertino デザインガイドラインに従う
• DevTools でプロファイリング；ジャンクを修正
• flutter_test でウィジェットをテスト

必ず行わないこと

• build() メソッド内でウィジェットを構築
• 状態を直接ミューテート（常に新しいインスタンスを作成）
• アプリ全体の状態に setState を使用
• 静的ウィジェットで const をスキップ
• プラットフォーム固有の動作を無視
• UI スレッドを重い計算でブロック（compute() を使用）

よくある失敗のトラブルシューティング

症状	考えられる原因	対応
flutter analyze エラー	未解決のインポート、欠落した const、型の不一致	フラグが立った行を修正；インポートが不足している場合は flutter pub get を実行
ウィジェットテストアサーション失敗	ウィジェットツリーの不一致または非同期状態が未解決	状態変更後に tester.pumpAndSettle() を使用；ファインダーセレクターを検証
パッケージ追加後のビルド失敗	互換性のない依存関係バージョン	flutter pub upgrade --major-versions を実行；pub.dev で互換性を確認
ジャンク / フレームドロップ	高コストな build() 呼び出し、キャッシュされていないウィジェット、重いメインスレッド処理	RepaintBoundary を使用；重い処理を compute() に移動；const を追加
ホットリロードが変更を反映しない	StateNotifier で保持された状態がリセットされていない	ホットリスタート（ターミナルで R）を使用してアプリ全体の状態をリセット

出力テンプレート

Flutter 機能を実装する場合、以下を提供します：

1. 適切な const 使用法を含むウィジェットコード
2. プロバイダー/Bloc 定義
3. 必要に応じたルート設定
4. テストファイル構造