How to give border/background to a Text in Flutter?

0

Issue

I want to give my text a border or background. Just a simple text in red with a black border around it.

See the following image as inspiration:

enter image description here

Solution

I found the answer in Flutter Documentation

There’s no border property but yes you can use two overlapping Texts to do the job. Here’s the code

Stack(
  children: <Widget>[
    // Stroked text as border.
    Text(
      'WHO',
      style: TextStyle(
        fontSize: 40,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 6
          ..color = Colors.grey,
      ),
    ),
    // Solid text as fill.
    Text(
      'WHO',
      style: TextStyle(
        fontSize: 40,
        color: Colors.red,
      ),
    ),
  ],
)

Answered By – Ahmad Khan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More