Dark Mode, also known as Dark Mode, is a high-contrast, or invert, display Mode that can be turned on at night to reduce fatigue, make reading easier, and save battery life to a certain extent. Support for dark color has been added to iOS and Android since iOS 13 and Android 10 (it varies by vendor, but some Android 9 also supports dark color). Strong as wechat also finally in iOS client 7.0.12, Android client 7.0.13 support dark mode, such as the webpage adaptation of dark mode will further improve the consistency of user experience.

As an advanced cross-platform framework for Flutter, the use of DarkMode is also taken into account. At the end of my last article on Flutter — changing the theme of your APP with one click — I mentioned that the Brightness attribute can be used to fit the DarkMode of the following system. We can use this directly in the darkTheme option of the MaterialApp

MaterialApp( 
    theme: ThemeData( 
        brightness: Brightness.light, 
        primaryColor: Colors.blue, 
    ), 
    darkTheme: ThemeData( 
        brightness: Brightness.dark, 
    ),
);
Copy the code

It can also be written as:

darkTheme: ThemeData.dark()
Copy the code

The advantage of writing this way is that the user does not need to set the dark/light mode separately, and can switch according to the system Settings.

But the day does not understand the night of black, some people just like a dark theme with a day, then the need for users to manually open the dark mode.

Let’s take a look at the implementation:

Manually turn on the dark mode

Using shared_preferences to save user Settings and using a Provider to manage the user’s state is a good way to do this. For more details, click on 👉 to switch to the Flutter theme — allowing your APP to change skin with one click.

Add the dependent

We add the following to the pubspec.yaml file:

provider: ^ 4.0.5
flustars: ^ 0.2.6 + 1
Copy the code

Dark mode state management class

import 'package:flustars/flustars.dart';
import 'package:flutter/material.dart';
import 'package:flutterchallenge/constant.dart';

class DarkModeProvider with ChangeNotifier {
  Dark mode 0: off 1: on 2: With the system
  int _darkMode;

  int get darkMode => _darkMode;

  void changeMode(int darkMode) async{ _darkMode = darkMode; notifyListeners(); SpUtil.putInt(SpConstant.DARK_MODE, darkMode); }}Copy the code

Pattern changes are made by the changeMode() function, notifyListeners(); Sputil.putint (spconstant.dark_mode, darkMode); Used to save user Settings.

Modify MaterialApp

Next we need to configure our state management class in the top-level container, again using MultiProvider

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(value: DarkModeProvider()),
      ],
      child: Consumer<DarkModeProvider>(
        builder: (context, darkModeProvider, _) {
          return darkModeProvider.darkMode == 2
              ? MaterialApp(
                  title: 'Flutter Demo',
                  theme: ThemeData(
                    primarySwatch: Colors.blue,
                  ),
                  darkTheme: ThemeData.dark(),
                  home: MyHomePage(title: 'Flutter Challenge Demo'),
                )
              : MaterialApp(
                  title: 'Flutter Demo',
                  theme: darkModeProvider.darkMode == 1
                      ? ThemeData.dark()
                      : ThemeData(
                          primarySwatch: Colors.blue,
                        ),
                  home: MyHomePage(title: 'Flutter Challenge Demo')); },),); }}Copy the code

If you manually control whether to enable night mode, you can set the theme of the MaterialApp to themedata.dark ().

theme: ThemeData.dark()
Copy the code

Because need to keep at the same time as the system automatically and manual switch, switch and darkTheme options and theme and the conflict, so there needs to be based on darkModeProvider. DarkMode values to render different MaterialApp, If it is manual mode according to darkModeProvider. DarkMode values to render different theme.

Go to dark mode

Then if we want to switch to dark mode, we just need to execute the following line of code.

Provider.of<DarkModeProvider>(context, listen: false).changeMode(1);
Copy the code

Where, 0 indicates light color, 1 indicates dark color, and 2 indicates following system.

Now that this article is over, let’s brainstorm, can we combine the topic selection mentioned above with the dark mode of this article? Feel free to leave your comments in the comments section.

The last

Here is a very unpleasant thing I recently encountered. In the previous article, the sample code needed to follow my public account to get it, and as a result, someone commented that I cut leeks.

I don’t know if he got used to it or what, I wrote the code myself, I never said the code was open source, why give it to you for no reason?

Say these in fact is also hope to see here readers do not develop the habit of always white whoring others, if you think my article is helpful, might as well give a thumbs up 👍 or pay attention to support.

By the way, the code for this issue is 👉 : github.com/YueYongDev/…