Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a line through text in Flutter?

Tags:

flutter

dart

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

like image 839
Osama Gamal Avatar asked Jun 06 '18 14:06

Osama Gamal


People also ask

How do you put line in text in flutter?

var readLines = ['Test1', 'Test2', 'Test3']; String getNewLineString() { StringBuffer sb = new StringBuffer(); for (String line in readLines) { sb. write(line + "\n"); } return sb. toString(); } child: Container( child: Text( getNewLineString(), maxLines: 20, style: TextStyle( fontSize: 16.0, fontWeight: FontWeight.


2 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',       ),     ],  ), ) 
like image 92
Chance Snow Avatar answered Sep 28 '22 01:09

Chance Snow


          style: TextStyle(decoration: TextDecoration.lineThrough), 
like image 31
Tree Avatar answered Sep 28 '22 02:09

Tree