Shulou(Shulou.com)06/02 Report--

Editor to share with you how Flutter adapts to dark mode DarkMode, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

1. cause

Recently, I have been working on adapting to dark mode (DarkMode), which can also be said to implement the function of night mode.

I believe many iOS students have paid more attention recently. After all, iOS 13 pushed the update last month.

The reason for the adaptation is that it is a new feature on both iOS 13 and Android 10 systems. The purpose of adaptation is to achieve the theme of the application changes with the switching of the system theme mode, and give users a better consistent experience. Similar to it is the setting of the system language, when the system sets a certain language, the text in the application changes accordingly.

Fortunately, Flutter also provides an adaptive portal, allowing us to adapt to two platforms at a time. Although the millet mix2s in my hand is Android 9, I didn't expect it to fit.

two。 Preparatory work

First of all, the issue of standardization, the title, subtitle, split lines, various backgrounds and other colors, as well as the corresponding colors in dark mode must be standardized first. Otherwise, you are not only stunned by these colors, but also do not have a unified style of application.

3. Adaptation begins 1. Global adjustment

Flutter provides two portals in MaterialApp, theme and darkTheme, which allow us to set colors and text styles in both modes. The received ThemeData covers almost all the colors and themes used in the Material Widget. (Cupertino series components are still being adapted, so Flutter version 1.9.1 is not supported for the time being. )

By configuring theme and darkTheme, we can save a lot of judgment code. For example, my split line is two different colors in different modes. I can't judge every time I use it. By configuring the global dividerTheme, we can use Divider () or BorderSide directly.

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

Similarly, our page background color and text style can be configured in this way. Here is the final configuration in deer.

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 indicator color indicatorColor: isDarkMode? Colours.dark_app_main: Colours.app_main, / / Page background color scaffoldBackgroundColor: isDarkMode? Colours.dark_bg_color: Colors.white, / / is mainly used for Material background color canvasColor: isDarkMode? Colours.dark_material_bg: Colors.white, / / text selection color (input box copy paste menu) textSelectionColor: Colours.app_main.withAlpha (70), textSelectionHandleColor: Colours.app_main, textTheme: TextTheme (/ / TextField input text color subhead: isDarkMode? TextStyles.textDark: TextStyles.text, / / Text default text style body1: isDarkMode? TextStyles.textDark: TextStyles.text, / / used here for small text styles 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 are not used, so they do not adapt. The specific use of the above color, theme need to look at the source code and comments to know, so this is a more laborious process.

In fact, you can also take advantage of some "potholes". For example, another function text in the application is different from the main text in font size and color, and there are still many places to use, and it is troublesome to judge each time, so that you can set to unused attributes, such as subtitle in the above code. This can be done by calling Theme.of (context) .textTheme.subtitle.

Text ("keep only different information", style: const TextStyle (fontSize: 12.0,))

It should be noted that: after all, it is a global configuration, try to keep it generic, do not affect other widget is also to consider.

After this part of the configuration is complete, what you need is to "preserve differences".

For example, if you specify the same text style as the global configuration, you need to delete it.

If the text is the same color, but the font size is different. Then delete the color configuration information and keep the font size setting:

Text ("keep only different information", style: const TextStyle (fontSize: 12.0,))

Because the Text source code is through the merge method to merge the global configuration and the local configuration. In merge, it is actually implemented by calling copyWith. So you can write something like this:

Text ("keep only different information", style: Theme.of (context) .textTheme.body1.copyWith (fontSize: 12.0))

Different colors. Because the dark mode is mainly color change, you can consider the "subtitle" scheme above. If there are only a few, you can encapsulate some methods for unified judgment and processing.

two。 Local adjustment

After global configuration, most of the adaptation problems have been solved. But there may be some details to adjust, such as icons, individual text colors, and background colors. What is needed at this point is how to judge the dark mode:

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

The brightness here is the brightness specified above in the global configuration ThemeData.

Tips:

Some small solid-color icons can be modified directly using Image.asset 's color.

The textColor attribute of Button had better be handled locally, because "black and white" in the source code makes me miserable.

/ / 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;}

Add:

If the startup page needs to be adapted, consider the temporary white screen phenomenon when the application starts. (for example, the white screen at startup, the startup page has a black background, which will not be harmonious) the best way is to use the native way of Android and iOS to handle the transition between application startup and startup page.

Here I would like to introduce the simple version of the way:

Android side:

Create a new drawable-night folder under the android-> app-> src-> main-> res directory and add the launch_background.xml file.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.