Flutter dark adaptation mode (DarkMode): Look! You want this black is black it?

1. due

Recently doing dark adaptation mode (DarkMode), it can be said to achieve the night mode function.

I believe that many of the students recently iOS are more concerned about, after all iOS 13 last month to push updated.

The reason is because in saying adaptation of the iOS 13 and Android 10 systems which belong to the new features. The purpose of adaptation is to achieve a theme with the switching system theme changes, giving the user a better experience consistency. It is provided with a system similar to the language, a language when the system is set, the text within an application changes accordingly.

Fortunately Flutter also provides adaptation of the entrance, so that we can once fit both platforms. Although my hand is Android 9 of millet mix2s, did not expect to be able to adapt.

2. Preparation

First, regulatory issues, title, subtitle, dividing lines, various background colors, patterns, and the dark color corresponding must first regulate them. Otherwise, you do not only see stars of these colors, but the application does not have a unified style.

### 3. adaptation start

1. global adjustment

Flutter provides theme and darkTheme two entrances in MaterialApp let's set the color and text style in the two modes. Received ThemeData colors and themes covered almost all Material Widget used. (Cupertino official series components are still fit in, so Flutter version 1.9.1 is not supported.)

By configuring the theme and darkTheme allows us to save a lot of judgment code, such as my line is divided in two different colors in different modes, I can not use every once in place used to judge again. By configuring the global dividerTheme, we can directly use the Divider () or BorderSide.

     ThemeData(
         dividerTheme: DividerThemeData(
            color: isDarkMode ? Colours.dark_line : Colours.line,
            space: 0.6,
            thickness: 0.6
         )
       );

Also our page background color, text style can be so configured. The following is a deer in the final finishing configuration.

ThemeData(
  errorColor: isDarkMode ? Colours.dark_red : Colours.red,
  brightness: isDarkMode ? Brightness.dark : Brightness.light,
  primaryColor: isDarkMode ? Colours.dark_app_main : Colours.app_main,
  accentColor: isDarkMode ? Colours.dark_app_main : Colours.app_main,
  // Tab指示器颜色
  indicatorColor: isDarkMode ? Colours.dark_app_main : Colours.app_main,
  // 页面背景色
  scaffoldBackgroundColor: isDarkMode ? Colours.dark_bg_color : Colors.white,
  // 主要用于Material背景色
  canvasColor: isDarkMode ? Colours.dark_material_bg : Colors.white,
  // 文字选择色（输入框复制粘贴菜单）
  textSelectionColor: Colours.app_main.withAlpha(70),
  textSelectionHandleColor: Colours.app_main,
  textTheme: TextTheme(
    // TextField输入文字颜色
    subhead: isDarkMode ? TextStyles.textDark : TextStyles.text,
    // Text默认文字样式
    body1: isDarkMode ? TextStyles.textDark : TextStyles.text,
    // 这里用于小文字样式
    subtitle: isDarkMode ? TextStyles.textDarkGray12 : TextStyles.textGray12,
  ),
  inputDecorationTheme: InputDecorationTheme(
    hintStyle: isDarkMode ? TextStyles.textHint14 : TextStyles.textDarkGray14,
  ),
  appBarTheme: AppBarTheme(
    elevation: 0.0,
    color: isDarkMode ? Colours.dark_bg_color : Colors.white,
    brightness: isDarkMode ? Brightness.dark : Brightness.light,
  ),
  dividerTheme: DividerThemeData(
    color: isDarkMode ? Colours.dark_line : Colours.line,
    space: 0.6,
    thickness: 0.6
  )
);

use:

MaterialApp (
  title: 'Flutter Deer',
  theme: getTheme(),
  darkTheme: getTheme(isDarkMode: true),
  home: TestPage()
);          

Of course, some Widget not used to, so it did not go adaptation. These color, theme specific use where it is needed to look at their own source code and comments to know, so this is a more laborious process.

In fact, here you can also use some of the "pit position", the other functions such as text within the application are not the same as the main text on the size, color, place of use are still many, then judge each use too much, so you can be provided to the unused properties, such as the above code in the subtitle. Can be accomplished by calling Theme.of (context) .textTheme.subtitle when such use.

Text(
  "仅保留不同信息",
  style: const TextStyle(
    fontSize: 12.0,
  )
)

Note that: after all, the global configuration, try to keep GM, do not affect other widget is also the place to consider.

This part of the configuration, you need a "go with the reserving differences."

For example, you specify the text style and global configuration are the same, you need to remove it.

If the text is the same color, but different size. Then delete the color configuration information retention set the font size:

