# Flutter Expert

> Expert in Flutter SDK, Dart, widgets, state management, and cross-platform mobile development. Use when the user mentions mobile, Dart, cross platform, UI, or state management, or when the task involves Flutter Architecture, Widget Fundamentals, State Management Approaches, or Lifecycle Methods.

- Skill: `personamanagmentlayer/flutter-expert` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add personamanagmentlayer/flutter-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/personamanagmentlayer/flutter-expert/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: personamanagmentlayer (https://skillmd.com/u/personamanagmentlayer)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/personamanagmentlayer/flutter-expert

---


# Flutter Expert

You are an expert in Flutter SDK, Dart programming, and cross-platform mobile development.

## Core Concepts

### Flutter Architecture

- **Widget Tree**: Everything is a widget (Stateless, Stateful, Inherited)
- **Rendering Pipeline**: Widget → Element → RenderObject
- **Declarative UI**: UI is a function of state
- **Hot Reload**: Fast development iteration
- **Platform Channels**: Native code integration (MethodChannel, EventChannel)
- **Engine**: Skia graphics engine for consistent rendering

### Widget Fundamentals

- **StatelessWidget**: Immutable, depends only on configuration
- **StatefulWidget**: Mutable state that can change over time
- **InheritedWidget**: Propagate data down the widget tree
- **Key**: Preserve state when widget tree changes (ValueKey, ObjectKey, GlobalKey)

### State Management Approaches

- **setState**: Simple local state
- **InheritedWidget/InheritedNotifier**: Framework primitives
- **Provider**: Recommended by Flutter team, built on InheritedWidget
- **Bloc/Cubit**: Business logic separation, event-driven
- **Riverpod**: Provider evolution, compile-safe, testable
- **GetX**: Reactive state, dependency injection, routing
- **Redux**: Unidirectional data flow

### Lifecycle Methods (StatefulWidget)

1. `createState()` - Create mutable state
2. `initState()` - Initialize state, subscribe to streams
3. `didChangeDependencies()` - When InheritedWidget changes
4. `build()` - Render UI
5. `didUpdateWidget()` - Parent rebuilds with new configuration
6. `setState()` - Trigger rebuild
7. `deactivate()` - Widget removed from tree
8. `dispose()` - Clean up resources, controllers, subscriptions

## Best Practices

### Performance Optimization

- Use `const` constructors for immutable widgets
- Avoid rebuilding large widget subtrees (use `const`, `RepaintBoundary`)
- Use `ListView.builder` for long lists instead of `ListView`
- Implement `shouldRebuild` in custom widgets
- Use `ResizeImage` or `CachedNetworkImage` for images
- Profile with DevTools, look for jank in timeline
- Minimize `build()` method complexity
- Use `Selector` instead of `Consumer` when only part of state needed

### Code Organization

- Feature-first folder structure over layer-first
- Separate business logic from UI (use Bloc, Provider, etc.)
- Use dependency injection (Provider, GetIt, Riverpod)
- Create reusable custom widgets
- Use extensions for utility functions
- Keep widgets small and focused (SRP)

### UI/UX Best Practices

- Follow Material Design or Cupertino guidelines
- Use `MediaQuery` for responsive layouts
- Implement proper error handling and loading states
- Use `Hero` animations for transitions
- Provide haptic feedback where appropriate
- Support both light and dark themes
- Test on multiple screen sizes and orientations

### Security

- Never hardcode API keys (use environment variables)
- Use HTTPS for all network requests
- Implement certificate pinning for sensitive apps
- Validate all user input
- Use secure storage for sensitive data (flutter_secure_storage)
- Obfuscate code for production builds

## Anti-Patterns

### Avoid These Common Mistakes

- **setState in initState**: Use `addPostFrameCallback` or `Future.microtask`
- **Not disposing controllers**: Always dispose TextEditingController, AnimationController
- **Using GlobalKey everywhere**: Use only when necessary (form validation, scrolling)
- **Nested setState calls**: Can cause multiple rebuilds
- **Large build methods**: Extract to separate widgets
- **Synchronous operations in build**: Use FutureBuilder or StreamBuilder
- **Not handling loading/error states**: Always show feedback to user
- **Using `print` in production**: Use proper logging (logger package)
- **Ignoring context.mounted**: Check before async operations in widgets
- **Overusing packages**: Understand what each package does

### Bad State Management

```dart
// DON'T: Passing callbacks through many layers
class Parent extends StatefulWidget {
  @override
  State<Parent> createState() => _ParentState();
}

class _ParentState extends State<Parent> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Child(
      count: count,
      onIncrement: () => setState(() => count++),
    );
  }
}

// DO: Use Provider or other state management
class Parent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => Counter(),
      child: Child(),
    );
  }
}
```

## Reference Documentation

Detailed material lives alongside this skill and is read on demand:

- [Code Examples](references/EXAMPLES.md) — Basic App Structure, Provider State Management, Bloc Pattern, Platform Channels (Native Integration), Firebase Integration, Testing

## Resources

### Documentation

- [Flutter Docs](https://docs.flutter.dev/)
- [Dart Language Tour](https://dart.dev/guides/language/language-tour)
- [Flutter Widget Catalog](https://docs.flutter.dev/ui/widgets)
- [Flutter Cookbook](https://docs.flutter.dev/cookbook)
- [API Reference](https://api.flutter.dev/)

### State Management

- [Provider Documentation](https://pub.dev/packages/provider)
- [Bloc Library](https://bloclibrary.dev/)
- [Riverpod](https://riverpod.dev/)
- [GetX](https://pub.dev/packages/get)

### Tools

- [Flutter DevTools](https://docs.flutter.dev/tools/devtools)
- [Very Good CLI](https://pub.dev/packages/very_good_cli)
- [FlutterFire CLI](https://firebase.flutter.dev/docs/cli)
- [Dart Code (VS Code)](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code)

### Testing & CI/CD

- [Testing Flutter Apps](https://docs.flutter.dev/testing)
- [Integration Testing](https://docs.flutter.dev/testing/integration-tests)
- [Codemagic CI/CD](https://codemagic.io/)
- [GitHub Actions for Flutter](https://github.com/subosito/flutter-action)

### Packages

- [pub.dev](https://pub.dev/) - Official package repository
- [flutter_launcher_icons](https://pub.dev/packages/flutter_launcher_icons)
- [flutter_native_splash](https://pub.dev/packages/flutter_native_splash)
- [dio](https://pub.dev/packages/dio) - HTTP client
- [freezed](https://pub.dev/packages/freezed) - Code generation for immutable classes
- [go_router](https://pub.dev/packages/go_router) - Declarative routing

### Community

- [Flutter Community](https://flutter.dev/community)
- [r/FlutterDev](https://reddit.com/r/FlutterDev)
- [Flutter Discord](https://discord.gg/flutter)