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
final counterProvider = StateNotifierProvider<CounterNotifier, int>(
  (ref) => CounterNotifier(),
);

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(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
热重载未反映更改	StateNotifier 中保存的状态未重置	使用热重启（终端中的 R）重置整个应用状态

输出模板

实现 Flutter 功能时，请提供：

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

文档