在自定义 Flutter 应用结构中实现 darkTheme 配置

Question

我正在开发一个具有自定义应用程序结构的 Flutter 项目，该项目不使用典型的

MaterialApp

小部件进行配置。相反，我们通过自定义

AppConfig

类来管理应用程序配置。现在，我的目标是集成一个切换按钮来在浅色和深色主题之间切换，类似于传统上在

MaterialApp

中实现的方式。如何在我们的自定义应用程序结构中实现此切换功能？

这是我的项目结构的细分：

1. AppConfig 类： 我在

   AppConfig

   中定义了一个

   config/app_config.dart

   类来管理应用程序配置。目前，它包括

   appName

   等属性和其他自定义配置。

   class AppConfig {
     final String appName;
   
     AppConfig({
       required this.appName,
     });
   }
   

2. 主要入口点： 我的主入口点 (

   main.dart

   ) 根据

   AppConfig

   提供的配置初始化应用程序。

   import 'package:flutter/material.dart';
   import 'config/app_config.dart';
   import 'config/app_init.dart';
   import 'restart_widget.dart';
   
   Future<void> main() async {
     AppConfig devAppConfig = AppConfig(
       appName: 'MedCare',
     );
     Widget app = await initializeApp(devAppConfig);
     runApp(RestartWidget(child: app));
   }
   

3. 深色主题的期望实现： 我想扩展

   AppConfig

   类以包含

   darkTheme

   属性，并在我的应用程序中全局应用此主题配置。理想情况下，我希望以反映其通常在

   darkTheme

   内完成方式的方式来实现此

   MaterialApp

   配置：

   MaterialApp(
     theme: ThemeData.light(),
     darkTheme: ThemeData.dark(),
     themeMode: ThemeMode.system, // or ThemeMode.light/dark
     home: MyHomePage(),
   );
   

4. 集成挑战： 如何修改自定义应用程序初始化过程以适应类似于

   darkTheme

   中使用的传统方法的

   MaterialApp

   配置？具体来说，我正在寻找有关如何在我的应用程序结构中全局设置和应用

   darkTheme

   的指导，而不直接依赖于

   MaterialApp

   。

我尝试扩展

AppConfig

类以包含类似于

darkTheme

中使用的

ThemeData.dark()

方法的

MaterialApp

属性。但是，我不确定如何在我的自定义应用程序初始化过程（

darkTheme

结构）中有效地集成此

main.dart

配置。

我非常感谢任何有关如何在自定义 Flutter 应用程序结构中实现和应用

darkTheme

配置而不直接使用

MaterialApp

的建议、代码示例或最佳实践。

Answer 1

考虑使用 ThemeExtension。让事情变得简单。

extension CoreThemeExtensions on BuildContext {
  TextStyle? get largeText => Theme.of(this).textTheme.displayLarge;
}

然后只需将主题应用到您的控件即可。 例如：

Text("MySampleText", style: context.largeText)

浅色/深色模式将取决于您为 MaterialApp 类设置的 themeMode 属性值。

您还可以添加一个侦听器，以侦听在亮/暗模式之间切换时的切换状态。

class AppThemeListener with ChangeNotifier {
  static bool darkMode = false;

  ThemeMode currentTheme() {
    return darkMode ? ThemeMode.dark : ThemeMode.light;
  }

  void toggleTheme() {
    darkMode = !darkMode;
    notifyListeners();
  }
}

然后在 Flutter 应用程序的应用程序组件中（您在其中指定 MaterialApp），注册监听器

class SystemAppTheme {
  static final systemThemeNotifier = AppThemeListener();
}

@override
void initState() {
  super.initState();
    
  SystemAppTheme.systemThemeNotifier.addListener(() {
    setState(() {});
  });
}

然后要在应用程序上切换主题，请调用此函数（您可以在应用程序中的任何位置调用此函数，它将自动重绘应用程序，将要使用的主题传递到组件的构建上下文中，因此您可以在 Light 和 DarkMode 之间切换）：

AppThemeListener.systemThemeNotifier.switchTheme();