Agent Skills › MiniMax-AI/skills › flutter-dev

flutter-dev

GitHub

Flutter跨平台开发指南，涵盖Widget模式、Riverpod/Bloc状态管理、GoRouter导航、性能优化及测试策略。提供快速参考表、核心原则与最佳实践清单，辅助构建高效稳定的移动应用。

skills/flutter-dev/SKILL.md MiniMax-AI/skills

触发场景

构建Flutter应用实现状态管理设置路由导航创建自定义组件优化渲染性能编写单元测试

安装

npx skills add MiniMax-AI/skills --skill flutter-dev -g -y

更多选项

不安装直接使用

npx skills use MiniMax-AI/skills@flutter-dev

指定 Agent (Claude Code)

npx skills add MiniMax-AI/skills --skill flutter-dev -a claude-code -g -y

安装 repo 全部 skill

npx skills add MiniMax-AI/skills --all -g -y

预览 repo 内 skill

npx skills add MiniMax-AI/skills --list

SKILL.md

Frontmatter

{
    "name": "flutter-dev",
    "license": "MIT",
    "metadata": {
        "sources": [
            "flutter-expert by Jeff Smolinski (https:\/\/github.com\/Jeffallan\/claude-skills) — Flutter expert skill framework",
            "Flutter Documentation",
            "Riverpod Documentation",
            "Bloc Library Documentation"
        ],
        "version": "1.0.0",
        "category": "mobile"
    },
    "description": "Flutter cross-platform development guide covering widget patterns, Riverpod\/Bloc state management, GoRouter navigation, performance optimization, and platform-specific implementations. Includes const optimization, responsive layouts, testing strategies, and DevTools profiling.\nUse when: building Flutter apps, implementing state management (Riverpod\/Bloc), setting up GoRouter navigation, creating custom widgets, optimizing performance, writing widget tests, cross-platform development.\n"
}

Flutter Development Guide

A practical guide for building cross-platform applications with Flutter 3 and Dart. Focuses on proven patterns, state management, and performance optimization.

Quick Reference

Widget Patterns

Purpose	Component
State management (simple)	`StateProvider` + `ConsumerWidget`
State management (complex)	`NotifierProvider` / `Bloc`
Async data	`FutureProvider` / `AsyncNotifierProvider`
Real-time streams	`StreamProvider`
Navigation	`GoRouter` + `context.go/push`
Responsive layout	`LayoutBuilder` + breakpoints
List display	`ListView.builder`
Complex scrolling	`CustomScrollView` + Slivers
Hooks	`HookWidget` + `useState/useEffect`
Forms	`Form` + `TextFormField` + validation

Performance Patterns

Purpose	Solution
Prevent rebuilds	`const` constructors
Selective updates	`ref.watch(provider.select(...))`
Isolate repaints	`RepaintBoundary`
Lazy lists	`ListView.builder`
Heavy computation	`compute()` isolate
Image caching	`cached_network_image`

Core Principles

Widget Optimization

Use const constructors wherever possible
Extract static widgets to separate const classes
Use Key for list items (ValueKey, ObjectKey)
Prefer ConsumerWidget over StatefulWidget for state

State Management

Riverpod for dependency injection and simple state
Bloc/Cubit for event-driven workflows and complex logic
Never mutate state directly (create new instances)
Use select() to minimize rebuilds

Layout

8pt spacing increments (8, 16, 24, 32, 48)
Responsive breakpoints: mobile (<650), tablet (650-1100), desktop (>1100)
Support all screen sizes with flexible layouts
Follow Material 3 / Cupertino design guidelines

Performance

Profile with DevTools before optimizing
Target <16ms frame time for 60fps
Use RepaintBoundary for complex animations
Offload heavy work with compute()

Checklist

Widget Best Practices

const constructors on all static widgets
Proper Key on list items
ConsumerWidget for state-dependent widgets
No widget building inside build() method
Extract reusable widgets to separate files

State Management

Immutable state objects
select() for granular rebuilds
Proper provider scoping
Dispose controllers and subscriptions
Handle loading/error states

Navigation

GoRouter with typed routes
Auth guards via redirect
Deep linking support
State preservation across routes

Performance

Profile mode testing (flutter run --profile)
<16ms frame rendering time
No unnecessary rebuilds (DevTools check)
Images cached and resized
Heavy computation in isolates

Testing

Widget tests for UI components
Unit tests for business logic
Integration tests for user flows
Bloc tests with blocTest()

References

Topic	Reference
Widget patterns, const optimization, responsive layout	Widget Patterns
Riverpod providers, notifiers, async state	Riverpod State Management
Bloc, Cubit, event-driven state	Bloc State Management
GoRouter setup, routes, deep linking	GoRouter Navigation
Feature-based structure, dependencies	Project Structure
Profiling, const optimization, DevTools	Performance Optimization
Widget tests, integration tests, mocking	Testing Strategies
iOS/Android/Web specific implementations	Platform Integration
Implicit/explicit animations, Hero, transitions	Animations
Dio, interceptors, error handling, caching	Networking
Form validation, FormField, input formatters	Forms
i18n, flutter_localizations, intl	Localization

Flutter, Dart, Material Design, and Cupertino are trademarks of Google LLC and Apple Inc. respectively. Riverpod, Bloc, and GoRouter are open-source packages by their respective maintainers.