Flutter Theming | The Right Way

As light and dark theme options can be seen in almost every app today, it has become a new norm for good user experience. This article will show how to add themes to any Flutter app without using any package for every platform in an easy, maintainable, and efficient way.

Find the updated article here.

Light and dark modes in an app

Let’s start with creating the theme class.

Controll the overall app theme from this single place.

import 'package:flutter/material.dart';

class AppTheme extends ChangeNotifier {
  static final _instance = AppTheme._();

  AppTheme._();

  factory AppTheme() {
    return _instance;
  }
}

The AppTheme class extends ChangeNotifier to notify listeners whenever the theme changes, which will then update the app with the new theme. The AppTheme class is a singleton class for a single app theme state.

Add a variable to hold the current theme value in the AppTheme class.

ThemeMode _themeMode = ThemeMode.system;

ThemeMode get themeMode => _themeMode;

The _themeMode is a private variable with a getter, to avoid changing its value from outside the class. It can have one of the three values: ThemeMode.system, ThemeMode.light, or ThemeMode.dark.