Flutter UI Design Guidelines

Purpose

This skill provides guidelines to make Flutter app UIs stand out from "typical defaults" and achieve professional, impressive designs.

Typography

Patterns to Avoid

• Using only default Roboto
• Monotonous font weights (Regular/Bold only)
• Uniform text sizes

Recommended Approach

// Use modern fonts with Google Fonts
import 'package:google_fonts/google_fonts.dart';

// For titles: Distinctive display fonts
GoogleFonts.poppins(fontWeight: FontWeight.w700)
GoogleFonts.inter(fontWeight: FontWeight.w800)
GoogleFonts.plusJakartaSans()

// For body: Readable sans-serif
GoogleFonts.inter()
GoogleFonts.dmSans()

// Size hierarchy with contrast in mind
headlineLarge: 32sp, weight: 800
headlineMedium: 24sp, weight: 700
titleLarge: 20sp, weight: 600
bodyLarge: 16sp, weight: 400
labelSmall: 12sp, weight: 500

Font Weight Usage

• Extreme contrast: Combine w300 and w800
• Bold for headings (w600-w800), regular for body (w400)

Color & Theme

Patterns to Avoid

• Material Design default blue/purple
• Subtle, uniform color palettes
• Gray-only safe UIs

Recommended Approach

// Dark theme: Deep background + vivid accents
ColorScheme.dark(
  surface: Color(0xFF0F0F14),        // Deep dark gray
  surfaceContainerHighest: Color(0xFF1A1A23),
  primary: Color(0xFF6366F1),         // Vivid indigo
  secondary: Color(0xFF22D3EE),       // Cyan accent
  tertiary: Color(0xFFF472B6),        // Pink accent
)

// Light theme: Clean white + vivid accents
ColorScheme.light(
  surface: Color(0xFFFAFAFC),
  surfaceContainerHighest: Color(0xFFF1F5F9),
  primary: Color(0xFF4F46E5),         // Indigo
  secondary: Color(0xFF0EA5E9),       // Sky blue
  tertiary: Color(0xFFEC4899),        // Pink
)

Color Usage Points

• Dominant Color: Use one primary color boldly
• Sharp Accents: Use secondary color sparingly as accent
• Semantic Colors: Success=green, Error=red, Warning=yellow intuitively

Elevation & Depth

Patterns to Avoid

• Too flat designs
• Uniform elevation
• Overusing shadows

Recommended Approach

// Cards with subtle depth
Card(
  elevation: 0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  color: theme.colorScheme.surfaceContainerHighest,
  child: ...
)

// Soft shadow (low contrast)
BoxDecoration(
  borderRadius: BorderRadius.circular(16),
  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.04),
      blurRadius: 10,
      offset: Offset(0, 4),
    ),
  ],
)

// Glassmorphism effect
ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      color: Colors.white.withOpacity(0.1),
      child: ...
    ),
  ),
)

Motion & Animation

Patterns to Avoid

• Rigid UI without animations
• Excessive, scattered animations
• Inconsistent timing

Recommended Approach

// Page transition: Smooth fade+slide
PageRouteBuilder(
  transitionDuration: Duration(milliseconds: 300),
  pageBuilder: (_, __, ___) => DestinationPage(),
  transitionsBuilder: (_, animation, __, child) {
    return FadeTransition(
      opacity: animation,
      child: SlideTransition(
        position: Tween<Offset>(
          begin: Offset(0, 0.05),
          end: Offset.zero,
        ).animate(CurvedAnimation(
          parent: animation,
          curve: Curves.easeOutCubic,
        )),
        child: child,
      ),
    );
  },
)

// List items: Staggered Animation
AnimatedList + interval-based delays

// Tap feedback: Subtle scale
Transform.scale(
  scale: isPressed ? 0.98 : 1.0,
  child: AnimatedContainer(
    duration: Duration(milliseconds: 100),
    ...
  ),
)

Timing Guidelines

• Short operations (tap): 100-150ms
• Screen transitions: 250-350ms
• Complex animations: 400-600ms
• Curve: Base on easeOutCubic, easeInOutCubic

Layout & Spacing

Patterns to Avoid

• Cramped UI
• Irregular padding
• Insufficient spacing between elements

Recommended Approach

// 8px-based spacing system
const spacing = (
  xs: 4.0,
  sm: 8.0,
  md: 16.0,
  lg: 24.0,
  xl: 32.0,
  xxl: 48.0,
);

// Content area margins
Padding(
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),
  child: ...
)

// Card padding larger than outer
Card(
  child: Padding(
    padding: EdgeInsets.all(20),
    child: ...
  ),
)

// Gaps between elements
SizedBox(height: 16) // Between related elements
SizedBox(height: 32) // Between sections

Components

Buttons

// Primary button: Rounded corners + sufficient padding
FilledButton(
  style: FilledButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  child: Text('Action'),
)

// Outline button
OutlinedButton(
  style: OutlinedButton.styleFrom(
    side: BorderSide(color: theme.colorScheme.outline, width: 1.5),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

Input Fields

TextField(
  decoration: InputDecoration(
    filled: true,
    fillColor: theme.colorScheme.surfaceContainerHighest,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide.none,
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide(
        color: theme.colorScheme.primary,
        width: 2,
      ),
    ),
    contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
  ),
)

FAB

FloatingActionButton(
  elevation: 2,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  child: Icon(Icons.add),
)

Background

Recommended Techniques

// Gradient background
Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        theme.colorScheme.surface,
        theme.colorScheme.surface.withOpacity(0.95),
      ],
    ),
  ),
)

// Subtle pattern (dots, grid)
CustomPaint(
  painter: DotPatternPainter(
    color: theme.colorScheme.outline.withOpacity(0.05),
    spacing: 20,
  ),
)

Checklist

Checklist when implementing UI:

• Using fonts other than default
• Color palette has accent colors
• Appropriate margins/padding are set
• Interactions have feedback (animations)
• Component corner radii are unified (12-16px recommended)
• Text hierarchy (size/weight) is clear