Flutter 文字边框/边框颜色

效果图下

其实思路很简单 与css图层样式叠加类似

我们巧妙用原生库里面的Stack Widget实现这个效果

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

官方文档也是有案例的:https://api.flutter.dev/flutter/painting/TextStyle-class.html