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:
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:
Comments
Post a Comment