flutter-expert

Flutter エキスパート

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

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

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

基本的なワークフロー

1. セットアップ — プロジェクトをひな形から作成し、依存関係を追加（flutter pub get）して、ルーティングを設定します
2. 状態 — Riverpod プロバイダーまたは Bloc/Cubit クラスを定義し、flutter analyze で確認します
   • flutter analyze で問題が報告された場合：先にすべての lint と警告を修正し、問題がなくなるまで再実行します
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 — Notifier, not the legacy StateNotifier
final counterProvider = NotifierProvider<CounterNotifier, int>(CounterNotifier.new);

class CounterNotifier extends Notifier<int> {
  @override
  int build() => 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() を使用し、finder のセレクターを確認します
パッケージ追加後にビルドが失敗する	依存関係のバージョンに互換性がない	flutter pub upgrade --major-versions を実行し、pub.dev で互換性を確認します
カクつき／フレーム落ち	負荷の高い build() 呼び出し、ウィジェットのキャッシュ不足、メインスレッドの重い処理	RepaintBoundary を使用し、重い処理を compute() に移し、const を追加します
ホットリロードで変更が反映されない	Notifier 内の状態がリセットされていない	ホットリスタート（ターミナルで R）を使用して、アプリ全体の状態をリセットします

出力テンプレート

Flutter の機能を実装する際は、以下を提示してください。

1. 適切に const を使用したウィジェットコード
2. Provider／Bloc の定義
3. 必要に応じたルート設定
4. テストファイルの構成

@jeffallan、Synergetic Solutions のプリンシパルコンサルタントがメンテナンスしています。

ドキュメント