在 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 設置必填字段的人，這樣他們就不會在創建多個主題時忘記一個變量。