前言
亮暗的切换是我们在开发中经常会遇到的需求，这篇文章我们以一个具体简单的例子来说说在 Flutter 中如何实现白天和夜间模式的切换。
夜间模式切换
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// 默认是亮色模式
bool _isDarkMode = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: _isDarkMode ? ThemeData.dark() : ThemeData.light(), //定义不同的 theme
home: Scaffold(
appBar: AppBar(
title: const Text('切换按亮色'),
),
body: Center(
child: Switch(
value: _isDarkMode,
onChanged: (value) {
setState(() {
_isDarkMode = value;
});
},
activeTrackColor: Colors.lightBlueAccent,
activeColor: Colors.blue,
),
),
),
);
}
}
效果如下图所示：
在 Flutter 中，主题切换是通过
ThemeData 类来实现的。ThemeData 类定义了应用的视觉样式，包括颜色、字体、按钮等的样式。通过设置不同的 ThemeData 实例，可以实现主题切换。
ThemeData 类
ThemeData 是 Flutter 中用于定义主题样式的核心类。它包含了很多属性，可以用来定制应用的视觉表现。例如：
brightness: 指定主题的亮度。它可以是Brightness.light（亮色模式）或Brightness.dark（暗色模式）。primaryColor: 应用程序的主要颜色。accentColor: 用于强调的颜色。textTheme: 定义应用程序中的文本样式。buttonTheme: 定义按钮的样式。appBarTheme: 定义应用栏的样式。
工厂构造函数
ThemeData 提供了两个工厂构造函数用于创建主题，在上面的代码中我们就快速使用了这两个主题。
ThemeData.light: 用于创建亮色模式的主题。ThemeData.dark: 用于创建暗色模式的主题。
factory ThemeData.dark({bool? useMaterial3}) => ThemeData(
brightness: Brightness.dark,
useMaterial3: useMaterial3,
);
factory ThemeData.light({bool? useMaterial3}) => ThemeData(
brightness: Brightness.light,
useMaterial3: useMaterial3,
);
在上面的代码中，我们通过 _isDarkMode 这个字段来保存主题的保存主题的状态，在同一个组件当中，所以很容易读取到这个状态，要是在不同的组件当中呢？如何在不同的组件当中分享应用的状态？这就涉及到状态管理了，下一章节，我们来详细聊聊什么是状态管理，为什么需要状态管理，以及如何使用 Riverpod 来管理应用的状态。
