如何在 Flutter 中更改整个主题的文本颜色？

Posted 2023-02-23

【中文标题】如何在 Flutter 中更改整个主题的文本颜色？

【英文标题】：How to change the entire theme's text color in Flutter?

【发布时间】：2018-08-18 14:44:42

【问题描述】：

我可能缺少一些明显的东西。是否有 一个 属性可以改变 Flutter 应用中所有文本的颜色？

我现在的做法是，在我的 MaterialApp 中：

theme: ThemeData(
    textTheme: Theme.of(context).textTheme.copyWith(
          body1:
              Theme.of(context).textTheme.body1.apply(color: Colors.pink),
          body2:
              Theme.of(context).textTheme.body2.apply(color: Colors.pink),
          display1:
              Theme.of(context).textTheme.display1.apply(color: Colors.pink),
          display2:
              Theme.of(context).textTheme.display2.apply(color: Colors.pink),
          ... // and so on
        ),
    ),
),

我也试过了

textTheme: Theme.of(context).textTheme.apply(bodyColor: Colors.pink),

但这适用于下拉文本，而不是常规文本。同样，displayColor 适用于 appBar 文本和 InputDecoration 文本，但不适用于常规文本。我的代码中似乎没有任何decorationText，所以我不确定它的用途。

我注意到有一个 textSelectionColor 属性，但仅适用于 TextField 小部件。

【参考方案1】：

我认为TextTheme.apply 是你想要的。 bodyColor 将应用于 headline、title、subhead、button、body1 和 body2。 displayColor 将应用于 display1 到 display4 和 caption。如果同时指定 bodyColor 和 displayColor 并使用相同的颜色值，则会有效地更改所有文本样式的文本颜色。

例子：

final newTextTheme = Theme.of(context).textTheme.apply(
  bodyColor: Colors.pink,
  displayColor: Colors.pink,
);

【讨论】：

太棒了！没有意识到bodyColor 和displayColor 组合起来会涵盖所有情况。

字体大小如何？如何设置所有页面的字体大小

如何设置背景色？例如：文本 black87 和背景 white54？

【参考方案2】：

对于整个应用，您可以在Material 应用小部件中设置textTheme 属性。

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText1: TextStyle(),
      bodyText2: TextStyle(),
    ).apply(
      bodyColor: Colors.orange, 
      displayColor: Colors.blue, 
    ),
  ),
) 

【讨论】：

如何设置字体大小？

@JohnJoe 在TextStyle，你可以使用fontSize。

这个特性只有“fontSizeFactor”和“fontSizeDelta”参数，没有“fontsize”

【参考方案3】：

要提供一种似乎可以在不直接设置所有 Text 样式的情况下工作的替代方法，是在 Widget 树中的位置更改 DefaultTextStyle 的样式以使其生效

return DefaultTextStyle(
  style: TextStyle(color: Colors.pink),
  child: _YOUR_WIDGETS_
)

【讨论】：

当您想为应用程序的特定部分强制使用 TextStyle 时，这是一个很好的答案。在我的情况下，其他答案均无效。

【参考方案4】：

可能有点晚了……但你可以用这个：

ThemeData(
    primaryTextTheme: Typography(platform: TargetPlatform.ios).white,
    textTheme: Typography(platform: TargetPlatform.iOS).white,
)

【讨论】：

tgetPlatform 说的是 iOS，但它也适用于 android。

这个对我很有效。去掉platform参数，就可以和android一起工作了（因为platform参数的默认值是android）。

【参考方案5】：

我的正在处理这个：

return MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText2: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
);