Flutter 3.10: Easily switch between dark and light modes in 2023

In this article, I am showing you how you can simply make your Flutter app switch between dark and light modes based on the system settings.

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase

Result

Solution

You need to define color schemes for both dark and light modes before you can use them to set the theme and the darkTheme parameters in your MaterialApp(...).

The color scheme can be created with ColorScheme.fromSeed() by specifying the brightness optimization, by default it is set to light then you need to set brightness: Brightness.dark to have it optimized for the dark mode color scheme.

By default, Flutter uses the device system mode, you can force the theme to dark, light, system using the themeMode: ThemeMode.dark parameter on your MaterialApp(...).

Code

import 'package:flutter/material.dart';

var kColorScheme = ColorScheme.fromSeed(
  brightness: Brightness.light,
  seedColor: const Color.fromARGB(255, 96, 59, 181),
);

var kDarkColorScheme = ColorScheme.fromSeed(
  brightness: Brightness.dark,
  seedColor: const Color.fromARGB(255, 96, 59, 181),
);

void main() {
  runApp(MaterialApp(
    darkTheme: ThemeData.dark().copyWith(
      colorScheme: kDarkColorScheme,
    ),
    theme: ThemeData().copyWith(
      colorScheme: kColorScheme,
    ), 
    //themeMode: ThemeMode.dark,
    home: // your home
  ));
}

Final project

https://github.com/MarienMupenda/expense-tracker/lib/main.dart