flutter-expert

Flutter エキスパート

目的

Flutter 3+、Dart プログラミング、Riverpod 状態管理を専門とする、クロスプラットフォームのモバイル開発に関する専門知識を提供します。高度なレンダリング最適化（Impeller）、カスタムレンダーオブジェクト、FFI や Method Channels によるネイティブ連携を活用し、モバイル、Web、デスクトップ向けの高忠実度アプリケーションを構築します。

使用するタイミング

• ピクセル単位で精密なクロスプラットフォームアプリ（iOS／Android／Web／デスクトップ）を構築する
• 複雑な状態管理（Riverpod／BLoC）を実装する
• レンダリングパフォーマンス（Impeller、Repaint Boundary）を最適化する
• 2D ゲーム（Flame Engine）を開発する
• FFI（Foreign Function Interface）経由で C／C++／Rust ライブラリを連携する
• カスタムレンダーオブジェクトやシェーダー（Fragment Shaders）を作成する

---

---

2. 選択のフレームワーク

状態管理の選択

パターン	最適な用途	複雑さ	長所
Riverpod	デフォルトの選択肢	中	コンパイル時の安全性、context への依存なし、テスト可能。
BLoC/Cubit	エンタープライズ	高	イベントと状態を厳密に分離でき、ログ記録や分析に最適。
Provider	レガシー／シンプル	低	組み込みでシンプルですが、BuildContext に依存します。
GetX	迅速な MVP 開発	低	「マジック」のようなリアクティブな仕組みで、ボイラープレートは少ないものの、標準的でないパターンです。

プラットフォーム連携の戦略

How to talk to Native?
│
├─ **Method Channels (Standard)**
│  ├─ Async calls? → **MethodChannel**
│  └─ Streams? → **EventChannel**
│
├─ **FFI (High Performance)**
│  ├─ C/C++ Library? → **dart:ffi**
│  └─ Rust Library? → **Flutter Rust Bridge**
│
└─ **Platform Views (UI)**
   ├─ Native UI inside Flutter? → **AndroidView / UiKitView**
   └─ Performance Critical? → **Hybrid Composition**

レンダリングエンジン（Impeller と Skia）

• Impeller（iOS のデフォルト）： シェーダーを事前に決定します。ジャンクが発生しません。
• Skia（レガシー／Android）： 実行時にシェーダーをコンパイルします。初回実行時にジャンクが発生する場合があります。
• 最適化： RepaintBoundary を使って、負荷の高い描画（動画プレーヤー、回転するスピナーなど）を分離します。

危険信号 → mobile-developer（ネイティブ）にエスカレーション：

• App Clips／Instant Apps の要件（Flutter のサポートは限定的で、負荷が高い）
• メモリに極めて制約のある環境（Flutter エンジンが約 10～20MB のオーバーヘッドを追加）
• OS レベルの未対応連携（例：新たに追加された iOS ベータ版機能）

---

---

ワークフロー 2：カスタムシェーダー（Fragment Program）

目標： ピクセル化などの視覚効果を作成します。

手順：

1. シェーダーコード（shaders/pixelate.frag）

   #include <flutter/runtime_effect.glsl>
   
   uniform vec2 uSize;
   uniform float uPixels;
   uniform sampler2D uTexture;
   
   out vec4 fragColor;
   
   void main() {
       vec2 uv = FlutterFragCoord().xy / uSize;
       vec2 pixelatedUV = floor(uv * uPixels) / uPixels;
       fragColor = texture(uTexture, pixelatedUV);
   }
   

2. 読み込みと適用

   // アセットを読み込む
   final program = await FragmentProgram.fromAsset('shaders/pixelate.frag');
   
   // CustomPainter
   void paint(Canvas canvas, Size size) {
     final shader = program.fragmentShader();
     shader.setFloat(0, size.width); // uSize.x
     shader.setFloat(1, size.height); // uSize.y
     shader.setFloat(2, 50.0); // uPixels (50x50 grid)
     
     final paint = Paint()..shader = shader;
     canvas.drawRect(Offset.zero & size, paint);
   }
   

---

---

4. パターンとテンプレート

パターン 1：クリーンアーキテクチャ（レイヤー）

ユースケース： 拡張性の高いエンタープライズアプリ。

lib/
  domain/       # Entities, Repository Interfaces (Pure Dart)
    entities/
    repositories/
  data/         # Implementations (API, DB)
    datasources/
    repositories/
    models/     # DTOs
  presentation/ # UI, Controllers (Flutter)
    pages/
    widgets/
    controllers/

パターン 2：リポジトリパターン（Riverpod）

ユースケース： API と UI を分離する。

@riverpod
AuthRepository authRepository(AuthRepositoryRef ref) {
  return FirebaseAuthImpl(FirebaseAuth.instance);
}

@riverpod
Future<User> currentUser(CurrentUserRef ref) {
  return ref.watch(authRepositoryProvider).getCurrentUser();
}

パターン 3：レスポンシブレイアウト（アダプティブ）

ユースケース： スマートフォン、タブレット、デスクトップに対応する。

class AdaptiveScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    
    if (width > 900) {
      return Row(children: [NavRail(), Expanded(child: Body())]);
    } else {
      return Scaffold(
        drawer: Drawer(),
        body: Body(),
        bottomNavigationBar: BottomNavBar(),
      );
    }
  }
}

---

---

6. 連携パターン

backend-developer:

• 引き継ぎ：バックエンドが Swagger／OpenAPI を提供 → Flutter エキスパートが openapi_generator を使って Dart クライアントを生成します。
• 連携：JWT リフレッシュトークンの処理（インターセプター）。
• ツール：Dio Interceptors。

mobile-developer:

• 引き継ぎ：ネイティブ開発者が Swift／Kotlin プラグインを作成 → Flutter エキスパートが Method Channel でラップします。
• 連携：プラットフォーム固有のクラッシュをデバッグします（Xcode／Android Studio）。
• ツール：Pigeon（型安全な相互運用）。

ui-designer:

• 引き継ぎ：デザイナーが Rive アニメーション（.riv）を提供 → Flutter エキスパートが rive パッケージを使用して統合します。
• コラボレーション：標準外の図形にカスタム Painter を実装します。
• ツール：Rive、Flutter Shape Maker。

---