Adding a Border to Text in Flutter

Last updated on October 4, 2021 Guest Contributor Loading... Post a comment

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

Screenshot:

The code:

Scaffold(
      appBar: AppBar(
        title: const Text('KindaCode.com'),
      ),
      body: Center(
          child: Stack(
        children: [
          // The text border
          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
0 Comments
Inline Feedbacks
View all comments

You May Also Like