Flutter组件中粗体文本出现轮廓的问题排查与解决

你当前代码里用了PaintingStyle.stroke，这是描边模式，所以文字会呈现空心轮廓效果。要实现实心粗体且无轮廓，有两种可行方案：

方案一：叠加双层文本（推荐） #

用Stack把两个相同文本叠加，底层文本用描边模式（颜色和上层一致），上层用填充模式，叠加后文字会显得更粗，且是实心无轮廓的效果：

Stack(
  alignment: Alignment.center,
  children: [
    // 底层描边文本，用于强化加粗效果
    Text(
      "你的标题文本",
      style: Theme.of(context).textTheme.bodyLarge!.copyWith(
            fontWeight: FontWeight.w900,
            fontSize: 50,
            letterSpacing: 3,
            foreground: Paint()
              ..style = PaintingStyle.stroke
              ..strokeWidth = 3
              ..color = color, // 和上层文本颜色保持一致
          ),
    ),
    // 上层填充文本，呈现实心效果
    Text(
      "你的标题文本",
      style: Theme.of(context).textTheme.bodyLarge!.copyWith(
            fontWeight: FontWeight.w900,
            fontSize: 50,
            letterSpacing: 3,
            color: color,
          ),
    ),
  ],
)

方案二：替换描边为填充模式 #

如果不需要极端加粗效果，直接把PaintingStyle.stroke改成PaintingStyle.fill，文本会变成实心，但strokeWidth属性会失效，此时可以通过调整fontWeight或选用更粗的字体来增强视觉效果：

final titleTextStyle = Theme.of(context)
    .textTheme
    .bodyLarge!
    .copyWith(
      fontWeight: FontWeight.w900,
      fontSize: 50,
      letterSpacing: 3,
      foreground: Paint()
        ..style = PaintingStyle.fill // 改为填充模式
        ..color = color,
    );

方案一的优势是能实现比系统字体权重更夸张的加粗效果，完全符合“醒目粗体”的需求，同时不会出现空心轮廓问题。

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