名称: Flutter/Dart 开发描述: 用于 Flutter 应用开发和 Dart 编程的专项技能版本: 1.0.0 类别: 跨平台开发标识符: flutter-dart 状态: 活跃

Flutter/Dart 开发技能

概述

此技能为 Flutter 应用开发和 Dart 编程提供专项能力。它支持执行 Flutter CLI 命令、生成组件、配置状态管理，以及使用 Flutter DevTools 进行全面的调试。

允许使用的工具

bash - 执行 Flutter CLI、Dart 命令和 pub 操作
read - 分析 Flutter 项目文件、组件和配置
write - 生成和修改 Dart 代码及 Flutter 配置
edit - 更新现有的 Flutter 组件和配置
glob - 搜索 Dart 文件和 Flutter 资源
grep - 在 Flutter 代码库中搜索模式

能力

核心开发

Flutter CLI 操作
- 使用模板创建新的 Flutter 项目
- 在设备和模拟器上运行 Flutter 应用
- 构建发布版 APK、AAB 和 IPA 文件
- 执行 Flutter analyze 进行代码检查
- 运行 Flutter doctor 进行环境诊断
Dart 语言特性
- 生成空安全 Dart 代码
- 使用 Futures 实现 async/await 模式
- 创建带有工厂构造函数的 Dart 类
- 有效使用扩展方法
- 实现密封类和模式匹配
组件开发
- 创建自定义 StatelessWidget 和 StatefulWidget
- 实现 InheritedWidget 进行依赖注入
- 构建 CustomPainter 实现自定义图形
- 使用 LayoutBuilder 创建响应式布局
- 使用 AnimationController 实现动画

状态管理

BLoC 模式
- 生成包含事件和状态的 BLoC 类
- 使用 BlocProvider 配置 flutter_bloc
- 实现 Cubit 进行更简单的状态管理
- 设置 BlocObserver 用于调试
- 使用 hydrated_bloc 处理状态持久化
Provider 模式
- 配置 ChangeNotifierProvider
- 实现 Consumer 和 Selector 组件
- 设置 MultiProvider 管理多个状态
- 使用 ProxyProvider 处理依赖提供者
Riverpod
- 配置 ProviderScope 和 ProviderContainer
- 实现 StateNotifier 和 StateNotifierProvider
- 创建 AsyncNotifier 处理异步操作
- 使用 Riverpod 代码生成

GoRouter
- 配置声明式路由
- 使用路径参数实现深度链接
- 设置重定向守卫用于身份验证
- 使用 ShellRoute 处理嵌套导航
- 通过代码生成实现类型安全路由
AutoRoute
- 生成路由配置
- 实现嵌套路由器
- 配置路由守卫
- 处理路径参数和查询字符串

代码生成

Build Runner
- 配置 Freezed 生成不可变类
- 设置 JsonSerializable 用于 JSON 解析
- 实现 Hive 类型适配器
- 使用 Mockito 生成模拟类
- 使用 built_value 处理值类型

测试

测试框架
- 使用 test 包配置单元测试
- 使用 flutter_test 实现组件测试
- 设置集成测试
- 使用 golden 测试进行 UI 验证
- 使用 Mockito 模拟依赖

性能

性能优化
- 实现常量构造函数
- 有效使用 RepaintBoundary
- 配置图片缓存
- 使用 ListView.builder 实现懒加载
- 使用 Flutter DevTools 进行分析

目标流程

此技能与以下流程集成：

flutter-app-scaffolding.js - 项目设置和配置
cross-platform-ui-library.js - 共享组件开发
mobile-testing-strategy.js - 测试实现
mobile-performance-optimization.js - 性能调优

依赖项

必需

Flutter SDK 3.16+
Dart SDK 3.2+
安装 Flutter 扩展的 Android Studio 或 VS Code

可选

Android SDK（用于 Android 开发）
Xcode（用于 iOS 开发，仅限 macOS）
Chrome（用于 Web 开发）
Flutter DevTools

配置

项目结构

项目根目录/
├── lib/
│   ├── main.dart
│   ├── app/
│   │   ├── app.dart
│   │   └── router.dart
│   ├── features/
│   │   └── 功能名称/
│   │       ├── data/
│   │       ├── domain/
│   │       └── presentation/
│   ├── core/
│   │   ├── constants/
│   │   ├── errors/
│   │   ├── extensions/
│   │   └── utils/
│   └── shared/
│       └── widgets/
├── test/
├── integration_test/
├── assets/
├── pubspec.yaml
└── analysis_options.yaml

分析选项

# analysis_options.yaml
include: package:flutter_lints/flutter.yaml

linter:
  rules:
    prefer_const_constructors: true
    prefer_const_declarations: true
    avoid_print: true
    prefer_single_quotes: true
    require_trailing_commas: true

analyzer:
  errors:
    invalid_annotation_target: ignore
  exclude:
    - "**/*.g.dart"
    - "**/*.freezed.dart"

使用示例

初始化项目

# 创建新的 Flutter 项目
flutter create --org com.example my_app

# 创建指定平台的项目
flutter create --platforms android,ios,web my_app

# 添加依赖
flutter pub add flutter_bloc equatable
flutter pub add --dev build_runner freezed freezed_annotation

