114

Using the TextStyle() class in Flutter, how can I strike through an old price?

3 Answers 3

221

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',
      ),
    ],
 ),
)
7
  • 8
    This 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))
    – Scott
    Aug 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!
    – sud007
    Feb 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
    – sud007
    Jun 25, 2019 at 11:06
  • You can do it also with rich text ! Feb 19, 2021 at 4:29
82
style: TextStyle(decoration: TextDecoration.lineThrough),
3
  • how to make it to have rounded ends?
    – Paul Grei
    Mar 29 at 11:55
  • @PaulGrei Do you mean that the underline's line caps are rounded? May 30 at 15:41
  • @ChanceSnow no. A lineThrough that has rounded ends.
    – Paul Grei
    Jun 1 at 6:49
-21

i use this

Column(
    children: [
      Text(
        "sample text"
      ),
      Divider(color: Colors.red,)
    ],
  ),
2
  • 3
    While 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.