在 Flutter 中为 ThemeData 添加自定义属性

Question

我需要color根据主题更改小部件。我有ThemeData明暗主题分开。现在是否可以添加自定义属性，ThemeData以便我可以根据主题更改小部件的颜色并使用该自定义属性？

Answer 1

Flutter 最近引入了ThemeExtensions（感谢@guilherme-matuella的PR 链接！）

通过以下主要 Flutter 存储库中的示例，您可以很好地了解如何使用该功能：

return MaterialApp(
  title: MyApp._title,
  theme: ThemeData.light().copyWith(
    extensions: <ThemeExtension<dynamic>>[
      const MyColors(
        brandColor: Color(0xFF1E88E5),
        danger: Color(0xFFE53935),
      ),
    ],
  ),
  darkTheme: ThemeData.dark().copyWith(
    extensions: <ThemeExtension<dynamic>>[
      const MyColors(
        brandColor: Color(0xFF90CAF9),
        danger: Color(0xFFEF9A9A),
      ),
    ],
  ),
  themeMode: isLightTheme ? ThemeMode.light : ThemeMode.dark,
  home: Home(
    isLightTheme: isLightTheme,
    toggleTheme: toggleTheme,
  ),
);

您稍后可以在小部件中检索它，如下所示：
final MyColors myColors = Theme.of(context).extension<MyColors>();

Answer 2

可悲的是，您似乎根本不能- 鉴于他们的建议，Flutter 团队似乎对添加此内容不感兴趣。

我认为这是一个主要缺陷，因为我们无法从Theme.of(context)自动更新所有Widget消耗 this 的内容中受益ThemeData。

虽然有些人可能会说您可以使用扩展来添加新属性，但您实际上不知道如何区分多个ThemeData属性（除非您可以使用某些属性，例如Brightness，但我认为这样做太笨拙且不可靠）。

另一种方法是创建另一个InheritedWidget（就像他们在上面提到的问题中所说的那样）来处理您的自定义主题属性。

Answer 3

ThemeData我们可以通过函数进行扩展，而不是添加自定义属性extension。例如，如果我们需要颜色的自定义属性，我们可以extension在 上添加函数ColorScheme。Color依赖项现已移至Themedata.

// checking brightness to support dynamic themeing
extension CustomColorSchemeX on ColorScheme {
  Color get smallBoxColor1 =>
      brightness == Brightness.light ? Colors.blue : Colors.grey[400];
}

然后通过访问该属性Theme.of(context)...

                        Container(
                          decoration: BoxDecoration(
                            border: Border.all(
                                color: Theme.of(context)
                                    .colorScheme
                                    .smallBoxColor1),
                        ),