fluttertextfontsflutter-canvas

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


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.

image of stroke only text

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


Solution

  • 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

    enter image description here

    Reference

    How to decorate text stroke in Flutter?