# Flutter UI

> Build performant, accessible UIs with strict design tokens and reusable widget patterns. Use when implementing layouts, responsive breakpoints, theming, widget extraction, or fixing common rendering issues like overflow errors. Use when this capability is needed.

- Skill: `tomevault-io/flutter-ui-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/flutter-ui-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/flutter-ui-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/flutter-ui-2

---


# 1. Performance & Rendering

-   **Const-First**: Every widget that can be `const` MUST be `const`.
-   **Lazy Rendering**: Use `SliverList.builder` or `SliverGrid.builder` for lists > 10 items.
-   **Repaint Boundaries**: Wrap complex animations in `RepaintBoundary`.
-   **Isolate Parsing**: Use `compute()` or `Isolate` for JSON > 1MB.
-   **BuildContext Safety**: Check `mounted` before using `context` across async gaps.

# 2. Design Tokens (Theming)

Use `AppColors`, `AppSpacing`, `AppRadius`, and `AppTypography`. NEVER hardcode raw values.
-   **Colors**: Use `context.colorScheme.primary` or `AppColors`. Support light/dark modes.
-   **Spacing**: Use `AppSpacing.sm` (8), `AppSpacing.md` (16), etc. Use `SizedBox` for gaps.
-   **Radius**: Use `AppRadius.md` (12) for consistent rounding.
-   **Typography**: Use `context.textTheme.bodyMedium`. Support text scaling.

# 3. Reusable Components

-   **Single Responsibility**: Each component has one clear purpose.
-   **Parameterization**: Expose parameters for customization.
-   **Complexity**: Extract widgets or code blocks used multiple times into `core/views/widgets`.
-   **Keys**: Assign `Key('feature_action_id')` to interactive widgets for test access.

# 4. Widget & Interaction Patterns

-   **Extraction**: STRICTLY prohibit private `_build*()` methods. Extract into separate widget classes.
-   **Slivers**: Prefer `CustomScrollView` with Slivers for non-trivial scrollable layouts.
-   **FAB**: Use Floating Action Buttons for primary positive actions (Add, Create).
-   **Scroll Padding**: Add dynamic bottom padding when a FAB or BottomBar is present to prevent overlap.
-   **Sheets vs Screens**: Prefer full `Scaffold` screens over `ModalBottomSheet` for complex forms.

# 5. Adaptive & Responsive Design and Common Fixes

-   **Mobile First**: Design for mobile, then adapt for tablet (`600-840dp`) and desktop (`>840dp`). Use `MediaQuery.sizeOf(context).width`.
-   **Layout Builder**: Use `LayoutBuilder` when widget rendering depends on the immediate parent's constraints, not the whole screen.
-   **Safe Area**: Always wrap main layouts in `SafeArea` to avoid device notches and system UI.
-   **Overflow Fixes**:
    -   `A RenderFlex overflowed...`: Typically means a widget is demanding more space than available in a `Row` or `Column`. Wrap the offending widget in `Expanded` or `Flexible`.
    -   `Vertical viewport was given unbounded height`: Often happens when nesting scrollable views (like `ListView` inside `Column`). Use `Expanded` on the `ListView` or set `shrinkWrap: true`.
-   **Rules**: Never lock orientation unless strictly required by a unique feature. Support keyboard navigation and hover effects for desktop users.

# 6. UI States & Accessibility

-   **States**: Always handle Loading, Error, and Empty states with clear messaging.
-   **Accessibility**: Include `Semantics` labels. Ensure 48x48 dp touch targets. WCAG AA contrast.

---
> Source: [dhruvanbhalara/skills](https://github.com/dhruvanbhalara/skills) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-05-22 -->