Back to Details

flutter-expert

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

skill:flutter-expert — Cross-Platform Mobile Development with Flutter/Dart

skill:flutter-expert — 基于Flutter/Dart的跨平台移动开发

Version: 1.0.0

版本：1.0.0

Purpose

用途

Build and architect high-quality cross-platform mobile applications with Flutter and Dart. This skill covers widget composition, state management selection (Riverpod, Bloc, Provider, GetX), navigation patterns (GoRouter, auto_route), platform channel integration, performance optimization, and comprehensive testing strategies. Use when building new Flutter apps, reviewing Flutter code, or migrating between state management solutions.
构建并架构高质量的跨平台移动应用（基于Flutter和Dart）。该技能涵盖组件组合、状态管理方案选择（Riverpod、Bloc、Provider、GetX）、导航模式（GoRouter、auto_route）、平台通道集成、性能优化以及全面的测试策略。适用于构建新的Flutter应用、评审Flutter代码或在不同状态管理方案间迁移的场景。

File Structure

文件结构

skills/flutter-expert/
├── SKILL.md (this file)
└── examples.md
skills/flutter-expert/
├── SKILL.md (当前文件)
└── examples.md

Interface References

接口参考

  • Context: Loaded via ContextProvider Interface
  • Memory: Accessed via MemoryStore Interface
  • Shared Patterns: Shared Loading Patterns
  • Schemas: Validated against context_metadata.schema.json and memory_entry.schema.json
  • Context: 通过ContextProvider Interface加载
  • Memory: 通过MemoryStore Interface访问
  • 共享模式: Shared Loading Patterns
  • Schema: 依据context_metadata.schema.json和memory_entry.schema.json进行校验

Mandatory Workflow

强制工作流

IMPORTANT: Execute ALL steps in order. Do not skip any step.
重要提示: 按顺序执行所有步骤，请勿跳过任何步骤。

Step 1: Initial Analysis

步骤1：初始分析

  • Gather inputs: target platforms (iOS, Android, Web, Desktop), project type, existing codebase
  • Detect Flutter version and Dart SDK version
  • Identify state management solution (Riverpod, Bloc/Cubit, Provider, GetX, signals)
  • Identify navigation approach (GoRouter, auto_route, Navigator 2.0)
  • Detect dependency injection (get_it, injectable, riverpod)
  • Determine project structure (feature-first, layer-first, clean architecture)
  • Identify project name for memory lookup
  • 收集输入信息：目标平台（iOS、Android、Web、桌面端）、项目类型、现有代码库
  • 检测Flutter版本和Dart SDK版本
  • 识别状态管理方案（Riverpod、Bloc/Cubit、Provider、GetX、signals）
  • 识别导航方案（GoRouter、auto_route、Navigator 2.0）
  • 检测依赖注入方式（get_it、injectable、riverpod）
  • 确定项目结构（以功能为核心、以分层为核心、整洁架构）
  • 识别用于内存查找的项目名称

Step 2: Load Memory

步骤2：加载内存

Follow Standard Memory Loading with 
skill="flutter-expert"
and 
domain="engineering"
.
Load per-project memory files if they exist:
  • project_overview.md
    — Flutter/Dart versions, target platforms, key packages
  • widget_patterns.md
    — Established widget composition and reuse patterns
  • state_management.md
    — State management approach and conventions
  • platform_integrations.md
    — Platform channel usage and native integrations
遵循标准内存加载，参数为
skill="flutter-expert"
和
domain="engineering"
。
加载项目专属内存文件（若存在）：
  • project_overview.md
    — Flutter/Dart版本、目标平台、核心依赖包
  • widget_patterns.md
    — 已确立的组件组合与复用模式
  • state_management.md
    — 状态管理方案与约定
  • platform_integrations.md
    — 平台通道使用方式与原生集成方案

Step 3: Load Context

步骤3：加载上下文

Follow Standard Context Loading for the 
engineering
domain. Stay within the file budget declared in frontmatter.
针对
engineering
领域遵循标准上下文加载，请勿超出前置声明的文件预算。

Step 4: Flutter Development Core

步骤4：Flutter开发核心

Apply expert-level Flutter/Dart guidance across these dimensions:
  1. Widget Architecture
    • Composition over inheritance
    • Stateless vs StatefulWidget selection criteria
    • Custom RenderObject for performance-critical widgets
    • Widget key management (ValueKey, ObjectKey, GlobalKey)
    • BuildContext usage and InheritedWidget patterns
    • Sliver-based scrolling for complex layouts
  2. State Management
    • Riverpod: Provider types (Provider, StateProvider, FutureProvider, StreamProvider, NotifierProvider), family/autoDispose modifiers, ref patterns
    • Bloc/Cubit: Event-driven patterns, BlocObserver, multi-repository patterns, Bloc-to-Bloc communication
    • Provider: ChangeNotifier patterns, ProxyProvider, multi-provider setup
    • Selection guidance based on project complexity and team experience
  3. Navigation & Routing
    • GoRouter declarative routing, ShellRoute for nested navigation
    • Deep linking configuration (iOS Universal Links, Android App Links)
    • Route guards and redirect logic
    • Navigation state restoration
  4. Platform Integration
    • MethodChannel/EventChannel for native communication
    • Pigeon for type-safe platform channels
    • Platform-specific UI adaptation (Cupertino vs Material)
    • FFI for direct native library calls
    • Plugin development patterns
  5. Performance Optimization
    • Widget rebuild minimization (const constructors, selective rebuilds)
    • Image caching and optimization (cached_network_image)
    • List performance (ListView.builder, SliverList)
    • Isolate usage for heavy computation
    • DevTools profiling and performance overlay
    • Shader compilation jank mitigation
  6. Testing Strategy
    • Widget testing with WidgetTester
    • Golden (snapshot) testing
    • Integration testing with patrol or integration_test
    • Mocking with mocktail/mockito
    • State management testing (Bloc test, Riverpod testing)
  7. Project Structure
    • Feature-first vs layer-first organization
    • Clean Architecture implementation
    • Monorepo with Melos
    • Code generation (freezed, json_serializable, build_runner)
