How to draw only stroke of a text in flutter canvas?

Question

I am trying to implement a feature in my flutter app where user can toggle between stroke and fill view, for text (like adobe illustrator or similar). How to get this effect in flutter canvas.

Here is a Question asking how to achieve this in CSS.

Answer 1

You can make it by using the foreground property in the TextStyle.

Stack(
  children: <Widget>[
    Text(
      'Outlined Text',
      style: TextStyle(
        fontSize: 40,
        fontWeight: FontWeight.bold,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 3
          ..color = Colors.black, // <-- Border color
      ),
    ),
    const Text(
      'Outlined Text',
      style: TextStyle(
        fontSize: 40,
        fontWeight: FontWeight.bold,
        color: Colors.white, // <-- Inner color
      ),
    ),
  ],
)

Result

Reference

How to decorate text stroke in Flutter?