Implementing Dynamic Theming with Material 3 Color Schemes in Flutter

Introduction

Dynamic theming is essential for modern mobile apps, allowing interfaces to adapt to user preferences, system settings, or brand guidelines. With Flutter’s support for Material 3 (M3), you can leverage the latest design tokens and color roles to build scalable, dynamic color schemes. This tutorial walks through enabling M3 in Flutter, defining custom light and dark schemes, applying theme changes at runtime, integrating system preferences and accessibility, and previewing variations during development.

Setting up Material 3 in Flutter

First, ensure your project uses Flutter 3.0 or later. In pubspec.yaml, verify the SDK constraint:

environment:
  sdk: "">=2.17.0 <3.0.0"
dependencies:
  flutter:
    sdk

Enable Material 3 in your ThemeData by setting useMaterial3: true. This opt-in makes your app reference the M3 color roles (primary, secondary, tertiary, etc.) and typography styles.

final ThemeData lightTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  brightness: Brightness.light,
);

Defining Custom Color Schemes

Material 3 introduces ColorScheme, which groups roles like primary, onPrimary, and secondary. You can generate a scheme from a seed color or define each color manually for precise control.

Using a seed:

final ColorScheme darkScheme = ColorScheme.fromSeed(
  seedColor: Colors.deepPurple,
  brightness: Brightness.dark,
);

Manual definition:

final ColorScheme customLight = ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xFF006E4A),
  onPrimary: Colors.white,
  secondary: Color(0xFF704AB3),
  onSecondary: Colors.white,
  // Define tertiary, background, surface, etc.
  background: Colors.grey[50]!,
  surface: Colors.white,
  onSurface: Colors.black,
  error: Colors.red.shade700,
  onError: Colors.white,
);

Applying Dynamic Theming at Runtime

To switch themes dynamically, manage a ThemeMode state and rebuild MaterialApp. You can use setState, Provider, Riverpod, or similar. Here’s a simple StatefulWidget example:

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode _themeMode = ThemeMode.system;

  void _toggleTheme(bool isDark) =>
      setState(() => _themeMode = isDark ? ThemeMode.dark : ThemeMode.light);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: lightTheme,
      darkTheme: darkScheme.toThemeData(),
      themeMode: _themeMode,
      home: HomeScreen(onToggle: _toggleTheme),
    );
  }
}

On your home screen, a switch or button calls _toggleTheme to update the app’s appearance instantly.

Integrating System Preferences and Accessibility

By setting themeMode: ThemeMode.system, your app automatically follows the device’s light/dark preference. Material 3 also respects high-contrast settings on Android and iOS. To respond to platform brightness changes manually, use MediaQuery.of(context).platformBrightness or listen to WidgetsBindingObserver callbacks.

@override
void didChangePlatformBrightness() {
  final brightness = WidgetsBinding.instance.window.platformBrightness;
  setState(() {
    _themeMode = brightness == Brightness.dark
        ? ThemeMode.dark
        : ThemeMode.light;
  });
}

Ensure text scales correctly by wrapping your UI in MediaQuery.textScaleFactorOf(context) checks, and test with different accessibility settings.

Testing and Previewing Theme Variations

Hot reload makes iterating on color schemes fast. Change seed colors or individual roles and instantly view results. For widget previews, use Flutter’s Theme widget in isolation or the Dart DevTools color picker. You can also build multiple flavor entries in main.dart:

void main() {
  runApp(ThemePreviewApp(
    themes: [lightTheme, darkScheme.toThemeData(), customLight.toThemeData()],
  ));
}

Cycle through themes in ThemePreviewApp to compare palettes side by side, ensuring text and icons maintain contrast.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Implementing dynamic theming with Material 3 in Flutter enhances user experience by adapting to preferences, accessibility needs, and brand requirements. By enabling M3, defining color schemes via seeds or manual roles, managing ThemeMode, respecting system settings, and leveraging hot reload for fast iteration, you’ll create polished, accessible, and future-proof mobile interfaces. Experiment with Material 3’s expanded color roles to craft unique, engaging themes in your next Flutter project.