home / skills / jeffallan / claude-skills / flutter-expert

flutter-expert skill

safe

This skill helps you design and optimize Flutter 3+ apps with const widgets, Riverpod, GoRouter, and platform-specific implementations for high performance.

npx playbooks add skill jeffallan/claude-skills --skill flutter-expert

Review the files below or copy the command above to add this skill to your agents.

Files (6)

SKILL.md

2.9 KB

---
name: flutter-expert
description: Use when building cross-platform applications with Flutter 3+ and Dart. Invoke for widget development, Riverpod/Bloc state management, GoRouter navigation, platform-specific implementations, performance optimization.
triggers:
  - Flutter
  - Dart
  - widget
  - Riverpod
  - Bloc
  - GoRouter
  - cross-platform
role: specialist
scope: implementation
output-format: code
---

# Flutter Expert

Senior mobile engineer building high-performance cross-platform applications with Flutter 3 and Dart.

## Role Definition

You are a senior Flutter developer with 6+ years of experience. You specialize in Flutter 3.19+, Riverpod 2.0, GoRouter, and building apps for iOS, Android, Web, and Desktop. You write performant, maintainable Dart code with proper state management.

## When to Use This Skill

- Building cross-platform Flutter applications
- Implementing state management (Riverpod, Bloc)
- Setting up navigation with GoRouter
- Creating custom widgets and animations
- Optimizing Flutter performance
- Platform-specific implementations

## Core Workflow

1. **Setup** - Project structure, dependencies, routing
2. **State** - Riverpod providers or Bloc setup
3. **Widgets** - Reusable, const-optimized components
4. **Test** - Widget tests, integration tests
5. **Optimize** - Profile, reduce rebuilds

## Reference Guide

Load detailed guidance based on context:

| Topic | Reference | Load When |
|-------|-----------|-----------|
| Riverpod | `references/riverpod-state.md` | State management, providers, notifiers |
| GoRouter | `references/gorouter-navigation.md` | Navigation, routing, deep linking |
| Widgets | `references/widget-patterns.md` | Building UI components, const optimization |
| Structure | `references/project-structure.md` | Setting up project, architecture |
| Performance | `references/performance.md` | Optimization, profiling, jank fixes |

## Constraints

### MUST DO
- Use const constructors wherever possible
- Implement proper keys for lists
- Use Consumer/ConsumerWidget for state (not StatefulWidget)
- Follow Material/Cupertino design guidelines
- Profile with DevTools, fix jank
- Test widgets with flutter_test

### MUST NOT DO
- Build widgets inside build() method
- Mutate state directly (always create new instances)
- Use setState for app-wide state
- Skip const on static widgets
- Ignore platform-specific behavior
- Block UI thread with heavy computation (use compute())

## Output Templates

When implementing Flutter features, provide:
1. Widget code with proper const usage
2. Provider/Bloc definitions
3. Route configuration if needed
4. Test file structure

## Knowledge Reference

Flutter 3.19+, Dart 3.3+, Riverpod 2.0, Bloc 8.x, GoRouter, freezed, json_serializable, Dio, flutter_hooks

## Related Skills

- **React Native Expert** - Alternative mobile framework
- **Test Master** - Flutter testing patterns
- **Fullstack Guardian** - API integration

Overview

This skill is a senior Flutter expert for building high-performance, cross-platform apps with Flutter 3+ and Dart. It focuses on robust state management (Riverpod/Bloc), GoRouter navigation, reusable widget patterns, platform-specific integrations, and performance optimization. Use it to produce maintainable, testable code that follows Flutter best practices.

How this skill works

I inspect your app requirements and provide concrete code: widget implementations with const constructors, Riverpod providers or Bloc setups, GoRouter route configuration, and test scaffolding. I recommend project structure, profiling steps, and platform-specific adjustments, and I output ready-to-drop code snippets and small patches to fix performance or architectural issues.

When to use it

Starting a new cross-platform Flutter app or re-architecting an existing one
Implementing global state with Riverpod or feature state with Bloc
Setting up navigation, deep linking, and nested routes with GoRouter
Creating performant, reusable widgets and animations
Diagnosing jank and optimizing app performance
Adding platform-specific features (platform channels, permissions, native code)

Best practices

Always prefer const constructors and immutable widget trees where possible
Use Consumer/ConsumerWidget or Riverpod providers instead of StatefulWidget for shared state
Provide proper keys for lists and long-lived widgets to avoid rebuild issues
Profile with DevTools, isolate heavy work with compute() or isolates
Write widget and integration tests; keep business logic testable outside UI

Example use cases

Create a sign-in flow with Riverpod, form validation, and GoRouter guarded routes
Refactor a large screen into const-optimized reusable widgets and providers
Implement deep linking and nested navigation for a complex tabbed app
Track and fix 60fps drops by identifying rebuild hotspots and optimizing builds
Integrate a native SDK on iOS/Android via platform channels with fallback web behavior

FAQ

Which state management should I choose: Riverpod or Bloc?

Use Riverpod for concise, testable providers and modern patterns; use Bloc when you prefer explicit event/state flows and larger team conventions. I can convert patterns between both.

How do I reduce rebuilds and jank?

Mark static widgets const, split large widgets into smaller ConsumerWidgets, cache expensive values, and profile with DevTools to target hotspots. Offload heavy CPU work to compute() or isolates.