How I can make outlined text?

Question

How I can make outlined text for Text widget? It's like stroke effect

Answer 1

You could try this option: https://stackoverflow.com/a/53211151/1534666

---

Copy of answer: 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

Answer 2

UPD:

I wouldn't call it the best solution, but it works

Stack(
  children: <Widget>[
    Text(
      'TEXT',
      textAlign: TextAlign.center,
      style: TextStyle(
          color: Colors.purple,
          fontWeight: FontWeight.bold,
          fontSize: 36.0),
    ),Text(
      'TEXT',
      textAlign: TextAlign.center,
      style: TextStyle(
          foreground: Paint()..color = Colors.white..style = PaintingStyle.stroke..strokeWidth = 1.0,
          fontWeight: FontWeight.bold,
          fontSize: 36.0),
    ),
  ],
);

In TextStyle you can't define both color and foreground, so I've tried to use Stack with two identical Texts with different decorations.

As I said - not the best solution, but maybe it'll be suitable for someone

Answer 3

style: GoogleFonts.londrinaOutline(),

This is simple but not perfect....!

Answer 4

Use bordered_text package

BorderedText(
    strokeColor: Colors.white,
    strokeWidth: 6,
    child: Text(
        'Bordered Text',
        style: const TextStyle(
            fontSize: 130,
            fontWeight: FontWeight.bold,
            color: blackColor
        ),
    ),
),