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:
- Flutter: Stream.periodic example
- Hero Widget in Flutter: A Practical Guide
- 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.
There is no comments, but this is great!, works perfect. Thank you