Flutter UI Patterns
Build declarative interfaces whose widget tree reflects state clearly and remains easy to test.
Visual hierarchy, token selection, typography, color, surfaces, and aesthetic direction belong to flutter-ui-design. This skill owns implementing those decisions with maintainable widgets.
Composition
- Extract widgets around cohesive UI concepts, reuse, isolated state, or test value—not arbitrary file length.
- Prefer immutable widget configuration and
const constructors where valid.
- Keep side effects out of
build; trigger them from lifecycle-safe controllers, state objects, or explicit callbacks.
- Use the project theme and semantic design tokens instead of scattered literal styles.
- Preserve platform conventions where Material and Cupertino behavior should differ.
- Give forms explicit validation, focus, submission, and error behavior.
- Keep keys stable and purposeful; do not use random or changing keys to force rebuilds.
State boundaries
Own controllers, focus nodes, and animation controllers in the lifecycle that creates them, and dispose them there. Hoist state only when another component must coordinate it.
Load references conditionally
- Read forms and input when implementing validation, focus traversal, autofill, asynchronous submission, or field-error behavior.
- Read widget previews when adding or repairing Flutter Widget Previewer annotations and fixtures.
Verification
Test meaningful rendered states and interactions. Check text scaling, keyboard input where supported, light/dark themes, and at least the smallest and largest intended form factors.
Sources
1---2name: flutter-ui-patterns3description: Build and refactor Flutter widgets, forms with stale-safe asynchronous validation and duplicate-submit handling, widget previews, component APIs, and UI state boundaries. Use alone for form behavior over existing services; add networking or concurrency only when their infrastructure changes, and route visual polish, responsive layout, navigation, animation, and performance to their specialists.4---56# Flutter UI Patterns78Build declarative interfaces whose widget tree reflects state clearly and remains easy to test.910Visual hierarchy, token selection, typography, color, surfaces, and aesthetic direction belong to `flutter-ui-design`. This skill owns implementing those decisions with maintainable widgets.1112## Composition1314- Extract widgets around cohesive UI concepts, reuse, isolated state, or test value—not arbitrary file length.15- Prefer immutable widget configuration and `const` constructors where valid.16- Keep side effects out of `build`; trigger them from lifecycle-safe controllers, state objects, or explicit callbacks.17- Use the project theme and semantic design tokens instead of scattered literal styles.18- Preserve platform conventions where Material and Cupertino behavior should differ.19- Give forms explicit validation, focus, submission, and error behavior.20- Keep keys stable and purposeful; do not use random or changing keys to force rebuilds.2122## State boundaries2324Own controllers, focus nodes, and animation controllers in the lifecycle that creates them, and dispose them there. Hoist state only when another component must coordinate it.2526## Load references conditionally2728- Read [forms and input](references/forms-and-input.md) when implementing validation, focus traversal, autofill, asynchronous submission, or field-error behavior.29- Read [widget previews](references/widget-previews.md) when adding or repairing Flutter Widget Previewer annotations and fixtures.3031## Verification3233Test meaningful rendered states and interactions. Check text scaling, keyboard input where supported, light/dark themes, and at least the smallest and largest intended form factors.3435## Sources3637- [Flutter UI](https://docs.flutter.dev/ui)38- [Widget catalog](https://docs.flutter.dev/ui/widgets)39- [Flutter forms cookbook](https://docs.flutter.dev/cookbook/forms)40- [Flutter Widget Previewer](https://docs.flutter.dev/tools/widget-previewer)
thiennc-tesoglobal