flutter-ui-design

Modern UI design guidelines for Flutter apps. Achieve refined visuals based on Material Design 3.

Aller à l'installation

Dépôt: K9i-0/flutter_autonomous_template
Dernière activité de la source: 10 janvier 2026 à 01:14
Langue détectée de SKILL.md: anglais
Étoiles: 1
Forks: 1

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Retour à la recherche Retour à l’installation

name	flutter-ui-design
description	Modern UI design guidelines for Flutter apps. Achieve refined visuals based on Material Design 3.

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
)

// 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: ...
    ),
  ),
)

// 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),
    ...
  ),
)

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

// 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),
    ),
  ),
)

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),
  ),
)

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

// 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,
  ),
)