Flutter Set Border on Text - Stroke Text

Creating text with outlined border in flutter is a bit tricky. We have to use Stack widget and define 2 child text widgets inside it. On the first child text we define border of text and on the other text child we would define text color. Because we cannot use foreground and color together on text widget in flutter.

Flutter Set Border on Text - Stroke Text:

1. Defining a parent Stack widget and define 2 Child text widgets inside it.

Stack(
      children: [
        Text(
          'Text With Border',
          style: TextStyle(
            fontSize: 50,
            foreground: Paint()
              ..style = PaintingStyle.stroke
              ..strokeWidth = 3
              ..color = Colors.deepOrange,
          ),
        ),
        const Text(
          'Text With Border',
          style: TextStyle(
            fontSize: 50,
            color: Colors.greenAccent,
          ),
        ),
      ],
    )

Image defining how this is working:

2. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Stack(
      children: [
        Text(
          'Text With Border',
          style: TextStyle(
            fontSize: 50,
            foreground: Paint()
              ..style = PaintingStyle.stroke
              ..strokeWidth = 3
              ..color = Colors.deepOrange,
          ),
        ),
        const Text(
          'Text With Border',
          style: TextStyle(
            fontSize: 50,
            color: Colors.greenAccent,
          ),
        ),
      ],
    )));
  }
}

Screenshot: