Adding a Border to Text in Flutter

Last updated on August 19, 2022 Guest Contributor Loading... One comment

The example below shows you how to add a border (a stroke) to text in Flutter.

Screenshot:

The code:

Scaffold(
      appBar: AppBar(
        title: const Text('KindaCode.com'),
      ),
      body: Center(
          child: Stack(
        children: [
          // Implement the stroke
          Text(
            'Hi There',
            style: TextStyle(
              fontSize: 70,
              letterSpacing: 5,
              fontWeight: FontWeight.bold,
              foreground: Paint()
                ..style = PaintingStyle.stroke
                ..strokeWidth = 10
                ..color = Colors.red,
            ),
          ),
          // The text inside
          const Text(
            'Hi There',
            style: TextStyle(
              fontSize: 70,
              letterSpacing: 5,
              fontWeight: FontWeight.bold,
              color: Colors.amber,
            ),
          ),
        ],
      )),
    );

Further reading:

You can also check out the Flutter category page or Dart category page for the latest tutorials and examples.

Subscribe
Notify of
guest
1 Comment
Inline Feedbacks
View all comments
Jocgomez
Jocgomez
5 months ago

There is no comments, but this is great!, works perfect. Thank you

You May Also Like