随着Flutter应用程序的流行,应用程序的外观和感觉变得越来越重要。Flutter提供了一种灵活的方法来管理应用程序的主题。在本文中,我们将探讨如何在Flutter应用程序中实现动态主题。我们将学习如何在应用程序中指定浅色和深色主题,如何创建自定义主题以覆盖默认的Material主题,并如何根据系统首选项在运行时动态切换主题。
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}); 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}); 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}); 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}); 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,请参阅我的其他博客文章。
Copyright 2023 ducafecat. All rights reserved.
微信: ducafecat, line: ducafecat,京ICP备2021009050号-3