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