Flutter 中的动态主题
随着Flutter应用程序的流行,应用程序的外观和感觉变得越来越重要。Flutter提供了一种灵活的方法来管理应用程序的主题。在本文中,我们将探讨如何在Flutter应用程序中实现动态主题。我们将学习如何在应用程序中指定浅色和深色主题,如何创建自定义主题以覆盖默认的Material主题,并如何根据系统首选项在运行时动态切换主题。
![亮色](https://ducafecat.oss-cn-beijing.aliyuncs.com/podcast/2023/04/49fa623c121412b2f3921b5293180b56.png)
![暗色](https://ducafecat.oss-cn-beijing.aliyuncs.com/podcast/2023/04/dbf31f1449319cb1209ac7696fa627f2.png)
代码
https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_dynamic_themes
大纲
- 介绍动态主题
- 指定浅色和深色主题
- 创建自定义主题
- 根据系统首选项动态切换主题
介绍动态主题
随着人们使用智能手机和其他设备的数量不断增加,为应用程序提供正确的外观和感觉变得越来越重要。Flutter应用程序的主题提供了一种灵活的方法,可以根据设备首选项动态更改外观和感觉。
指定浅色和深色主题
为了指定浅色主题,我们可以使用默认的 ThemeData
并将 light()
主题指定如下:
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData.light(),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
为了指定深色主题,我们可以将 ThemeData.dark()
指定如下:
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
创建自定义主题
在许多情况下,应用程序需要使用自定义主题。为此,我们可以创建一个单独的theme.dart
文件,并在其中列出我们的颜色偏好。
class HexColor extends Color {
static int _getColorFromHex(String hexColor) {
hexColor = hexColor.toUpperCase().replaceAll('#', '');
if (hexColor.length == 6) {
hexColor = 'FF$hexColor';
}
return int.parse(hexColor, radix: 16);
}
HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}
class ThemeClass {
static Color lightPrimaryColor = HexColor('#DF0054');
static Color darkPrimaryColor = HexColor('#480032');
static Color secondaryColor = HexColor('#FF8B6A');
static Color accentColor = HexColor('#FFD2BB');
static ThemeData lightTheme = ThemeData(
primaryColor: ThemeData.light().scaffoldBackgroundColor,
colorScheme: const ColorScheme.light()
.copyWith(primary: lightPrimaryColor, secondary: secondaryColor),
);
static ThemeData darkTheme = ThemeData(
primaryColor: ThemeData.dark().scaffoldBackgroundColor,
colorScheme: const ColorScheme.dark().copyWith(
primary: darkPrimaryColor,
),
);
}
现在,我们已经指定了自己的颜色方案,需要应用于明亮和黑暗主题。为此,我们需要按照以下步骤更改main.dart
文件中提供的“theme”和“darkTheme”值。
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
themeMode: ThemeMode.dark,
theme: ThemeClass.lightTheme,
darkTheme: ThemeClass.darkTheme,
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
根据系统首选项动态切换主题
Flutter应用程序可以根据设备首选项动态更改主题。为了实现这一点,我们可以在MaterialApp
中指定themeMode
,如下所示:
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
themeMode: ThemeMode.system,
theme: ThemeClass.lightTheme,
darkTheme: ThemeClass.darkTheme,
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
这将根据设备首选项自动切换明亮和黑暗主题。
结论
本文介绍了如何在Flutter应用程序中管理和实现动态主题。我们已经学习了指定浅色和深色主题,创建自定义主题以覆盖默认的Material主题,以及根据系统首选项在运行时动态切换主题的方法。
如果您想要深入了解Flutter,请参阅我的其他博客文章。