Skill

Pass

Audit score 90

flutter-dev

Q: When should I use Riverpod vs Bloc?

Use Riverpod for dependency injection and simple state management. Use Bloc/Cubit for event-driven workflows and complex business logic that benefits from explicit event handling.

Q: How do I prevent unnecessary widget rebuilds?

Use const constructors, extract static widgets to separate classes, use ConsumerWidget instead of StatefulWidget, and leverage ref.watch(provider.select(...)) for granular rebuilds.

Q: What are the responsive layout breakpoints?

Mobile ( 1100dp). Use LayoutBuilder and flexible layouts to support all screen sizes.

Q: What testing approach should I follow?

Write widget tests for UI components, unit tests for business logic, integration tests for user flows, and use blocTest() for Bloc testing.

minimax-ai/skills

Flutter cross-platform development guide with state management, navigation, and performance optimization patterns.

Source View on skills.sh

What is flutter-dev?

Comprehensive reference for building Flutter apps with Dart, covering widget patterns, Riverpod/Bloc state management, GoRouter navigation, and performance profiling. Use when implementing state management, setting up navigation, creating custom widgets, optimizing performance, or writing tests for cross-platform mobile and web applications.

Provides widget patterns for state management (StateProvider, NotifierProvider, Bloc, FutureProvider, StreamProvider)
Covers GoRouter navigation setup with typed routes, auth guards, and deep linking
Explains performance optimization techniques including const constructors, RepaintBoundary, and isolate computation
Details responsive layout patterns with breakpoints for mobile, tablet, and desktop
Includes testing strategies for widget tests, unit tests, and Bloc tests
Offers platform-specific implementation guidance for iOS, Android, and Web

How to install flutter-dev

npx skills add https://github.com/minimax-ai/skills --skill flutter-dev

Prerequisites

Flutter 3 SDK installed
Dart knowledge
Familiarity with async/await patterns

Claude Code

Cursor

Windsurf

Cline

How to use flutter-dev

1.Review the Quick Reference tables to identify the appropriate widget pattern for your use case
2.Consult the relevant reference section (e.g., Riverpod State Management, GoRouter Navigation) for detailed implementation
3.Apply the Core Principles to your code (const constructors, immutable state, responsive breakpoints)
4.Use the Checklist to validate your implementation across widgets, state management, navigation, performance, and testing
5.Profile your app with DevTools in profile mode to verify <16ms frame times
6.Run widget and integration tests to ensure quality

Use cases

Good for

Building a new Flutter app with Riverpod state management and GoRouter navigation
Optimizing an existing Flutter app by profiling with DevTools and applying const constructors
Implementing complex state workflows using Bloc/Cubit for event-driven architecture
Creating responsive layouts that adapt to mobile, tablet, and desktop screen sizes
Setting up feature-based project structure with proper dependency injection

Who it's for

Flutter developers building cross-platform mobile and web applications
Teams implementing Riverpod or Bloc state management patterns
Developers optimizing Flutter app performance and frame rendering
QA engineers writing widget and integration tests
Mobile developers transitioning to cross-platform development

flutter-dev FAQ

When should I use Riverpod vs Bloc?

Use Riverpod for dependency injection and simple state management. Use Bloc/Cubit for event-driven workflows and complex business logic that benefits from explicit event handling.

How do I prevent unnecessary widget rebuilds?

Use const constructors, extract static widgets to separate classes, use ConsumerWidget instead of StatefulWidget, and leverage ref.watch(provider.select(...)) for granular rebuilds.

What are the responsive layout breakpoints?

Mobile (<650dp), Tablet (650-1100dp), Desktop (>1100dp). Use LayoutBuilder and flexible layouts to support all screen sizes.

How do I optimize performance for 60fps?

Profile with DevTools, target <16ms frame time, use const constructors, apply RepaintBoundary for complex animations, offload heavy computation with compute() isolates, and cache images.

What testing approach should I follow?

Write widget tests for UI components, unit tests for business logic, integration tests for user flows, and use blocTest() for Bloc testing.

Full instructions (SKILL.md)

Source of truth, from minimax-ai/skills.

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-expert by Jeff Smolinski (https://github.com/Jeffallan/claude-skills) — Flutter expert skill framework - 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
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.

Related skills

More from minimax-ai/skills and the wider catalog.

frontend-dev

minimax-ai/skills

Build production-ready frontend pages with AI-generated assets, cinematic animations, and persuasive copy.

2.5k installsAudited

fullstack-dev

minimax-ai/skills

Full-stack backend architecture and frontend-backend integration guide for building production-ready applications.

2.6k installsAudited

gif-sticker-maker

minimax-ai/skills

Convert photos into 4 animated Funko Pop-style GIF stickers with captions.

1.6k installsAudited

ios-application-dev

minimax-ai/skills

UIKit, SnapKit, and SwiftUI guide for building accessible, compliant iOS apps.

1.7k installsAudited

minimax-docx

minimax-ai/skills

Create, edit, and format DOCX documents with OpenXML SDK via CLI or C# scripts.

3.8k installsAudited

minimax-multimodal-toolkit

minimax-ai/skills

634 installs