15.3 C
New York
Wednesday, October 5, 2022

Adding a Border to Text in Flutter

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.

Advertisements

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles