How to make a line through text in Flutter?

Question

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

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