So, I am trying to make a border/stroke effect for Text widget using Stack and Positioned.
class BorderedText extends StatelessWidget {
BorderedText({
super.key,
required this.text,
required this.textSize,
this.borderTextSize,
required this.textColor,
required this.borderTextColor,
}) {
borderTextSize ??= getBorderTextSize(textSize);
}
final String text;
final double textSize;
double? borderTextSize;
final Color textColor;
final Color borderTextColor;
double getBorderTextSize(double textSize) {
return textSize * 1.1;
}
@override
Widget build(BuildContext context) {
return Stack(
children: [
Positioned(
child: Text(
text,
style: TextStyle(
color: borderTextColor,
fontSize: borderTextSize,
),
),
),
Positioned(
top: (borderTextSize! - textSize) * 0.5,
left: (borderTextSize! - textSize) * 0.2,
child: Text(
text,
style: TextStyle(
fontSize: textSize.toDouble(),
color: textColor,
letterSpacing: (borderTextSize! - textSize) * 0.45,
),
),
),
],
);
}
}
In some cases like textSize >= 70, the border text overflows. How do I listen to the overflow of that text widget and apply the same to the top text ?
Aucun commentaire:
Enregistrer un commentaire