flutter-expert

Flutter エキスパート

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 Provider + 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');
  }
}

前後の比較 — 状態管理

// ❌ 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. テストファイルの構成

ドキュメント