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});

  @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，请参阅我的其他博客文章。