Using the TextStyle()
class in Flutter, how can I strike through an old price?
3 Answers
To apply strikethrough decoration to a Text
widget directly:
Text('\$8.99', style: TextStyle(decoration: TextDecoration.lineThrough))
You can also style separate spans of a paragraph by using the RichText
widget, or the Text.rich()
constructor.
Based on this example code, to show a discounted price:
RichText()
new RichText(
text: new TextSpan(
text: 'This item costs ',
children: <TextSpan>[
new TextSpan(
text: '\$8.99',
style: new TextStyle(
color: Colors.grey,
decoration: TextDecoration.lineThrough,
),
),
new TextSpan(
text: ' \$3.99',
),
],
),
)
Text.rich()
Text.rich(TextSpan(
text: 'This item costs ',
children: <TextSpan>[
new TextSpan(
text: '\$8.99',
style: new TextStyle(
color: Colors.grey,
decoration: TextDecoration.lineThrough,
),
),
new TextSpan(
text: ' \$3.99',
),
],
),
)
-
8This can also be applied directly to a Text widget via its style attribute (see other answer by Tree).
Text(s, style: TextStyle(decoration: TextDecoration.lineThrough))
– ScottAug 21, 2018 at 20:41 -
Giving an example should be followed only after the mention of attribute in question. Examples are helpful for Newbie programmers to understand How to use it but to seasoned programmers just the attribute is a hint, good enough. Thanks anyway!– sud007Feb 2, 2019 at 10:14
-
1@sud007 I gave a full example because the question specifically asked, "... how can I strike through an old price." (Emphasis added.) I'll improve this answer and call out the strikethrough
TextDecoration
upfront. Jun 13, 2019 at 22:58 -
@ChanceSnow My only emphasis was to make a point in favor of SOF as a community for solutions and not handhold coding. But anyway, any support provided here is selfless, takes time to post and hence much appreciated, #peace– sud007Jun 25, 2019 at 11:06
-
style: TextStyle(decoration: TextDecoration.lineThrough),
i use this
Column(
children: [
Text(
"sample text"
),
Divider(color: Colors.red,)
],
),
-
3While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. I would recommend you to check SO's official How to Answer article along with the comprehensive blog post from Jon Skeet. Jun 9, 2020 at 11:50
-
To expand on @AlekseyPotapov’s point, this is especially important for old questions with established answers. Could you explain why your approach might be preferable over @Chance-Snow‘s accepted answer from a couple of years ago? Jun 10, 2020 at 3:02