flutter-ui

name	flutter-ui
description	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.
metadata	{"author":"dhruvanbhalara"}

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 — distributed by TomeVault.