在以下维度应用专业级Flutter/Dart指导：
  1. 组件架构
    • 组合优于继承
    • Stateless与StatefulWidget的选择标准
    • 针对性能关键型组件使用自定义RenderObject
    • 组件Key管理（ValueKey、ObjectKey、GlobalKey）
    • BuildContext的使用与InheritedWidget模式
    • 基于Sliver的复杂布局滚动实现
  2. 状态管理
    • Riverpod: Provider类型（Provider、StateProvider、FutureProvider、StreamProvider、NotifierProvider）、family/autoDispose修饰符、ref模式
    • Bloc/Cubit: 事件驱动模式、BlocObserver、多仓库模式、Bloc间通信
    • Provider: ChangeNotifier模式、ProxyProvider、多Provider配置
    • 根据项目复杂度与团队经验提供方案选择指导
  3. 导航与路由
    • GoRouter声明式路由、ShellRoute实现嵌套导航
    • 深度链接配置（iOS Universal Links、Android App Links）
    • 路由守卫与重定向逻辑
    • 导航状态恢复
  4. 平台集成
    • 使用MethodChannel/EventChannel实现原生通信
    • 使用Pigeon实现类型安全的平台通道
    • 平台专属UI适配（Cupertino vs Material）
    • 使用FFI直接调用原生库
    • 插件开发模式
  5. 性能优化
    • 最小化组件重建（const构造函数、选择性重建）
    • 图片缓存与优化（cached_network_image）
    • 列表性能优化（ListView.builder、SliverList）
    • 使用Isolate处理重型计算
    • DevTools性能分析与性能浮层
    • 着色器编译卡顿缓解
  6. 测试策略
    • 使用WidgetTester进行组件测试
    • 快照（Golden）测试
    • 使用patrol或integration_test进行集成测试
    • 使用mocktail/mockito进行模拟测试
    • 状态管理测试（Bloc测试、Riverpod测试）
  7. 项目结构
    • 以功能为核心 vs 以分层为核心的组织方式
    • 整洁架构的实现
    • 使用Melos的单体仓库
    • 代码生成（freezed、json_serializable、build_runner）

Step 5: Generate Output

步骤5：生成输出

  • Save output to 
    /claudedocs/flutter-expert_{project}_{YYYY-MM-DD}.md
  • Follow naming conventions in 
    ../OUTPUT_CONVENTIONS.md
  • 将输出保存至
    /claudedocs/flutter-expert_{project}_{YYYY-MM-DD}.md
  • 遵循
    ../OUTPUT_CONVENTIONS.md
    中的命名规范

Step 6: Update Memory

步骤6：更新内存

Follow Standard Memory Update for 
skill="flutter-expert"
. Store any newly learned patterns, conventions, or project insights.
Update per-project memory:
  • project_overview.md: Flutter/Dart versions, packages, target platforms
  • widget_patterns.md: Custom widgets, composition patterns established
  • state_management.md: Chosen approach, conventions, patterns
  • platform_integrations.md: Native integrations, platform channels documented
针对
skill="flutter-expert"
遵循标准内存更新。存储新学到的模式、约定或项目洞察。
更新项目专属内存：
  • project_overview.md: Flutter/Dart版本、依赖包、目标平台
  • widget_patterns.md: 已确立的自定义组件、组合模式
  • state_management.md: 选定的方案、约定、模式
  • platform_integrations.md: 已记录的原生集成、平台通道

Compliance Checklist

合规性检查清单

Before completing, verify:
  • All mandatory workflow steps executed in order
  • Standard Memory Loading pattern followed (Step 2)
  • Standard Context Loading pattern followed (Step 3)
  • Flutter/Dart version and state management detected (Step 1)
  • Output saved with standard naming convention
  • Standard Memory Update pattern followed (Step 6)
完成前，请验证：
  • 所有强制工作流步骤已按顺序执行
  • 已遵循标准内存加载模式（步骤2）
  • 已遵循标准上下文加载模式（步骤3）
  • 已检测Flutter/Dart版本和状态管理方案（步骤1）
  • 输出已按标准命名规范保存
  • 已遵循标准内存更新模式（步骤6）

Version History

版本历史

VersionDateChanges
1.0.02026-02-12Initial release — Flutter/Dart cross-platform development
版本日期变更
1.0.02026-02-12初始版本 — Flutter/Dart跨平台开发