在 Dart 中的 Flutter class 上设置强制变量

Question

在新的 Flutter 项目上设置多个主题。 我正在寻找通过实现接口或想法中的某些东西来更一致地做到这一点。

我目前有这个 class

/// Theme constant class
class AppTheme{
  AppTheme._();

  /// The default blue app theme
  static final ThemeData blueTheme = ThemeData(
    primaryColor: Colors.blue,
    backgroundColor: Colors.black,
  );

  /// Brown theme
  static final ThemeData brownTheme = ThemeData(
    primaryColor: Colors.green,
  );

  /// Elevation
  static final List<BoxShadow> elevation = [
    const BoxShadow(
      color: Colors.black12,
      offset: Offset(0, 9),
      blurRadius: 28,
      spreadRadius: 8,
    ),
    const BoxShadow(
      color: Colors.black12,
      offset: Offset(0, 6),
      blurRadius: 16,
    ),
    const BoxShadow(
      color: Colors.black12,
      offset: Offset(0, 3),
      blurRadius: 6,
      spreadRadius: -4,
    ),
  ];
}

我正在寻找一种方法来定义实现相同变量的 blueTheme 和 brownTheme。

在这里我们可以看到 blueTheme 有 backgroundColor 但 brown 没有，这是我的问题。

当您创建一个新的 ThemeData（例如一个新的 greenTheme 变量）时，这里是否有任何解决方案可以让模板设置必填字段？

PS：我在这里留下高程是为了向你展示它可能有其他类型，而不仅仅是 ThemeDatas

Answer 1

您可以在不想为应用程序使用颜色的地方使用 Colors.transparent。

示例：`/// 主题常量 class

class AppTheme{
  AppTheme._();

  /// The default blue app theme
  static final ThemeData blueTheme = ThemeData(
    primaryColor: Colors.blue,
    backgroundColor: Colors.black,
  );

  /// Brown theme
  static final ThemeData brownTheme = ThemeData(
    primaryColor: Colors.green,
    backgroundColor: Colors.transparent,
  );

  /// Elevation
  static final List<BoxShadow> elevation = [
    const BoxShadow(
      color: Colors.black12,
      offset: Offset(0, 9),
      blurRadius: 28,
      spreadRadius: 8,
    ),
    const BoxShadow(
      color: Colors.black12,
      offset: Offset(0, 6),
      blurRadius: 16,
    ),
    const BoxShadow(
      color: Colors.black12,
      offset: Offset(0, 3),
      blurRadius: 6,
      spreadRadius: -4,
    ),
  ];
}

`

Answer 2

好的，所以今天我找到了解决方案

我创建了一个名为AppThemeInterface的新 class 并在 ThemeData 类型中设置并在构造函数中设置它。

在尝试了几种方法来实现主题数据并重新创建工厂构造函数后，我在编译过程中出错。

这是我得到的最直接的解决方案。

class AppThemeInterface {
  late ThemeData theme;

  AppThemeInterface({
    required Color primaryColor,
    required Color backgroundColor,
  }) {
    theme = ThemeData(
          primaryColor: primaryColor,
          backgroundColor: backgroundColor,
     );
  }
}

然后将 ThemeData 类型更改为我的 AppThemeInterface 并调用“主题”变量

class AppTheme{
  AppTheme._();

  /// The default blue app theme
  static final ThemeData blueTheme = AppThemeInterface ( // <=== here
    primaryColor: Colors.blue,
    backgroundColor: Colors.black,
  ).theme;// <=== here

  /// Brown theme
  static final ThemeData brownTheme = AppThemeInterface ( // <=== here
    primaryColor: Colors.green,
    backgroundColor: Colors.transparent,
  ).theme; // <=== here
}

我不确定我的命名，但它按我的预期工作，我希望它可以帮助其他需要为 ThemeData 设置必填字段的人，这样他们就不会在创建多个主题时忘记一个变量。