flutter-expert

用途 Flutter Expert 提供跨平台移动开发专业知识，专注 Flutter 3+、Dart 编程与 Riverpod 状态管理。用于为移动端、Web 和桌面端构建高保真应用，并涉及高级渲染优化（Impeller）、自定义渲染对象以及通过 FFI 和 Method Channels 进行的原生集成。

适用场景

构建像素级精确的跨平台应用（iOS/Android/Web/Desktop）
实现复杂状态管理（Riverpod/BLoC）
优化渲染性能（Impeller、Repaint Boundary）
开发 2D 游戏（Flame 引擎）
通过 FFI（外部函数接口）集成 C/C++/Rust 库
创建自定义渲染对象或着色器（片段着色器）

状态管理选择

Riverpod：默认选择；复杂度中等；优点为编译期安全、不依赖 context、可测试。
BLoC/Cubit：适合企业级；复杂度高；严格的事件/状态分离，适合日志与分析。
Provider：适合遗留或简单场景；复杂度低；内置、简单，但依赖 BuildContext。
GetX：适合快速 MVP；复杂度低；响应式“魔法”、样板代码较少，但属于非标准模式。

平台集成策略

Method Channels（标准）：异步调用使用 MethodChannel；流式数据使用 EventChannel。
FFI（高性能）：C/C++ 库使用 dart:ffi；Rust 库使用 Flutter Rust Bridge。
Platform Views（UI）：在 Flutter 内嵌原生 UI 使用 AndroidView / UiKitView；对性能敏感时使用 Hybrid Composition。

渲染引擎（Impeller 与 Skia）

Impeller（iOS 默认）：预编译着色器，无卡顿。
Skia（遗留/Android）：运行时编译着色器，首次运行可能卡顿。
优化：使用 RepaintBoundary 隔离重绘开销大的部分（如视频播放器、旋转加载指示器）。

需转交原生移动开发的情形

需要 App Clips / Instant Apps（Flutter 支持有限且较重）
极度受限的内存环境（Flutter 引擎会增加约 10-20MB 开销）
尚未暴露的操作系统级集成（如全新的 iOS 测试版特性）

工作流示例：自定义着色器（片段程序）目标：创建视觉效果（例如像素化）。步骤一：着色器代码（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); } 步骤二：加载与应用 // 加载资源 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 网格）

final paint = Paint()..shader = shader; canvas.drawRect(Offset.zero & size, paint); }

模式与模板模式一：整洁架构（分层）用例：可扩展的企业级应用。 lib/ domain/ # 实体、仓库接口（纯 Dart） entities/ repositories/ data/ # 实现（API、DB） datasources/ repositories/ models/ # DTO presentation/ # UI、控制器（Flutter） pages/ widgets/ controllers/

模式二：仓库模式（Riverpod）用例：将 API 与 UI 解耦。 @riverpod AuthRepository authRepository(AuthRepositoryRef ref) { return FirebaseAuthImpl(FirebaseAuth.instance); }

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

模式三：响应式布局（自适应）用例：支持手机、平板和桌面。 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(),
  );
}

} }

集成模式与 backend-developer：

交接：后端提供 Swagger/OpenAPI → Flutter Expert 使用 openapi_generator 构建 Dart 客户端。
协作：处理 JWT 刷新令牌（拦截器）。
工具：Dio Interceptors。

与 mobile-developer：

交接：原生开发者编写 Swift/Kotlin 插件 → Flutter Expert 用 Method Channel 包装。
协作：调试平台相关崩溃（Xcode/Android Studio）。
工具：Pigeon（类型安全互操作）。

与 ui-designer：

交接：设计师提供 Rive 动画（.riv）→ Flutter Expert 通过 rive 包集成。
协作：为非标准形状实现自定义 Painter。
工具：Rive、Flutter Shape Maker。

限制资料未提供收费、价格与具体平台支持范围等信息；上述内容仅覆盖其明确声明的开发用途、能力、模式与协作方式。

技能介绍