Dark mode

This article shows how to handle Dark and Light Theme.

Download source code.

Dependencies

dependencies:
  flutter:
    sdk: flutter
  
  dynamic_theme: ^1.0.1
  // https://pub.dartlang.org/packages/dynamic_theme

Dynamic Theme

In the main.dart, we surround Material App with DynamicTheme widget, so we can change dynamically light and dark brightness.

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

import 'globals.dart' as globals;
import 'pages/home.dart';
import 'pages/dialog_popup.dart';
import 'pages/text.dart';
import 'pages/dark_mode.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget _homePage = MyHomePage(title: 'Flutter Demo Home Page');

    return DynamicTheme(
        defaultBrightness: Brightness.light,
        data: (brightness) => ThemeData(
            primarySwatch: Colors.blue,
            primaryColorBrightness:
                globals.isDarkTheme ? Brightness.dark : Brightness.light,
            brightness: brightness,
          ),
        themedWidgetBuilder: (context, theme) {
          return MaterialApp(
            title: 'Flutter Demo',
            debugShowCheckedModeBanner: false,
            theme: theme,
            home: _homePage,
            routes: <String, WidgetBuilder>{
              "/home": (BuildContext context) => _homePage,
              "/dialogpopup": (BuildContext context) => DialogPopupPage(),
              "/text": (BuildContext context) => TextPage(),
              "/darkmode": (BuildContext context) => DarkModePage(),
            },
          );
        });
  }
}

Handle Theme

Set brightness when we switch the Dark Theme option.

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

import '../drawer.dart';
import '../globals.dart' as globals;

class DarkModePage extends StatefulWidget {
  _DarkModePageState createState() => _DarkModePageState();
}

class _DarkModePageState extends State<DarkModePage> {
  void handelTheme(bool value) {
    setState(() {
      globals.isDarkTheme = value;
      globals.isDarkTheme = globals.isDarkTheme;
      if (globals.isDarkTheme) {
        DynamicTheme.of(context).setBrightness(Brightness.dark);
      } else {
        DynamicTheme.of(context).setBrightness(Brightness.light);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: globals.isDarkTheme ? null : Colors.white,
        title: Text('Dark mode'),
      ),
      drawer: DrawerMenu(),
      body: Center(
        child: ListTile(
          leading: Icon(
            Icons.color_lens,
            color: globals.isDarkTheme ? Colors.white : Color(0xFF00567E),
          ),
          title: Text(
            'Dark Theme',
          ),
          subtitle: Text(
            'Black and Grey Theme',
          ),
          trailing: Switch(
            onChanged: handelTheme,
            value: globals.isDarkTheme,
          ),
        ),
      ),
    );
  }
}