flutter - 如何在Flutter中装饰文字笔划？

如何在Flutter中装饰文字笔划？
就像-webkit-text-stroke - CSS

最佳答案

由于在TextStyle中添加了前景色，因此无需任何变通方法就可以进行描边。 TextStyle文档中添加了填充边框文本下的笔触的显式示例:https://master-api.flutter.dev/flutter/painting/TextStyle-class.html#painting.TextStyle.6

此示例在此处转载:

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

通过删除堆栈并仅使用第一个笔划Text小部件，就可以单独进行笔划。笔划/填充顺序也可以通过交换第一个和第二个“文本”小部件来调整。