flutter

适用场景

当用户希望进行以下操作时，使用此技能：

• 使用 Flutter 构建跨平台移动应用、Web 应用或桌面应用
• 创建和组合 Flutter Widget（StatelessWidget、StatefulWidget）
• 实现状态管理（setState、Provider、Riverpod、Bloc）
• 在 Flutter 应用中设置导航和路由
• 配置主题、资源和特定平台的设置
• 使用平台通道与原生代码交互
• 优化 Flutter 应用性能（const Widget、Key、构建方法）
• 调试 Flutter 应用并使用热重载

如何使用此技能

工作流

1. 识别请求领域（Widget 创建、状态管理、导航、平台集成等）
2. 遵循官方指南，采用 Flutter/Dart 最佳实践
3. 按照 Flutter Widget 约定生成 Dart 代码
4. 验证 Widget 树是否正确，以及状态管理的作用域是否恰当

1. 项目设置

# Create a new Flutter project
flutter create my_app --org com.example --platforms android,ios

# Run the app with hot reload
flutter run

2. StatelessWidget 示例

import 'package:flutter/material.dart';

class UserCard extends StatelessWidget {
  final String name;
  final String email;

  const UserCard({super.key, required this.name, required this.email});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        leading: const Icon(Icons.person),
        title: Text(name),
        subtitle: Text(email),
      ),
    );
  }
}

3. 使用状态管理的 StatefulWidget

import 'package:flutter/material.dart';

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() => _count++);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('Count: $_count', style: Theme.of(context).textTheme.headlineMedium)),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

4. 导航

// Named routes
MaterialApp(
  routes: {
    '/': (context) => const HomePage(),
    '/details': (context) => const DetailsPage(),
  },
);

// Programmatic navigation
Navigator.pushNamed(context, '/details');

最佳实践

• 尽可能使用 const 构造函数，以优化重建
• 将大型 Widget 拆分为更小、可复用的组件
• 为列表项使用 Key，确保正确协调
• 选择一致的状态管理方式（大多数应用适合使用 Provider/Riverpod）
• 在 Android 和 iOS 上进行测试；明确处理平台差异
• 遵循 Flutter 性能最佳实践（避免在 build() 中执行开销大的构建操作）

资源

• 官方文档：https://docs.flutter.dev/
• Widget 目录：https://docs.flutter.dev/ui/widgets
• Pub.dev 软件包：https://pub.dev/

关键词

flutter、Dart、跨平台、Widget、StatelessWidget、StatefulWidget、Provider、Riverpod、导航、热重载、移动开发、Material Design、Cupertino