bighardperson/computer-science-skills-collection/flutter-dev

Claude Code and agent skill by bighardperson/computer-science-skills-collection

Trust tier 2
  • community
LLM review pending
Source check pending

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/flutter-dev

SKILL.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
PurposeComponent
State management (simple)StateProvider + ConsumerWidget
State management (complex)NotifierProvider / Bloc
Async dataFutureProvider / AsyncNotifierProvider
Real-time streamsStreamProvider
NavigationGoRouter + context.go/push
Responsive layoutLayoutBuilder + breakpoints
List displayListView.builder
Complex scrollingCustomScrollView + Slivers
HooksHookWidget + useState/useEffect
FormsForm + TextFormField + validation
Performance Patterns
PurposeSolution
Prevent rebuildsconst constructors
Selective updatesref.watch(provider.select(...))
Isolate repaintsRepaintBoundary
Lazy listsListView.builder
Heavy computationcompute() isolate
Image cachingcached_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

TopicReference
Widget patterns, const optimization, responsive layoutWidget Patterns
Riverpod providers, notifiers, async stateRiverpod State Management
Bloc, Cubit, event-driven stateBloc State Management
GoRouter setup, routes, deep linkingGoRouter Navigation
Feature-based structure, dependenciesProject Structure
Profiling, const optimization, DevToolsPerformance Optimization
Widget tests, integration tests, mockingTesting Strategies
iOS/Android/Web specific implementationsPlatform Integration
Implicit/explicit animations, Hero, transitionsAnimations
Dio, interceptors, error handling, cachingNetworking
Form validation, FormField, input formattersForms
i18n, flutter_localizations, intlLocalization

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

Popularity

Repository stars
62
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
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/bighardperson/computer-science-skills-collection/flutter-dev/badge)](https://verified-skill.com/skills/bighardperson/computer-science-skills-collection/flutter-dev)

Something wrong with this skill or its page? Tell us.