How to Implement Dark Mode In Flutter ??

· 4 min read
How to Implement Dark Mode In Flutter
How to Implement Dark Mode In Flutter

A Flutter plugin that helps you to automatically change the theme of the app with sunrise and sunset. Just specify the light and dark theme to use, and you are all set. You can use your custom sunrise and sunset time too. In today’s article, we will go through How to Implement Dark Mode in flutter ??

How to Implement Dark Mode In Flutter ??

You can also use the available plugin day_night_theme_flutter:

How to use it?
  1. Add the latest version of the package in your pubspec.yaml
  2. Wrap the MaterialApp with DayNightTheme Widget. The easiest way, in my opinion, is by using the provider to manage the state of your app and shared_preferences to save your theme preference on a file system.
  3. By following this procedure you can save your theme so the user doesn’t have to switch them every time.

You can use the provider to set the theme. Here’s the full code:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ThemeModel>(
      create: (_) => ThemeModel(),
      child: Consumer<ThemeModel>(
        builder: (_, model, __) {
          return MaterialApp(
            theme: ThemeData.light(), // Provide light theme.
            darkTheme: ThemeData.dark(), // Provide dark theme.
            themeMode: model.mode, // Decides which theme to show. 
            home: Scaffold(
              appBar: AppBar(title: Text('Light/Dark Theme')),
              body: RaisedButton(
                onPressed: () => model.toggleMode(),
                child: Text('Toggle Theme'),
              ),
            ),
          );
        },
      ),
    );
  }
}

class ThemeModel with ChangeNotifier {
  ThemeMode _mode;
  ThemeMode get mode => _mode;
  ThemeModel({ThemeMode mode = ThemeMode.light}) : _mode = mode;

  void toggleMode() {
    _mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }

The current theme can be found using:

bool isDarkMode = MediaQuery.of(context).platformBrightness == Brightness.dark;

or

bool isDarkMode = SchedulerBinding.instance.window.platformBrightness == Brightness.dark;

You can provide the theme to the whole app using the theme for default themes, darkTheme for Dark themes.

If you don’t want to use any third-party packages or plugins, you can use ValueListenableBuilder which comes out of the box with flutter.

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

class MyApp extends StatelessWidget {
  final _notifier = ValueNotifier<ThemeModel>(ThemeModel(ThemeMode.light));

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeModel>(
      valueListenable: _notifier,
      builder: (_, model, __) {
        final mode = model.mode;
        return MaterialApp(
          theme: ThemeData.light(), // Provide light theme.
          darkTheme: ThemeData.dark(), // Provide dark theme.
          themeMode: mode, // Decides which theme to show.
          home: Scaffold(
            appBar: AppBar(title: Text('Light/Dark Theme')),
            body: RaisedButton(
              onPressed: () => _notifier.value = ThemeModel(mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light),
              child: Text('Toggle Theme'),
            ),
          ),
        );
      },
    );
  }
}

class ThemeModel with ChangeNotifier {
  final ThemeMode _mode;
  ThemeMode get mode => _mode;

  ThemeModel(this._mode);
}

We will get output like a below:

dark mode in flutter
dark mode in the flutter

Conclusion:

Thanks for reading !!!

In this article, we have been through How to implement Dark Mode in flutter ??

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

2 comments

Leave a Reply