猫哥课堂 ducafecat.com

Flutter 中的动态主题

随着Flutter应用程序的流行,应用程序的外观和感觉变得越来越重要。Flutter提供了一种灵活的方法来管理应用程序的主题。在本文中,我们将探讨如何在Flutter应用程序中实现动态主题。我们将学习如何在应用程序中指定浅色和深色主题,如何创建自定义主题以覆盖默认的Material主题,并如何根据系统首选项在运行时动态切换主题。

亮色 暗色

代码

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_dynamic_themes

大纲

  1. 介绍动态主题
  2. 指定浅色和深色主题
  3. 创建自定义主题
  4. 根据系统首选项动态切换主题

介绍动态主题

随着人们使用智能手机和其他设备的数量不断增加,为应用程序提供正确的外观和感觉变得越来越重要。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