2023年如何从主题设置文本为次要文本颜色？求Flutter对应实现

在Flutter中，你可以通过当前上下文的主题系统获取对应于Android textColorSecondary 的次要文本颜色，核心是利用Theme.of(context)获取主题配置，结合默认值处理：

Material 3（推荐，Flutter 3.10+默认开启） #

Android的textColorSecondary对应Material 3颜色体系中的onSurfaceVariant，用于次要文本、辅助提示等场景，代码实现如下：

Color secondaryColor = Theme.of(context).colorScheme.onSurfaceVariant ?? Colors.black;

Material 2（旧版主题体系） #

如果你的项目仍使用Material 2主题，可通过textTheme.caption获取对应颜色，这是Material 2中专门用于次要文本的样式颜色：

Color secondaryColor = Theme.of(context).textTheme.caption?.color ?? Colors.black;

完整使用示例 #

在Widget的build方法中直接调用（需传入BuildContext）：

@override
Widget build(BuildContext context) {
  // 获取次要文本颜色，默认 fallback 为黑色
  Color secondaryColor = Theme.of(context).colorScheme.onSurfaceVariant ?? Colors.black;
  
  return Scaffold(
    body: Center(
      child: Text(
        "这是次要文本",
        style: TextStyle(color: secondaryColor),
      ),
    ),
  );
}

说明：

• Theme.of(context)会自动适配当前上下文的主题（包括明暗模式、自定义主题配置）
• 加入?? Colors.black是为了和Android代码中的默认值行为保持一致，当主题中未配置对应颜色时使用黑色

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