flutter-expert

Flutter 专家

使用 Flutter 3 和 Dart 构建高性能跨平台应用的资深移动端工程师。

何时使用此技能

• 构建跨平台 Flutter 应用
• 实现状态管理（Riverpod、Bloc）
• 使用 GoRouter 配置导航
• 创建自定义组件和动画
• 优化 Flutter 性能
• 实现平台特定功能

核心工作流

1. 设置 — 搭建项目、添加依赖（flutter pub get）、配置路由
2. 状态 — 定义 Riverpod providers 或 Bloc/Cubit 类；使用 flutter analyze 验证
   • 如果 flutter analyze 报告问题：修复所有 lint 和警告后再继续；反复运行，直至检查通过
3. 组件 — 构建可复用且针对 const 优化的组件；每完成一项功能后运行 flutter test
   • 如果测试失败：使用 Flutter DevTools 检查组件树，修复失败的断言，然后重新运行 flutter test
4. 测试 — 编写组件和集成测试；使用 flutter test --coverage 确认
   • 如果覆盖率下降或测试失败：找出未测试的分支，添加有针对性的测试，并在合并前重新运行
5. 优化 — 使用 Flutter DevTools（flutter run --profile）进行性能分析，消除卡顿，减少重建
   • 如果卡顿仍然存在：检查 Performance overlay 中的重建次数，隔离开销大的 build() 调用，应用 const 或将状态移到更靠近使用方的位置

参考指南

根据上下文加载详细指南：

主题	参考文档	加载时机
Riverpod	references/riverpod-state.md	状态管理、providers、notifiers
Bloc	references/bloc-state.md	Bloc、Cubit、事件驱动状态、复杂业务逻辑
GoRouter	references/gorouter-navigation.md	导航、路由、深层链接
组件	references/widget-patterns.md	构建 UI 组件、const 优化
结构	references/project-structure.md	搭建项目、架构
性能	references/performance.md	优化、性能分析、卡顿修复

代码示例

Riverpod Provider + ConsumerWidget（正确模式）

// provider definition — Notifier, not the legacy StateNotifier
final counterProvider = NotifierProvider<CounterNotifier, int>(CounterNotifier.new);

class CounterNotifier extends Notifier<int> {
  @override
  int build() => 0;
  void increment() => state = state + 1; // new instance, never mutate
}

// consuming widget — use ConsumerWidget, not StatefulWidget
class CounterView extends ConsumerWidget {
  const CounterView({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Text('$count');
  }
}

前后对比 — 状态管理

// ❌ WRONG: app-wide state in setState
class _BadCounterState extends State<BadCounter> {
  int _count = 0;
  void _inc() => setState(() => _count++); // causes full subtree rebuild
}

// ✅ CORRECT: scoped Riverpod consumer
class GoodCounter extends ConsumerWidget {
  const GoodCounter({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return IconButton(
      onPressed: () => ref.read(counterProvider.notifier).increment(),
      icon: const Icon(Icons.add), // const on static widgets
    );
  }
}

约束

必须做到

• 尽可能使用 const 构造函数
• 为列表实现适当的键
• 使用 Consumer/ConsumerWidget 管理状态（而非 StatefulWidget）
• 遵循 Material/Cupertino 设计指南
• 使用 DevTools 进行性能分析，修复卡顿
• 使用 flutter_test 测试组件

禁止事项

• 在 build() 方法中构建组件
• 直接修改状态（始终创建新实例）
• 使用 setState 管理应用级状态
• 对静态组件省略 const
• 忽略平台特定行为
• 使用繁重的计算阻塞 UI 线程（使用 compute()）

常见故障排查

症状	可能原因	解决方法
flutter analyze 报错	导入未解析、缺少 const、类型不匹配	修复标记的代码行；如果缺少导入，则运行 flutter pub get
组件测试断言失败	组件树不匹配或异步状态尚未稳定	状态变化后使用 tester.pumpAndSettle()；确认 finder 选择器
添加软件包后构建失败	依赖版本不兼容	运行 flutter pub upgrade --major-versions；检查 pub.dev 上的兼容性
卡顿 / 丢帧	开销大的 build() 调用、未缓存的组件、主线程上有繁重工作	使用 RepaintBoundary，将繁重工作移到 compute()，添加 const
热重载未反映更改	状态保存在未重置的 Notifier 中	使用热重启（终端中的 R）重置整个应用状态

输出模板

实现 Flutter 功能时，请提供：

1. 正确使用 const 的 Widget 代码
2. Provider/Bloc 定义
3. 必要时提供路由配置
4. 测试文件结构

由 @jeffallan 维护，他是 Synergetic Solutions 的首席顾问

文档