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:

• Flutter: Stream.periodic example
• Flutter Gradient Text Examples
• Flutter TextField: Styling labelText, hintText, and errorText
• Flutter: DropdownButton Example
• Flutter: FilteringTextInputFormatter Examples

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