# Flutter Dev

Flutter cross-platform development guide covering widget patterns, Riverpod/Bloc state...

- Repository: https://github.com/MiniMax-AI/skills (13760 stars)
- Category: Testing
- License: MIT
- Last updated: 2026-04-18
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add MiniMax-AI/skills --skill flutter-dev -g -a claude-code -y`
Codex: `npx skills add MiniMax-AI/skills --skill flutter-dev -g -a codex -y`
Cursor: `npx skills add MiniMax-AI/skills --skill flutter-dev -g -a cursor -y`
Gemini CLI: `npx skills add MiniMax-AI/skills --skill flutter-dev -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add MiniMax-AI/skills`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/MiniMax-AI/skills/blob/HEAD/skills/flutter-dev/SKILL.md