How to decorate text stroke in Flutter?

Question

How to decorate text stroke in Flutter? It's like -webkit-text-stroke - CSS

Answer 1

Stroke has been possible without workarounds since the addition of foreground paints in TextStyle. An explicit example of stroke under fill bordered text has been added in the TextStyle documentation: https://master-api.flutter.dev/flutter/painting/TextStyle-class.html#painting.TextStyle.6

This example is reproduced here:

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],       ),     ),   ], ) 

Stroke by itself is possible by removing the Stack and just using the first stroke Text widget by itself. The stroke/fill order can also be adjusted by swapping the first and second Text widget.

Answer 2

I was also looking for this, wasn't able to find it. But I did find a workaround using 4 shadows in the TextStyle:

Text("Border test",     style: TextStyle(       inherit: true,       fontSize: 48.0,       color: Colors.pink,       shadows: [         Shadow( // bottomLeft           offset: Offset(-1.5, -1.5),           color: Colors.white         ),         Shadow( // bottomRight           offset: Offset(1.5, -1.5),           color: Colors.white         ),         Shadow( // topRight           offset: Offset(1.5, 1.5),           color: Colors.white         ),         Shadow( // topLeft           offset: Offset(-1.5, 1.5),           color: Colors.white         ),       ]     ), ); 

I also opened an Issue on GitHub: https://github.com/flutter/flutter/issues/24108