How to implement theming with Flutter?

Theming in Flutter is primarily implemented using the ThemeData class and the Theme widget, allowing you to define a consistent look and feel across your entire application.

🎨 Implementing Theming in Flutter

1. Define ThemeData: Create one or more instances of the ThemeData class, typically for a light and a dark theme. The most important properties to set for a modern theme are:
   • colorScheme: This is the heart of Material Design 3 (M3) theming. Use ColorScheme.fromSeed() with a single seedColor to automatically generate a harmonious color palette that adheres to M3 guidelines.
   • useMaterial3: Set this to true (it’s the default since Flutter 3.16) to adopt the latest M3 components, typography, and color systems.
   • textTheme: Define the text styling (like font family, size, and weight) for various text roles (e.g., displayLarge, titleMedium, bodySmall). You can use packages like google_fonts here for custom typography.
   • Widget Themes (e.g., appBarTheme, elevatedButtonTheme): Customize the default appearance of specific widgets beyond the color scheme.
2. Apply to MaterialApp: Pass your light and dark ThemeData objects to the MaterialApp widget in your app’s root:

   MaterialApp(
     title: 'My Themed App',
     theme: lightTheme, // Your light ThemeData
     darkTheme: darkTheme, // Your dark ThemeData
     themeMode: ThemeMode.system, // Choose light, dark, or follow system setting
     // ...
   );

3. Access the Theme: Use Theme.of(context) within your widgets to access the currently active theme data. This ensures your custom widgets automatically adapt to the user’s selected theme (light or dark).

   Color primaryColor = Theme.of(context).colorScheme.primary;
   TextStyle bodyStyle = Theme.of(context).textTheme.bodyMedium;
   

4. Override Locally: To apply a different theme to a specific part of your widget tree, wrap that section in a Theme widget and pass a new or modified ThemeData instance to its data property. You can use .copyWith() on the parent theme data to only override specific attributes.

✨ Modern Themes and Designs (Material Design 3)

The most modern and recommended approach in Flutter is to embrace Material Design 3 (M3), often referred to as “Material You.” Key design aspects of modern Flutter apps built on M3 include:

• Dynamic Color: Use ColorScheme.fromSeed() to generate an entire color scheme based on a single brand color (the “seed”). This palette includes light and dark variations with accessible contrast.
• Emphasis on ColorScheme: Modern theming primarily relies on the M3 ColorScheme roles (like primary, secondary, surface, onPrimary, etc.) rather than deprecated properties like primaryColor and accentColor.
• Larger, Expressive Typography: The M3 TextTheme uses a more refined set of styles (like displayLarge, headlineMedium, titleSmall) and generally favors larger, more open typefaces for titles and headers.
• Rounded Shapes: Most M3 components, like buttons, cards, and dialogs, feature more rounded corners than the previous Material Design versions, adding a friendly, organic feel.
• Elevation and Surface Color: Components use different surface colors and subtle shadows (elevation) to create visual hierarchy, which adapts distinctively in dark mode.

For real-world modern Flutter design examples, you can look to apps that follow Google’s current design language, such as Google Pay, Google Classroom, or showcase projects featured on the Flutter website. For visual inspiration, designer communities often share modern Flutter UI concepts.

The video below demonstrates how to use the ThemeData widget to apply a theme.

This video provides a basic introduction to the ThemeData widget, which is fundamental to implementing theming in Flutter. https://www.youtube.com/watch?v=TkNG9I8g6iY

import 'package:flutter/material.dart';

@immutable
class CustomAppColors extends ThemeExtension<CustomAppColors> {
  const CustomAppColors({
    required this.brandColor,
    required this.warningIconColor,
  });

  final Color brandColor;
  final Color warningIconColor;

  // Required: Create a copy of the extension with optional new values
  @override
  CustomAppColors copyWith({
    Color? brandColor,
    Color? warningIconColor,
  }) {
    return CustomAppColors(
      brandColor: brandColor ?? this.brandColor,
      warningIconColor: warningIconColor ?? this.warningIconColor,
    );
  }

  // Required: Interpolate (transition) between two theme extensions
  @override
  CustomAppColors lerp(
    covariant ThemeExtension<CustomAppColors>? other,
    double t,
  ) {
    if (other is! CustomAppColors) {
      return this;
    }
    return CustomAppColors(
      brandColor: Color.lerp(brandColor, other.brandColor, t)!,
      warningIconColor: Color.lerp(warningIconColor, other.warningIconColor, t)!,
    );
  }
}

final lightTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  extensions: const <ThemeExtension<dynamic>>[
    CustomAppColors(
      brandColor: Colors.purple, // Light mode value
      warningIconColor: Colors.orange,
    ),
  ],
);

final darkTheme = ThemeData(
  useMaterial3: true,
  brightness: Brightness.dark,
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark),
  extensions: const <ThemeExtension<dynamic>>[
    CustomAppColors(
      brandColor: Colors.lightBlueAccent, // Dark mode value
      warningIconColor: Colors.redAccent,
    ),
  ],
);

class MyCustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 1. Retrieve the extension from the current theme (which is determined by context)
    final customColors = Theme.of(context).extension<CustomAppColors>()!;

    return Container(
      // 2. Use the contextually parameterized value
      color: customColors.brandColor, 
      child: Icon(
        Icons.warning,
        color: customColors.warningIconColor,
      ),
    );
  }
}