Agent-Skills.md

Agent Skills: Idiomatic Flutter

Compose modern Flutter layouts and widgets idiomatically. Use when composing Flutter widget trees, managing layout constraints, or following idiomatic Flutter patterns. (triggers: lib/presentation/**/*.dart, context.mounted, SizedBox, Gap, composition, shrink)

UncategorizedID: hoangnguyen0403/agent-skills-standard/flutter-idiomatic-flutter

Repository

hoangnguyen0403/agent-skills-standard
HoangNguyen0403License: Apache-2.0
362103

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/flutter/flutter-idiomatic-flutter

Skill Files

Browse the full folder contents for flutter-idiomatic-flutter.

Download Skill

Loading file tree…

skills/flutter/flutter-idiomatic-flutter/SKILL.md

Skill Metadata

Name
flutter-idiomatic-flutter
Description
"Compose modern Flutter layouts and widgets idiomatically. Use when composing Flutter widget trees, managing layout constraints, or following idiomatic Flutter patterns. (triggers: lib/presentation/**/*.dart, context.mounted, SizedBox, Gap, composition, shrink)"

Idiomatic Flutter

Priority: P1 (OPERATIONAL)

Modern Flutter layout patterns and composition techniques.

  • Async Gaps: Check if (context.mounted) before using BuildContext after await.
  • Composition: Extract complex UI into small widgets. Avoid deep nesting or large helper methods.
  • Layout:
    • Spacing: Use Gap(n) or SizedBox over Padding for simple gaps.
    • Empty UI: Use const SizedBox.shrink().
    • Intrinsic: Avoid IntrinsicWidth/Height; use Stack + FractionallySizedBox for overlays.
  • Optimization: Use ColoredBox/Padding/DecoratedBox instead of Container when possible.
  • Themes: Use extensions for Theme.of(context) access.

Anti-Patterns

  • ❌ No if (context.mounted) after await — using BuildContext across async gaps causes crashes
  • ❌ Widget _buildHeader() { … } helper methods — extract to a const StatelessWidget for proper rebuild control and DevTools profiling
  • ❌ Accessing a controller or state directly in a widget (_controller.data) — use BLoC/Signals to decouple UI from state
  • ❌ Container(width: 0, height: 0) for empty space — use const SizedBox.shrink()