How to make a line through text in Flutter?

Question

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

Edla

Answer 1

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',
      ),
    ],
 ),
)

Incisure

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)) – Mitosis

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! – Megacycle

@Megacycle 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. – Incisure

@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 – Megacycle

You can do it also with rich text ! – Countrywide

How to achieve a diagonal strikethrough. coz this simply a horizontal through a text. is there built in option for that or should we create a custom widget with the line and a text stacked. – Espousal

@DhananjayGavali I would use the CustomPaint widget with the foregroundPainter parameter to produce that effect. – Incisure

Answer 2

style: TextStyle(decoration: TextDecoration.lineThrough),

Franny

how to make it to have rounded ends? – Ragged

@PaulGrei Do you mean that the underline's line caps are rounded? – Incisure

@ChanceSnow no. A lineThrough that has rounded ends. – Ragged

Answer 3

If you would like add some additional styling, like line thickness, colour etc:

(decoration: TextDecoration.lineThrough, decorationColor: Colors.grey, decorationThickness: 2.0),
                                          

Patellate

Answer 4

i use this

Column(
    children: [
      Text(
        "sample text"
      ),
      Divider(color: Colors.red,)
    ],
  ),

Guardroom

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. – Chapfallen

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? – Safety

Instead of a column, if you use a Stack, it could be a solution, but the real solution is the one marked – Goral