如何使用Flutter自定义TextTheme并保留文本颜色自动适配功能

这个问题我之前也踩过坑！核心原因是你只自定义了全局的textTheme，但像FAB这类使用Primary背景的组件，实际上会优先调用Theme中的primaryTextTheme而非默认的textTheme。你之前的代码只修改了默认场景的文本样式，却没同步修改primaryTextTheme（以及其他特殊场景的accentTextTheme等），导致在FAB上使用自定义样式时，拿到的是默认背景下的黑色文本，而非适配Primary背景的白色。

解决方案：同步自定义所有相关的TextTheme #

你只需要把自定义TextTheme的逻辑复用在primaryTextTheme、accentTextTheme等主题上，这样不同背景场景下的文本样式都会应用你设置的加粗效果，同时保留系统自带的颜色适配能力。

修改后的代码示例：

// 复用的自定义TextTheme方法，仅修改需要的字重
TextTheme _customizeTextTheme(TextTheme base) {
  return base.copyWith(
    title: base.title.copyWith(
      fontWeight: FontWeight.bold,
    ),
    body2: base.body2.copyWith(
      fontWeight: FontWeight.bold,
    ),
  );
}

// 构建ThemeData时，同步设置所有相关的TextTheme
ThemeData buildTheme() {
  final baseTheme = ThemeData.light();
  return baseTheme.copyWith(
    primaryColor: Colors.red, // 你的FAB背景色
    textTheme: _customizeTextTheme(baseTheme.textTheme),
    primaryTextTheme: _customizeTextTheme(baseTheme.primaryTextTheme),
    accentTextTheme: _customizeTextTheme(baseTheme.accentTextTheme), // 若用到Accent背景组件可添加
  );
}

如何在FAB中使用 #

现在在FAB里，你可以直接调用Theme.of(context).primaryTextTheme.title来获取适配Primary背景的加粗样式，文本会自动变成白色：

FloatingActionButton(
  backgroundColor: Colors.red,
  onPressed: () {},
  child: Text(
    "按钮",
    style: Theme.of(context).primaryTextTheme.title,
  ),
)

你也可以根据组件的背景类型灵活选择对应的TextTheme：

• 普通页面背景：用textTheme
• Primary背景（FAB、AppBar等）：用primaryTextTheme
• Accent背景：用accentTextTheme

这样既保留了你想要的自定义字重，又不会丢失系统自带的颜色自动适配能力。

内容的提问来源于stack exchange，提问作者Airborne Eagle