com um clique
flutter-ui-design
// Modern UI design guidelines for Flutter apps. Achieve refined visuals based on Material Design 3.
// Modern UI design guidelines for Flutter apps. Achieve refined visuals based on Material Design 3.
| name | flutter-ui-design |
| description | Modern UI design guidelines for Flutter apps. Achieve refined visuals based on Material Design 3. |
This skill provides guidelines to make Flutter app UIs stand out from "typical defaults" and achieve professional, impressive designs.
Roboto// 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
w300 and w800// 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),
...
),
)
easeOutCubic, easeInOutCubic// 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,
),
)
Checklist when implementing UI:
UI theming skill for applying brand designs to Flutter apps. Use when user asks to 'apply X style', 'change theme to Y', 'make it look like Z', or provides reference images for UI design.
E2E testing and mobile automation for Flutter apps. Use when creating/running tests with Maestro, Mobile MCP, and Dart MCP.
Systematic requirements gathering through AskUserQuestion. Use when starting development to clarify app specifications.
Self-review before completing tasks. Multi-perspective verification using Gemini CLI + Claude subagent.