Flutter Style Guide

🎨 What is Flutter Styling?

Flutter styling controls the visual appearance of your app including colors, fonts, spacing, and themes. Consistent styling creates professional, beautiful apps with cohesive design language across all screens and components.


// Apply theme colors
Container(
  color: Theme.of(context).primaryColor,
  child: Text(
    'Styled Text',
    style: Theme.of(context).textTheme.headline6,
  ),
)

Styling Components

🎨

Colors & Themes

Define app-wide color schemes and themes. Use ThemeData to set primary, accent, and background colors that automatically apply throughout your entire application consistently.

✍️

Typography

Control text appearance with TextStyle properties. Set font families, sizes, weights, colors, and spacing to create readable and visually appealing text content.

📐

Spacing & Layout

Manage padding, margins, and alignment properly. Use EdgeInsets and SizedBox for consistent spacing that creates balanced, professional-looking layouts throughout your app.

🖼️

Decorations

Add borders, shadows, and gradients to widgets. BoxDecoration provides powerful styling options including rounded corners, shadows, and background effects for containers.

🔹 Theme Configuration

Set up app-wide theme in MaterialApp:

MaterialApp(
  title: 'My App',
  theme: ThemeData(
    // Primary colors
    primarySwatch: Colors.blue,
    primaryColor: Colors.blue[700],
    accentColor: Colors.orange,
    
    // Background colors
    scaffoldBackgroundColor: Colors.white,
    backgroundColor: Colors.grey[100],
    
    // Text theme
    textTheme: TextTheme(
      headline1: TextStyle(
        fontSize: 32,
        fontWeight: FontWeight.bold,
        color: Colors.black,
      ),
      headline6: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.w600,
      ),
      bodyText1: TextStyle(
        fontSize: 16,
        color: Colors.black87,
      ),
    ),
    
    // Button theme
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        primary: Colors.blue,
        padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
    ),
  ),
  home: HomePage(),
)

🔹 Dark Mode Support

Implement light and dark themes:

MaterialApp(
  title: 'My App',
  // Light theme
  theme: ThemeData(
    brightness: Brightness.light,
    primarySwatch: Colors.blue,
    scaffoldBackgroundColor: Colors.white,
  ),
  // Dark theme
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    primarySwatch: Colors.blue,
    scaffoldBackgroundColor: Colors.grey[900],
    cardColor: Colors.grey[800],
  ),
  // Use system theme mode
  themeMode: ThemeMode.system,
  home: HomePage(),
)

// Access theme in widgets
Container(
  color: Theme.of(context).scaffoldBackgroundColor,
  child: Text(
    'Adaptive Text',
    style: Theme.of(context).textTheme.bodyText1,
  ),
)

🔹 Text Styling

Apply custom text styles:

// Using TextStyle
Text(
  'Custom Styled Text',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    color: Colors.blue,
    letterSpacing: 1.2,
    wordSpacing: 2.0,
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.dashed,
    shadows: [
      Shadow(
        color: Colors.grey,
        offset: Offset(2, 2),
        blurRadius: 3,
      ),
    ],
  ),
)

// Using theme text styles
Text(
  'Headline Text',
  style: Theme.of(context).textTheme.headline6,
)

// Combining styles
Text(
  'Combined Style',
  style: Theme.of(context).textTheme.bodyText1?.copyWith(
    color: Colors.red,
    fontWeight: FontWeight.bold,
  ),
)

🔹 Container Decoration

Style containers with BoxDecoration:

Container(
  width: 200,
  height: 150,
  decoration: BoxDecoration(
    // Background color
    color: Colors.blue,
    
    // Gradient background
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    
    // Border
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
    
    // Rounded corners
    borderRadius: BorderRadius.circular(16),
    
    // Shadow
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 5,
        offset: Offset(0, 3),
      ),
    ],
    
    // Background image
    image: DecorationImage(
      image: NetworkImage('https://example.com/bg.jpg'),
      fit: BoxFit.cover,
    ),
  ),
  child: Center(
    child: Text('Decorated Container'),
  ),
)

🔹 Custom Fonts

Add and use custom fonts in your app:

🔸 Add fonts to pubspec.yaml

# pubspec.yaml
flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto-Regular.ttf
        - asset: fonts/Roboto-Bold.ttf
          weight: 700
    - family: Pacifico
      fonts:
        - asset: fonts/Pacifico-Regular.ttf

🔸 Use custom fonts

// In theme
MaterialApp(
  theme: ThemeData(
    fontFamily: 'Roboto',
  ),
)

// In specific text
Text(
  'Custom Font Text',
  style: TextStyle(
    fontFamily: 'Pacifico',
    fontSize: 24,
  ),
)

🔹 Spacing and Padding

Control spacing between and within widgets:

// Padding widget
Padding(
  padding: EdgeInsets.all(16),
  child: Text('Padded text'),
)

// Different padding on each side
Padding(
  padding: EdgeInsets.only(
    left: 16,
    top: 8,
    right: 16,
    bottom: 8,
  ),
  child: Text('Custom padding'),
)

// Symmetric padding
Padding(
  padding: EdgeInsets.symmetric(
    horizontal: 20,
    vertical: 10,
  ),
  child: Text('Symmetric padding'),
)

// SizedBox for spacing
Column(
  children: [
    Text('First item'),
    SizedBox(height: 16),
    Text('Second item'),
    SizedBox(height: 24),
    Text('Third item'),
  ],
)

// Container with margin and padding
Container(
  margin: EdgeInsets.all(16),
  padding: EdgeInsets.all(12),
  child: Text('Margin and padding'),
)

🔹 Button Styling

Customize button appearance:

// Styled ElevatedButton
ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(30),
    ),
    elevation: 5,
    shadowColor: Colors.blue.withOpacity(0.5),
  ),
  child: Text('Custom Button'),
)

// Styled OutlinedButton
OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    primary: Colors.blue,
    side: BorderSide(color: Colors.blue, width: 2),
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('Outlined Button'),
)

// Custom styled button
Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.purple, Colors.blue],
    ),
    borderRadius: BorderRadius.circular(25),
  ),
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      primary: Colors.transparent,
      shadowColor: Colors.transparent,
      padding: EdgeInsets.symmetric(horizontal: 40, vertical: 15),
    ),
    child: Text('Gradient Button'),
  ),
)

🔹 Card Styling

Create beautiful card designs:

Card(
  elevation: 8,
  shadowColor: Colors.blue.withOpacity(0.3),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  margin: EdgeInsets.all(16),
  child: Container(
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(16),
      gradient: LinearGradient(
        colors: [Colors.blue[50]!, Colors.white],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Icon(Icons.star, color: Colors.amber, size: 28),
            SizedBox(width: 8),
            Text(
              'Featured Card',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
        SizedBox(height: 12),
        Text(
          'This is a beautifully styled card with gradient background and custom styling.',
          style: TextStyle(fontSize: 14, color: Colors.grey[700]),
        ),
      ],
    ),
  ),
)