业务需求
处理暗黑模式下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';
import 'dart:ui';
class YSColorTheme extends StatelessWidget {
final Widget Function() builder;
const YSColorTheme({Key? key,required this.builder}) : super(key: key);
@override
Widget build(BuildContext context) {
Theme.of(context);
return widget.builder();
}
}
class YSColor {
static Color get brandColor {
if(window.platformBrightness == Brightness.dark) {
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(builder: (){return 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(window.platformBrightness == Brightness.dark) {
return const AssetImage("dark.png");
}
return const AssetImage("normal.png");
}
}
这样就可以随意定义自己的一套暗黑系统,原理的话,就是context(也就是Element)会被InheritedWidget保存,主题被保存在一个就是InheritedWidget子类_InheritedTheme中,切换暗黑的时候,会将该类所依赖的所有context就行rebuild,但是我们的YSColorTheme会被首先rebuild,这样isDark就会被修改了,child重新rebuild的时候,拿到的数据就是对应主题的颜色和图片
