moai-lang-flutter

クイックリファレンス（30 秒）

Flutter／Dart 開発エキスパート — Dart 3.5 以降、モダンなパターンを使用した Flutter 3.24 以降に対応しています。

自動トリガー：Flutter プロジェクト（.dart ファイル、pubspec.yaml）、クロスプラットフォームアプリ、ウィジェット開発

主な機能：

• Dart 3.5：パターン、レコード、sealed クラス、拡張型
• Flutter 3.24：ウィジェットツリー、Material 3、アダプティブレイアウト
• Riverpod：コード生成による状態管理
• go_router：宣言的なナビゲーションとディープリンク
• プラットフォームチャネル：ネイティブ iOS／Android との連携
• テスト：flutter_test、widget_test、integration_test

実装ガイド（5 分）

Dart 3.5 の言語機能

Sealed クラスによるパターンマッチング：ジェネリック型パラメーター T を持つ sealed クラス Result を定義します。data フィールドを含む Success と、エラー文字列を含む Failure のサブクラスを作成します。sealed 型に対してパターンマッチングを行う switch 式を使用します。パターンではコロン構文を使って名前付きフィールドを取り出します。when キーワードを使って、フィールド値に基づく条件付きマッチングを行うガード節を追加します。

レコードと分解代入：名前付きフィールドを持つレコードの型エイリアスを、丸括弧を使って定義します。位置要素を持つレコードタプルとして複数の値を返す関数を作成します。代入の左辺では、丸括弧を使った分解代入構文を使用します。for ループでは、コロン構文を使って名前付きレコードフィールドを直接分解します。

拡張型：type キーワードを使って拡張型を定義し、丸括弧内に基底型を指定します。検証ロジック用のファクトリーコンストラクターを追加します。基になる値の計算プロパティ用にゲッターを定義します。

Riverpod による状態管理

プロバイダーの定義：riverpod_annotation をインポートし、生成ファイル用の part ディレクティブを追加します。関数に @riverpod アノテーションを付けて、シンプルなプロバイダーを作成します。ref.read で他のプロバイダーを読み取り、リポジトリーインスタンスを返します。Future 型を返して非同期プロバイダーを作成します。状態を持つプロバイダーでは、生成されたアンダースコア付きクラスを継承するクラスを作成し、初期状態を設定する build メソッドをオーバーライドします。また、AsyncValue.guard を使って状態を変更するメソッドを追加します。

ウィジェットとの連携：ConsumerWidget のサブクラスを作成します。build メソッドでは、2 番目のパラメーターとして WidgetRef を受け取ります。ref.watch を使ってプロバイダーの値を監視します。when メソッドを使って AsyncValue を処理し、data、loading、error の各コールバックを指定します。データを更新するには ref.invalidate を使います。スナックバーの表示などの副作用には、StatefulWidget で ref.listen を使います。

Riverpod を使った StatefulWidget：ConsumerStatefulWidget と ConsumerState を継承します。initState で TextEditingController を初期化し、dispose で破棄します。副作用には build 内で ref.listen を使います。非同期処理中にボタンを無効にするには isLoading の状態を確認します。ref.read と notifier ゲッターを使って notifier のメソッドにアクセスします。

go_router によるナビゲーション

ルーターの設定：initialLocation を指定して GoRouter インスタンスを作成します。path、name、builder を含む GoRoute オブジェクトで routes 配列を定義します。routes 配列内に子ルートをネストします。永続的なナビゲーションシェルには ShellRoute を使います。タブナビゲーションでは NoTransitionPage を使って pageBuilder を作成します。認証状態を確認し、リダイレクト先のパスを返すか、ナビゲーションを許可する場合は null を返す redirect コールバックを実装します。エラー処理用に errorBuilder を定義します。

ナビゲーションメソッド：パスを指定した宣言的なナビゲーションには context.go を使います。context.pop の前に context.canPop を使って、戻れるかどうかを確認します。

プラットフォームチャネル

Dart の実装：チャンネル名の文字列を使って、MethodChannel と EventChannel の定数を持つクラスを定義します。invokeMethod でチャンネル上のメソッドを呼び出す非同期メソッドを作成し、PlatformException をキャッチします。ストリーミングデータを受け取るには、EventChannel で receiveBroadcastStream を呼び出し、イベントを型付きオブジェクトにマッピングします。setMethodCallHandler を使ってメソッド呼び出しハンドラーを設定し、ネイティブコードからの呼び出しを受け取ります。

ウィジェットのパターン

アダプティブレイアウト：child、destinations、selectedIndex、onDestinationSelected コールバックを必須パラメーターとして受け取る StatelessWidget を作成します。build では、MediaQuery.sizeOf を使って幅を取得します。幅のブレークポイントに基づいて条件付きで値を返します。600 ピクセル未満では、bottomNavigationBar に NavigationBar を設定した Scaffold を返します。840 ピクセル未満では、NavigationRail と拡張された child を含む Row を設定した Scaffold を返します。840 ピクセルを超える場合は、NavigationDrawer と拡張された child を含む Row を設定した Scaffold を返します。

テスト

ウィジェットテストの例：test の main 関数で、モックプロバイダーのオーバーライドを指定して ProviderContainer を作成します。テスト対象のウィジェットを含む MaterialApp を UncontrolledProviderScope でラップし、tester.pumpWidget を使います。find.byType で初期の読み込み状態を検証します。非同期処理を待つには tester.pumpAndSettle を呼び出します。最後の状態は find.text で検証します。

テストパターンの詳細については、examples.md を参照してください。

高度なパターン

以下を含む詳細な内容については：

• すべてのプラットフォームに対応したアダプティブ UI とレスポンシブ UI
• アニメーションのパターン（暗黙的、明示的、ヒーロー、スタッガード、物理演算）
• 専門家レベルのウィジェット開発と最適化
• Riverpod を使ったクリーンアーキテクチャ
• 計算負荷の高い処理のためのアイソレート
• カスタムレンダーオブジェクトと描画
• FFI とプラットフォーム固有のプラグイン
• パフォーマンスの最適化とプロファイリング

レスポンシブレイアウトについては reference/adaptive.md、アニメーションのパターンについては reference/animations.md、専門家レベルの開発については reference/expert.md を参照してください。

Context7 ライブラリのマッピング

Flutter/Dart のコア：

• /flutter/flutter - Flutter フレームワーク
• /dart-lang/sdk - Dart SDK

状態管理：

• /rrousselGit/riverpod - Riverpod による状態管理
• /felangel/bloc - BLoC パターン

ナビゲーションとストレージ：

• /flutter/packages - go_router と公式パッケージ
• /cfug/dio - HTTP クライアント
• /isar/isar - NoSQL データベース

相性のよいツール

• moai-lang-swift - プラットフォームチャネル向けの iOS ネイティブ連携
• moai-lang-kotlin - プラットフォームチャネル向けの Android ネイティブ連携
• moai-domain-backend - API 連携とバックエンド通信
• moai-quality-security - モバイルセキュリティのベストプラクティス
• moai-essentials-debug - Flutter のデバッグと DevTools