生成组件

// lib/features/home/presentation/widgets/custom_card.dart
import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {
  const CustomCard({
    super.key,
    required this.title,
    required this.subtitle,
    this.onTap,
  });

  final String title;
  final String subtitle;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Card(
      elevation: 2,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(12),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: theme.textTheme.titleMedium?.copyWith(
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 8),
              Text(
                subtitle,
                style: theme.textTheme.bodyMedium?.copyWith(
                  color: theme.colorScheme.onSurfaceVariant,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

配置 BLoC

// lib/features/auth/presentation/bloc/auth_bloc.dart
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:equatable/equatable.dart';

part 'auth_event.dart';
part 'auth_state.dart';

class AuthBloc extends Bloc<AuthEvent, AuthState> {
  AuthBloc({required this.authRepository}) : super(const AuthInitial()) {
    on<AuthLoginRequested>(_onLoginRequested);
    on<AuthLogoutRequested>(_onLogoutRequested);
  }

  final AuthRepository authRepository;

  Future<void> _onLoginRequested(
    AuthLoginRequested event,
    Emitter<AuthState> emit,
  ) async {
    emit(const AuthLoading());
    try {
      final user = await authRepository.login(
        email: event.email,
        password: event.password,
      );
      emit(AuthAuthenticated(user: user));
    } catch (e) {
      emit(AuthError(message: e.toString()));
    }
  }

  Future<void> _onLogoutRequested(
    AuthLogoutRequested event,
    Emitter<AuthState> emit,
  ) async {
    await authRepository.logout();
    emit(const AuthUnauthenticated());
  }
}

配置 GoRouter

// lib/app/router.dart
import 'package:go_router/go_router';

final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      name: 'home',
      builder: (context, state) => const HomeScreen(),
      routes: [
        GoRoute(
          path: 'details/:id',
          name: 'details',
          builder: (context, state) {
            final id = state.pathParameters['id']!;
            return DetailsScreen(id: id);
          },
        ),
      ],
    ),
    GoRoute(
      path: '/login',
      name: 'login',
      builder: (context, state) => const LoginScreen(),
    ),
  ],
  redirect: (context, state) {
    final isAuthenticated = authProvider.isAuthenticated;
    final isLoggingIn = state.matchedLocation == '/login';

    if (!isAuthenticated && !isLoggingIn) {
      return '/login';
    }
    if (isAuthenticated && isLoggingIn) {
      return '/';
    }
    return null;
  },
);

生成 Freezed 模型

// lib/features/user/domain/entities/user.dart
import 'package:freezed_annotation/freezed_annotation.dart';

part 'user.freezed.dart';
part 'user.g.dart';

@freezed
class User with _$User {
  const factory User({
    required String id,
    required String email,
    required String name,
    String? avatarUrl,
    @Default(false) bool isVerified,
  }) = _User;

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
}

质量门限

代码质量

Dart 分析器零问题
符合 flutter_lints 规范
正确使用空安全
无隐式动态类型

性能基准

应用启动时间 < 2 秒
动画和滚动期间保持 60fps
最小化组件重建
优化资源加载

测试覆盖率

单元测试覆盖率 > 80%
组件测试覆盖率 > 70%
关键流程的集成测试

错误处理

常见问题

Pub get 失败
```
flutter clean && flutter pub get
```

Build runner 冲突

dart run build_runner build --delete-conflicting-outputs

iOS CocoaPods 问题

cd ios && pod install --repo-update && cd ..

Gradle 同步失败
```
cd android && ./gradlew clean && cd ..
```

版本历史

1.0.0 - 初始版本，包含核心 Flutter/Dart 能力

Flutter/Dart开发技能Skill Flutter/DartDevelopment

名称: Flutter/Dart 开发描述: 用于 Flutter 应用开发和 Dart 编程的专项技能版本: 1.0.0 类别: 跨平台开发标识符: flutter-dart 状态: 活跃

Flutter/Dart 开发技能

概述

允许使用的工具

能力

核心开发

状态管理

导航

代码生成

测试

性能

目标流程

依赖项

必需

可选

配置

项目结构

分析选项

使用示例

初始化项目

生成组件

配置 BLoC

配置 GoRouter

生成 Freezed 模型

质量门限

代码质量

性能基准

测试覆盖率

错误处理

常见问题

相关技能

版本历史

名称: Flutter/Dart 开发 描述: 用于 Flutter 应用开发和 Dart 编程的专项技能 版本: 1.0.0 类别: 跨平台开发 标识符: flutter-dart 状态: 活跃

Flutter/Dart 开发技能

概述

允许使用的工具

能力

核心开发

状态管理

导航

代码生成

测试

性能

目标流程

依赖项

必需

可选

配置

项目结构

分析选项

使用示例

初始化项目

生成组件

配置 BLoC

配置 GoRouter

生成 Freezed 模型

质量门限

代码质量

性能基准

测试覆盖率

错误处理

常见问题

相关技能

版本历史

名称: Flutter/Dart 开发描述: 用于 Flutter 应用开发和 Dart 编程的专项技能版本: 1.0.0 类别: 跨平台开发标识符: flutter-dart 状态: 活跃