Text Decoration
Apply underline, overline, or strikethrough decorations to text, or remove an inherited decoration.
On this page
typography/text_decoration
The live demo is not available for this example.
text_decoration.dart
View source
WText('Underlined text', className: 'underline');
WText('Strikethrough text', className: 'line-through');
WText('No decoration', className: 'no-underline');
Basic Usage#
Apply decoration classes directly in the className of any text widget:
WText(
'See terms and conditions.',
className: 'underline text-blue-600 dark:text-blue-400',
);
WText(
'Original price: \$99',
className: 'line-through text-gray-500 dark:text-gray-400',
);
Quick Reference#
| Class | Flutter TextDecoration |
Description |
|---|---|---|
no-underline |
TextDecoration.none |
Removes any text decoration. |
underline |
TextDecoration.underline |
Adds an underline. |
overline |
TextDecoration.overline |
Adds an overline. |
line-through |
TextDecoration.lineThrough |
Adds a strikethrough. |
Responsive Design#
Combine with breakpoint prefixes to toggle decoration at certain screen sizes:
WText('Conditional underline', className: 'no-underline md:underline');
Related Documentation#
- Text Color — apply color to text.
- Font Style — italic and normal styles.
- Font Weight — control text thickness.
- WText — the primary text widget.