| 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.
