如何为 Flutter 中的文本赋予边框/背景？

Posted 2023-02-23

【中文标题】如何为 Flutter 中的文本赋予边框/背景？

【英文标题】：How to give border/background to a Text in Flutter?

【发布时间】：2022-01-16 21:27:30

【问题描述】：

我想给我的文本一个边框或背景。只是一个简单的红色文本，周围有黑色边框。

请参阅以下图片作为灵感：

【参考方案1】：

只需在 Flutter 文档中查找 TextStyle 类即可。我相信在 Borders an Stroke 中您会找到答案。

Flutter Documentation

【参考方案2】：

请参考outlined_text包here

你也可以试试这个https://pub.dev/packages/bordered_text

【参考方案3】：

我在Flutter Documentation找到了答案

没有边框属性，但是您可以使用两个重叠的文本来完成这项工作。这是代码

Stack(
  children: <Widget>[
    // Stroked text as border.
    Text(
      'WHO',
      style: TextStyle(
        fontSize: 40,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 6
          ..color = Colors.grey,
      ),
    ),
    // Solid text as fill.
    Text(
      'WHO',
      style: TextStyle(
        fontSize: 40,
        color: Colors.red,
      ),
    ),
  ],
)