SSkills导航
首页/Skills/Flutter 开发指南
编程开发低风险

Flutter 开发指南

A comprehensive guide for building cross-platform applications with Flutter 3 and Dart, covering widget patterns, state management with Riverpod/Bloc, GoRouter navigation, performance optimization, testing strategies, and platform-specific implementations.

by @skillhubv1.0.07 浏览3 下载
#Bloc#Cupertino#Dart#Flutter#GoRouter#Material Design#Riverpod
推荐方式

直接交给 AI

无需安装文件。复制一句话，让 AI 在线读取这个 Skill。

下载 Skill ZIP ↓ 查看 SKILL.md 原文 ↗
01

它能帮你做什么

先看懂，再决定要不要交给 AI。

This skill provides a practical guide for Flutter cross-platform development. It covers widget patterns including const optimization, responsive layouts with 8pt spacing, and Material 3 / Cupertino design guidelines. State management covers Riverpod for dependency injection and simple state, Bloc/Cubit for event-driven workflows, with emphasis on immutable state and selective rebuilds using select(). Navigation uses GoRouter with typed routes, auth guards, deep linking, and state preservation. Performance optimization includes DevTools profiling, RepaintBoundary for complex animations, compute() isolates for heavy work, and targeting <16ms frame time for 60fps. Testing covers widget tests, unit tests, integration tests, and bloc_test for Bloc. Also includes networking with Dio and interceptors, form validation, animations (implicit/explicit/Hero), localization with intl, and platform-specific implementations for iOS/Android/Web.

✓Building cross-platform Flutter applications
✓Implementing state management with Riverpod or Bloc
✓Setting up GoRouter navigation with typed routes and auth guards
✓Creating custom widgets with const optimization and proper Keys
✓Optimizing Flutter app performance with DevTools profiling
✓Writing widget tests, unit tests, and integration tests for Flutter apps
✓Implementing responsive layouts across mobile, tablet, and desktop
✓Setting up networking with Dio and interceptors
02

怎么交给 AI

在线读取优先，本地安装作为备选。

◎
在线读取推荐 · 不需要安装

适合能访问网页的 ChatGPT、Agent 或其他 AI。

AI Prompt请访问 https://skills.dhmip.cn/skills/skillhub/flutter-dev/SKILL.md，读取并按照该 Skill 完成任务；如当前环境支持本地安装，也可以下载该 Skill。
↓
下载安装到 Agent适合支持 Skills 的客户端

未登录时可使用公共安装文档；登录后可以按不同 AI 分开管理。

Install Prompt请根据 https://skills.dhmip.cn/install/skillhub.md，安装 @skillhub/flutter-dev。
登录后管理多个 AI →
03

兼容性与要求

安装或使用前，先确认环境是否匹配。

使用要求

  • Flutter SDK 3.x
  • Dart SDK
  • Understanding of Dart language fundamentals
  • IDE (VS Code or Android Studio) with Flutter plugins
  • Optional: DevTools for performance profiling
  • Optional: flutter_test, bloc_test packages for testing
⌘技术详情查看完整 SKILL.md 与原始内容
⌄
SKILL.mdRaw ↗

name: flutter-dev
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.
Use when: building Flutter apps, implementing state management (Riverpod/Bloc), setting up GoRouter navigation, creating custom widgets, optimizing performance, writing widget tests, cross-platform development.
license: MIT
metadata:
version: "1.0.0"
category: mobile
sources:

  • Flutter Documentation
  • Riverpod Documentation
  • Bloc Library Documentation

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](references/widget-patterns.md) |
| Riverpod providers, notifiers, async state | [Riverpod State Management](references/riverpod-state.md) |
| Bloc, Cubit, event-driven state | [Bloc State Management](references/bloc-state.md) |
| GoRouter setup, routes, deep linking | [GoRouter Navigation](references/gorouter-navigation.md) |
| Feature-based structure, dependencies | [Project Structure](references/project-structure.md) |
| Profiling, const optimization, DevTools | [Performance Optimization](references/performance.md) |
| Widget tests, integration tests, mocking | [Testing Strategies](references/testing.md) |
| iOS/Android/Web specific implementations | [Platform Integration](references/platform-specific.md) |
| Implicit/explicit animations, Hero, transitions | [Animations](references/animations.md) |
| Dio, interceptors, error handling, caching | [Networking](references/networking.md) |
| Form validation, FormField, input formatters | [Forms](references/forms.md) |
| i18n, flutter_localizations, intl | [Localization](references/localization.md) |

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.