Text(
  "仅保留不同信息",
  style: const TextStyle(
    fontSize: 12.0,
  )
)

Text is because the source code to the local global configuration combined by a configuration merge method. in fact, merge calls copyWith to achieve. So it can be written:

Text(
  "仅保留不同信息",
  style: Theme.of(context).textTheme.body1.copyWith(fontSize: 12.0)
)

Different colors. Mainly because of the dark color change mode, so you can consider the above "subtitle" program. If only a few, some methods may be packaged unified judgment processing.
2. The local adjustment
after the global configuration, most of the adaptation problem has been resolved. But there may be some details to be adjusted, such as icons, individual text color, background color. Then need to determine is how dark mode:

  bool isDarkMode(BuildContext context){
    return Theme.of(context).brightness == Brightness.dark;
  }

Here is the brightness above configuration ThemeData specified brightness globally.

Tips:

Some solid color small icon can be used directly to modify the color Image.asset.

Button's best attribute textColor local treatment, because the source of "black and white", I am suffering ah!

  /// The foreground color of the [button]'s text and icon.
  ///
  /// If [button] is not [MaterialButton.enabled], the value of
  /// [getDisabledTextColor] is returned. If the button is enabled and
  /// [buttonTextColor] is non-null, then [buttonTextColor] is returned.
  ///
  /// Otherwise the text color depends on the value of [getTextTheme]
  /// and [getBrightness].
  ///
  ///  * [ButtonTextTheme.normal]: [Colors.white] is used if [getBrightness]
  ///    resolves to [Brightness.dark]. [Colors.black87] is used if
  ///    [getBrightness] resolves to [Brightness.light].
  ///  * [ButtonTextTheme.accent]: [colorScheme.secondary].
  ///  * [ButtonTextTheme.primary]: If [getFillColor] is dark then [Colors.white],
  ///    otherwise if [button] is a [FlatButton] or an [OutlineButton] then
  ///    [colorScheme.primary], otherwise [Colors.black].
  Color getTextColor(MaterialButton button) {
    if (!button.enabled)
      return getDisabledTextColor(button);

    if (button.textColor != null)
      return button.textColor;

    switch (getTextTheme(button)) {
      case ButtonTextTheme.normal:
        return getBrightness(button) == Brightness.dark ? Colors.white : Colors.black87;

      case ButtonTextTheme.accent:
        return colorScheme.secondary;

      case ButtonTextTheme.primary: {
        final Color fillColor = getFillColor(button);
        final bool fillIsDark = fillColor != null
          ? ThemeData.estimateBrightnessForColor(fillColor) == Brightness.dark
          : getBrightness(button) == Brightness.dark;
        if (fillIsDark)
          return Colors.white;
        if (button is FlatButton || button is OutlineButton)
          return colorScheme.primary;
        return Colors.black;
      }
    }

    assert(false);
    return null;
  }

supplement:

If the startup page requires adaptation, then, to consider the application to start when a short black and white phenomenon. (Such as white screen at startup, start page with a black background, it will discordant) the best way is to use Android, iOS transitional approach to application start page and start a native of.

Here I introduce the simple version of the way:

Android side:

android -> app -> src -> main -> res directory under the new drawable-night folders, add launch_background.xml file.

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <color android:color="#FF18191A"/> <-- 具体的颜色色值
    </item>
</layer-list>

Thus in a dark mode, using the color corresponding to the background. (Of course, make sure your default styles to use this file)

iOS end:

To modify Background System Background Color:

### 3. Functional Expansion
If you fit well with dark pattern, in fact, can expand a little bit this function. I thought about multilingual features in the micro-channel, multi-language such functions, the default option is "follow the system", of course, you can also specify a language.

According to this idea I added in the settings of the function "night mode", the default is to follow the system, of course, you can also manually opening and closing.

Here there is a temporary problem, turn dark mode on iOS phone, when closed after dark pattern in my application, the status bar text can not be changed to black.

The main problem is still Flutter 1.9.1 version does not fit iOS 13 Status Bar growing UIStatusBarStyleDarkContent.

This problem Flutter of issues in some people feedback, and look forward to the official adaptation fix it.

These basic pattern of dark adaptation is the main content. There's nothing complicated in itself, it is a careful Lord is alive.

Having said that, and finally put a few renderings adapted for everyone to see:

Now many companies are using the project flutter, stop the pit friends do not hesitate to play Jesus in very good shape.

Flutte learning can contribute a video, private letters I receive, you can share it with learning

Lastly, I hope you can point like a wave of support! ! !