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

Question

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

Answer 1

自从在 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],
      ),
    ),
  ],
)

通过删除 Stack 并仅使用第一个笔画 Text 小部件，可以单独进行笔画。还可以通过交换第一个和第二个 Text 小部件来调整描边/填充顺序。