Text Transform
Change the capitalization of text content at render time without modifying the source string.
On this page
typography/text_transform
The live demo is not available for this example.
text_transform.dart
View source
WText('upper case', className: 'uppercase');
WText('LOWER CASE', className: 'lowercase');
WText('capitalize this text', className: 'capitalize');
WText('No transformation here.', className: 'none');
Basic Usage#
Apply a transform class in the className of any text widget. The transformation runs at render time; the original data string is never mutated:
WText('button label', className: 'uppercase font-semibold text-white');
WText('[email protected]', className: 'lowercase text-gray-700 dark:text-gray-300');
WText('first word only', className: 'capitalize');
Quick Reference#
| Class | Transformation | Description |
|---|---|---|
uppercase |
toUpperCase() |
Converts all characters to uppercase. |
lowercase |
toLowerCase() |
Converts all characters to lowercase. |
capitalize |
First char upper, rest lower | Capitalizes the first character of the text. |
none |
No change | Leaves the text unchanged. |
Responsive Design#
Combine with breakpoint prefixes to apply a transform only at certain screen sizes:
WText('label text', className: 'none md:uppercase');
Related Documentation#
- Font Size — set text size.
- Text Color — apply color to text.
- Text Decoration — underline, overline, and strikethrough.
- WText — the primary text widget.