Flutter Switch between Dark and Light Theme Mode Example

Offering mobile app users the option to switch between light and dark mode has become a new necessity in mobile apps trends. At some point, you might want to include it as a feature in one of your flutter apps.

• Add the package dependency to your pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  dynamic_theme: ^1.0.1

• Use the following code in your main.dart file (A brief overview is given below the code). Also, do not miss out on the comments in the code. 

import 'package:dynamic_theme/dynamic_theme.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DynamicTheme(
        defaultBrightness: Brightness.light,
        data: (brightness) => ThemeData(
              brightness: brightness,
              //rest of the themeData
              //you can also use conditioning here based on the current
              //brightness mode (dark or light). For ex:
              // primarySwatch: brightness == Brighness.dark ? Colors.white : Colors.black
            ),
        themedWidgetBuilder: (context, theme) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Exam Prep',
            theme: theme,
            home: HomeScreen(),
          );
        });
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key key}) : super(key: key);

  void themeSwitch(context) {
    DynamicTheme.of(context).setBrightness(
        Theme.of(context).brightness == Brightness.dark
            ? Brightness.light
            : Brightness.dark);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dark & Light Theme Switcher'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            themeSwitch(context);
          },
          child: Text(Theme.of(context).brightness == Brightness.dark
              ? 'Switch to Light Mode'
              : 'Switch to Dark Mode'),
          //we can at any point check the current brightness mode (dark or light)
          // using Theme.of(context).brightness
        ),
      ),
    );
  }
}

1. You can explicitly declare brightness inside your ThemeData() as Brightness.dark or Brightness.light. The real challenge comes up when we want to switch between both during runtime. To solve that issue, we are using DynamicTheme widget which acts as a parent widget to the MaterialApp widget and helps update the brightness value dynamically.
2. At any point in your app, you can get the current brightness value by calling Theme.of(context).brightness. This may help you in showing different results based on theme mode. However, flutter tackles most of these operations under the hood.