Text Decoration Line

Use text decoration utilities to add or remove lines from text content.

---

Underling text

Use the underline utility to add an underline to the text of an element:

Style('underline', child: Text('The quick brown fox...'))

Adding an overline to text

Use the overline utility to add an overline to the text of an element:

Style('overline', child: Text('The quick brown fox...'))

Adding a line through text

Use the line-through utility to add a line through the text of an element:

Style('line-through', child: Text('The quick brown fox...'))

Removing a line from text

Use the no-underline utility to remove a line from the text of an element:

Style('no-underline', child: Text('The quick brown fox...'))

Applying on hover

Hover over the link to see the underline appear. Following the hover_button precedent, the link is its own block-level Style with the hover:underline variant — making it a clearly hover-eligible target.

Text('The')
Style('no-underline hover:underline ...', child: Text('quick brown fox'))
Text('jumps over the lazy dog.')

Class reference

Class	Decoration
underline	TextDecoration.underline
overline	TextDecoration.overline
line-through	TextDecoration.lineThrough
no-underline	TextDecoration.none