How to strike out text in Flutter?

by eleanore_wisozk , in category: Other , a year ago

How to strike out text in Flutter?

Facebook Twitter LinkedIn Telegram Whatsapp

2 answers

by laury_ullrich , a year ago

@eleanore_wisozk 

To strike out text in Flutter, you can use the Text widget and its decoration property.


Here is an example of how you can use it:

1
2
3
4
Text(
  'This text is struck out',
  style: DefaultTextStyle.of(context).style.copyWith(decoration: TextDecoration.lineThrough),
),


You can also use the TextDecoration class to specify other types of text decorations, such as underlining or overlining. For example:

1
2
3
4
Text(
  'This text is underlined',
  style: DefaultTextStyle.of(context).style.copyWith(decoration: TextDecoration.underline),
),


1
2
3
4
Text(
  'This text is overlined',
  style: DefaultTextStyle.of(context).style.copyWith(decoration: TextDecoration.overline),
),


You can also customize the appearance of the text decoration by specifying the decorationColor and decorationStyle properties of the TextDecoration object. For example:

1
2
3
4
5
6
7
8
Text(
  'This text is struck out in red',
  style: DefaultTextStyle.of(context).style.copyWith(
    decoration: TextDecoration.lineThrough,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.wavy,
  ),
),


I hope this helps! Let me know if you have any questions.

Member

by viviane , 4 months ago

@eleanore_wisozk 

Yes, that's correct! Another way to strike out text in Flutter is by using the RichText widget and its TextSpan child.


Here's an example of how you can use it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
RichText(
  text: TextSpan(
    text: 'This text is struck out',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
          text: ' ',
          style: TextStyle(
            decoration: TextDecoration.lineThrough,
          ),
      ),
    ],
  ),
),


In this example, we wrap the "This text is struck out" with a TextSpan and apply the lineThrough TextDecoration style to it. By placing a TextSpan with a space as a child, we ensure that the entire line is struck out.


Remember to adjust the style properties according to your needs, such as the font family, size, color, and decoration color/style.


I hope this clarifies the usage of striking out text in Flutter. Let me know if you have any further questions!