bighardperson/computer-science-skills-collection/flutter
Claude Code and agent skill by bighardperson/computer-science-skills-collection
- community
Checking that the SKILL.md file is still in the repository.
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.
Install
npx vskill@latest install bighardperson/computer-science-skills-collection/flutterSKILL.md
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
constconstructors wherever possible - Extract static widgets to separate const classes
- Use
Keyfor list items (ValueKey, ObjectKey) - Prefer
ConsumerWidgetoverStatefulWidgetfor 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
RepaintBoundaryfor complex animations - Offload heavy work with
compute()
Checklist
Widget Best Practices
- [ ]
constconstructors on all static widgets - [ ] Proper
Keyon list items - [ ]
ConsumerWidgetfor 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.
Security
- Security scanPassed, 100 of 100Pattern checks on the skill's files.
- Model reviewNot runA model review is scheduled for the next rescan.
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingskills/Flutter 开发/SKILL.md
Popularity
- Repository stars
- 56
- Repository forks
- 10
- 7-day trend score
- 20
Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/bighardperson/computer-science-skills-collection/flutter)