Flutter：为现有主题添加自定义颜色

Question

我正在使用内置的 Flutter themes，如下所示：

 return MaterialApp(
          theme: ThemeData.light().copyWith(
            primaryColor: const Color(0xFF5E975A),
            bottomAppBarColor: const Color(0xff282828),
            // ... And so on
          ),

如您所见，我正在用 copyWith 修改现有的 theme。现在假设我希望某个按钮始终具有 Color(0xFFFF0000)。有没有办法为现有主题添加新密钥？

像这样：

ThemeData.light().copyWith(
            ...
          ).addKey(myCustomColor: const Color(0xFFFF0000))

如果没有，定义自定义颜色的最佳实践方法是什么？我觉得仅仅声明一个全局静态变量并不是实现它的预期方式。

Answer 1

我仍在寻找定义 ThemeData 的最佳实践方法。目前，我已经使用了两种方法来实现自定义颜色：

1 使用 Extension

// use it with "Theme.of(context).myCustomColor"
extension CustomThemeDataExt on ThemeData {
  Color get myCustomColor {
    if(brightness == Brightness.light){
      return Color(0xFFFF0000);
    } else {
      ...
    }
  }
  ...
}

...

2 定义自定义主题

// use it with "CustomTheme.of(context).myCustomColor"
class CustomTheme {
  final BuildContext context;

  const CustomTheme(this.context);

  static CustomTheme of(BuildContext context) => CustomTheme(context);

  Color get myCustomColor {
    if(Theme.of(context).brightness == Brightness.light){
      return Color(0xFFFF0000);
    } else {
      ...
    }
  }
}

都需要导入相关文件

Answer 2

Flutter 3 更新：

Flutter 在最新版本的 Flutter 中准确地回答了这个问题。您现在可以创建 ThemeExtensions.

这看起来像这样（在定义您的 ThemeExtension 之后）：

MaterialApp(
  theme: ThemeData.light().copyWith(
    extensions: <ThemeExtension<dynamic>>[
      CustomColors.light,
    ],
  ),
  darkTheme: ThemeData.dark().copyWith(
    extensions: <ThemeExtension<dynamic>>[
      CustomColors.dark,
    ],
  ),
  // other parameters...
);

将来肯定会有更多关于此的信息，但现在请查看 this article。我从那里拿了样本。

Flutter：为现有主题添加自定义颜色

Flutter: Add custom color to existing theme

flutter

dart

flutter-layout

1 使用 Extension

2 定义自定义主题