Flutter 暗黑模式适配

业务需求

处理暗黑模式下Flutter模式的适配工作

业务背景

混合开发,原生嵌套Flutter,原生已经有一套成熟的暗黑颜色适配规则,设计设计文档时候,会备注该颜色名称,客户端段根据该名称获取颜色
例如:文档备注文字为brandColor

- (UIColor *)brandColor {
    if (_isDark) {
        return [UIColor redColor];
    }
    return [UIColor whiteColor];
}

Flutter暗黑下适配

Flutter下面如果也有iOS这么一套适配暗黑适配就OK了,找了一圈,发现没有,有一个使用内置名称适配暗黑的方法如下

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // 配置暗黑和普通模式下textTheme得颜色
      theme: ThemeData(
        brightness: Brightness.light,
        textTheme: const TextTheme(
          subtitle1: TextStyle(
            color: Colors.red
          )
        )
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
          textTheme: const TextTheme(
            subtitle1: TextStyle(
              color: Colors.blue
            )
          )
        // textTheme:
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

使用(关注文字颜色即可)

Text( '普通模式下是蓝色,暗盒下是红色', style: Theme.of(context).textTheme.subtitle1,),

普通模式.png 暗黑模式.png

缺点

• 指定适配样式固定的名称例如:subtitle1,不好记,而且不好配合当前(客户端已有的)框架
• subtitle1这样的名称数量有限

Flutter暗黑颜色适配新方案

新建颜色管理文件:app_color_theme.dart

import 'package:flutter/material.dart';

bool isDark = false;

class YSColorTheme extends StatelessWidget {

  const YSColorTheme({Key? key,required this.child}) : super(key: key);
  final Widget child;
  @override
  Widget build(BuildContext context) {
    isDark = (Theme.of(context).brightness == Brightness.dark);
    return child;
  }
}

class YSColor {
  static Color get brandColor  {
    if(isDark) {
      return Colors.red;
    }
    return Colors.blue;
  }
}

使用YSColorTheme使得切换暗黑和普通模式的时候系统会rebuild,这样我们可以修改isDark字段,原理是InheritedWidget

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.light,
        textTheme: const TextTheme(
          subtitle1: TextStyle(
            color: Colors.blue
          )
        )
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
          textTheme: const TextTheme(
            subtitle1: TextStyle(
              color: Colors.red
            )
          )
        // textTheme:
      ),
    // 关键点
      home: const YSColorTheme(child: MyHomePage(title: 'Flutter Demo Home Page')),
    );
  }
}

Text( '普通模式下是蓝色,暗盒下是红色',style: TextStyle(color: YSColor.brandColor),),

效果和上面是一样的

Flutter暗黑图片适配方案

纯色图片可以利用上面的颜色方案,设置不同模式下得颜色

 Image(image: const AssetImage("abc.png"),color: YSColor.brandColor,)

非纯色图片的适配其实和上面是一样的,代码如下

class YSImage {
  static ImageProvider get brandImage  {
    if(isDark) {
      return const AssetImage("dark.png");
    }
    return const AssetImage("normal.png");
  }
}

这样就可以随意定义自己的一套暗黑系统,原理的话,就是context(也就是Element)会被InheritedWidget保存,主题被保存在一个就是InheritedWidget子类_InheritedTheme中,切换暗黑的时候,会将该类所依赖的所有context就行rebuild,但是我们的YSColorTheme会被首先rebuild,这样isDark就会被修改了,child重新rebuild的时候,拿到的数据就是对应主题的颜色和图片