Flutter Ui Design

This skill guides creation of distinctive, production-grade Flutter interfaces using shadcn_ui_flutter. It covers design thinking, component selection, and implementation patterns for building memorable, cohesive UIs.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

• •Purpose: What problem does this interface solve? Who uses it?
• •Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc.
• •Constraints: Technical requirements (Flutter, performance, accessibility).
• •Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working Flutter code using shadcn_ui that is:

• •Production-grade and functional
• •Visually striking and memorable
• •Cohesive with a clear aesthetic point-of-view
• •Meticulously refined in every detail

Flutter Design Tokens

Use semantic design tokens from the shadcn_ui theme extension:

Always use tokens - never hardcode colors or dimensions.

Shadcn UI Component Library

Form Components

Date/Time Components

Display Components

Navigation Components

Layout Components

Feedback Components

Data Components

Shadcn UI Best Practices

Composition Over Inheritance

// CORRECT - Compose existing widgets
ShadCard(
  title: Text('Settings', style: context.typo.h4),
  description: Text('Manage your preferences', style: context.typo.small),
  child: Column(
    children: [
      ShadButton.outline(onPressed: () {}, child: Text('Reset')),
      ShadButton.primary(onPressed: () {}, child: Text('Save')),
    ],
  ),
)

// INCORRECT - Never extend widgets unnecessarily
class MyCustomCard extends StatelessWidget { ... }

Theme Usage

// Use semantic colors
context.shadColors.primary
context.shadColors.muted
context.shadColors.accent
context.colors.destructive
context.colors.warning
context.colors.success

// NEVER hardcode colors
Color(0xFF0F766E)  // ❌
Colors.blue         // ❌

Typography

// Use typo tokens
context.typo.h1  // Display heading
context.typo.h2  // Large heading
context.typo.h3  // Medium heading
context.typo.h4  // Small heading
context.typo.h5  // Caption heading
context.typo.large  // Large body
context.typo.medium // Medium body (default)
context.typo.small  // Small body
context.typo.muted  // Muted/secondary text

Animation

// flutter_animate integration is built-in
// Use animated variants for micro-interactions
ShadButton(
  onPressed: () {},
  animationDuration: Duration(milliseconds: 200),
  child: Text('Submit'),
)

Flutter Motion Patterns

Implicit Animations

Explicit Animations

High-Impact Moments

• •Page load: Staggered reveals using animationDelay in flutter_animate
• •Scroll: Triggered animations via NotificationListener
• •Navigation: Hero transitions for continuity between screens

Spatial Composition

Visual Details

Performance-Sensitive Design

Anti-Patterns to Avoid

Integration Points

• •flutter-mcp-vibe-coding: For testing UIs with MCP tools
• •flutter-ui.md: Project-specific UI rules
• •api-design.md: Consistent naming conventions

References

• •shadcn_ui pub.dev: https://pub.dev/packages/shadcn_ui
• •shadcn_ui docs: https://flutter-shadcn-ui.mariuti.com/