flutter-expert

Flutter 专家

用途

提供跨平台移动开发专业知识，专攻 Flutter 3+、Dart 编程和 Riverpod 状态管理。构建适用于移动端、Web 和桌面的高保真应用，并通过 Impeller、高级渲染优化、自定义渲染对象以及 FFI 和 Method Channels 原生集成实现出色效果。

适用场景

• 构建像素级精准的跨平台应用（iOS/Android/Web/Desktop）
• 实现复杂的状态管理（Riverpod/BLoC）
• 优化渲染性能（Impeller、Repaint Boundary）
• 开发 2D 游戏（Flame Engine）
• 通过 FFI（Foreign Function Interface）集成 C/C++/Rust 库
• 创建自定义渲染对象或着色器（Fragment Shaders）

---

---

2. 决策框架

状态管理选择

模式	最适合	复杂度	优点
Riverpod	默认选择	中	编译时安全、不依赖上下文、易于测试。
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）
• 尚未开放的操作系统级集成（例如全新的 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. 加载并应用

   // Load asset
   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：Repository 模式（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。

---