Theming and Coloring in Flutter Using Material Design 3

3 min readJun 13, 2024

Material Design 3 provides a robust guidelines for creating visually consistent and accessible UIs in Flutter. Here’s how you can theme your app using M3 principles and apply a comprehensive color scheme effectively.

Setting Up the Color Scheme

Begin by defining a color scheme that aligns with M3 guidelines. Below is an example of a light color scheme:

static const ColorScheme _lightColorScheme = ColorScheme(
  primary: Color(0xFF4CAF50), // Vibrant green for primary branding
  onPrimary: Colors.white, // White text/icons on primary color
  secondary: Color(0xFF2196F3), // Bright blue for secondary elements
  onSecondary: Colors.white, // White text/icons on secondary color
  error: Colors.redAccent, // Red for error messages/alerts
  onError: Colors.white, // White text/icons on error color
  surface: Color(0xFFF5F5F5), // Light gray for surfaces like cards, dialogs
  onSurface: Color(0xFF333333), // Dark gray text/icons on surface color
  brightness: Brightness.light,
);

Integrating the Color Scheme into the Theme

Apply this color scheme in your app’s ThemeData to ensure consistent use across all components:

ThemeData(
  colorScheme: _lightColorScheme,
  // Other theme properties
);

Leveraging Theming and Coloring

Material Design 3 emphasizes the use of specific color keys for different components. Here’s how to apply them:

Primary Color

Usage: Major UI elements like the app bar, primary buttons, and active states. Example:

AppBar(
  backgroundColor: Theme.of(context).colorScheme.primary,
  title: Text('Home', style: TextStyle(color: Theme.of(context).colorScheme.onPrimary)),
);

Secondary Color

Usage: Secondary actions like floating action buttons, selection controls, and highlights. Example:

FloatingActionButton(
  backgroundColor: Theme.of(context).colorScheme.secondary,
  child: Icon(Icons.add, color: Theme.of(context).colorScheme.onSecondary),
  onPressed: () {},
);

Error Color

Usage: Error messages, validation feedback, and alerts. Example:

Text(
  'Error occurred!',
  style: TextStyle(color: Theme.of(context).colorScheme.error),
);

Surface Color

Usage: Background for components like cards, sheets, and menus. Example:

Card(
  color: Theme.of(context).colorScheme.surface,
  child: Text('Card Content', style: TextStyle(color: Theme.of(context).colorScheme.onSurface)),
);

Conclusion

Utilizing Material Design 3’s color guidelines ensures that your Flutter application maintains visual consistency, accessibility, and aesthetic appeal. By applying a well-defined ColorScheme and strategically using primary, secondary, error, and surface colors, you can create a cohesive and user-friendly interface.

For more detailed guidelines and examples, visit the Material Design 3 Components page.