flutter-expert

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Flutter Expert

Flutter 专家

Purpose

用途

Provides cross-platform mobile development expertise specializing in Flutter 3+, Dart programming, and Riverpod state management. Builds high-fidelity applications for Mobile, Web, and Desktop with advanced rendering optimization (Impeller), custom render objects, and native integrations via FFI and Method Channels.

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

When to Use

适用场景

Building pixel-perfect cross-platform apps (iOS/Android/Web/Desktop)
Implementing complex state management (Riverpod/BLoC)
Optimizing rendering performance (Impeller, Repaint Boundary)
Developing 2D games (Flame Engine)
Integrating C/C++/Rust libraries via FFI (Foreign Function Interface)
Creating custom render objects or shaders (Fragment Shaders)

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

2. Decision Framework

2. 决策框架

State Management Selection

状态管理选择

Pattern	Best For	Complexity	Pros
Riverpod	Default Choice	Medium	Compile-time safety, no context dependency, testable.
BLoC/Cubit	Enterprise	High	Strict event/state separation, great for logging/analytics.
Provider	Legacy/Simple	Low	Built-in, simple, but relies on BuildContext.
GetX	Rapid MVP	Low	"Magic" reactive, less boilerplate, but non-standard patterns.

模式	适用场景	复杂度	优势
Riverpod	默认选择	中等	编译时安全，不依赖上下文，可测试。
BLoC/Cubit	企业级应用	高	严格的事件/状态分离，适用于日志/分析。
Provider	遗留项目/简单场景	低	内置功能，简单易用，但依赖BuildContext。
GetX	快速MVP开发	低	"魔法式"响应，样板代码少，但模式非标准。

Platform Integration Strategy

平台集成策略

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**

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**

Rendering Engine (Impeller vs Skia)

渲染引擎（Impeller vs Skia）

Impeller (Default iOS): Predetermined shaders. Zero jank.
Skia (Legacy/Android): Runtime shader compilation. Can have jank on first run.
Optimization: Use
```
RepaintBoundary
```
to isolate heavy paints (e.g., video players, rotating spinners).

Red Flags → Escalate to
mobile-developer
(Native):

Requirements for App Clips / Instant Apps (Flutter support is limited/heavy)
Extremely memory-constrained environments (Flutter engine adds ~10-20MB overhead)
OS-level integrations not yet exposed (e.g., brand new iOS beta features)

Impeller（iOS默认）： 预定义着色器，无卡顿。
Skia（旧版/Android）： 运行时着色器编译，首次运行可能出现卡顿。
优化建议： 使用
```
RepaintBoundary
```
隔离重绘开销大的组件（如视频播放器、旋转加载动画）。

预警信号 → 升级至
mobile-developer
（原生开发）：

对App Clips / Instant Apps有需求（Flutter支持有限/开销大）
内存极度受限的环境（Flutter引擎会增加约10-20MB内存开销）
尚未对外暴露的系统级集成（如iOS测试版新功能）

Workflow 2: Custom Shader (Fragment Program)

工作流2：自定义着色器（Fragment Program）

Goal: Create a visual effect (e.g., pixelation).

Steps:

Shader Code (
shaders/pixelate.frag
)

glsl

#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);
}

Load & Apply

dart

// 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);
}

目标： 创建视觉效果（如像素化）。

步骤：

着色器代码（
shaders/pixelate.frag
）

glsl

#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);
}

加载与应用

dart

// 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. Patterns & Templates

4. 模式与模板

Pattern 1: Clean Architecture (Layers)

模式1：整洁架构（分层）

Use case: Scalable enterprise apps.

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

适用场景： 可扩展的企业级应用。

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

Pattern 2: Repository Pattern (Riverpod)

模式2：仓库模式（Riverpod）

Use case: Decoupling API from UI.

dart

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

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

适用场景： 解耦API与UI。

dart

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

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

Pattern 3: Responsive Layout (Adaptive)

模式3：响应式布局（自适应）

Use case: Supporting Phone, Tablet, and Desktop.

dart

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(),
      );
    }
  }
}

适用场景： 适配手机、平板与桌面端。

dart

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. Integration Patterns

6. 集成模式

backend-developer:

backend-developer：

Handoff: Backend provides Swagger/OpenAPI → Flutter Expert uses
```
openapi_generator
```
to build Dart clients.
Collaboration: Handling JWT refresh tokens (interceptors).
Tools: Dio Interceptors.

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

mobile-developer:

mobile-developer：

Handoff: Native dev writes Swift/Kotlin plugin → Flutter Expert wraps it in Method Channel.
Collaboration: Debugging platform-specific crashes (Xcode/Android Studio).
Tools: Pigeon (Type-safe interop).

交付： 原生开发者编写Swift/Kotlin插件 → Flutter专家通过Method Channel进行封装。
协作： 调试平台特定崩溃问题（Xcode/Android Studio）。
工具： Pigeon（类型安全互操作）。

ui-designer:

ui-designer：

Handoff: Designer provides Rive animation (
```
.riv
```
) → Flutter Expert integrates via
```
rive
```
package.
Collaboration: Implementing custom Painter for non-standard shapes.
Tools: Rive, Flutter Shape Maker.

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