Text Alignment
Control the horizontal alignment of text content using predefined alignment classes.
On this page
typography/text_alignment
The live demo is not available for this example.
text_alignment.dart
View source
WText('Left-aligned text', className: 'text-left');
WText('Centered text', className: 'text-center');
WText('Right-aligned text', className: 'text-right');
Basic Usage#
Apply text alignment with the text- prefix followed by an alignment direction:
WText(
'Centered heading',
className: 'text-center text-2xl font-bold text-gray-900 dark:text-gray-100',
);
WText(
'This paragraph text is justified for a formal appearance.',
className: 'text-justify text-base text-gray-700 dark:text-gray-300',
);
Quick Reference#
| Class | Flutter TextAlign |
Description |
|---|---|---|
text-left |
TextAlign.left |
Aligns text to the left. |
text-center |
TextAlign.center |
Centers the text. |
text-right |
TextAlign.right |
Aligns text to the right. |
text-justify |
TextAlign.justify |
Justifies the text. |
text-start |
TextAlign.start |
Aligns text to the reading direction start. |
text-end |
TextAlign.end |
Aligns text to the reading direction end. |
Responsive Design#
Combine with breakpoint prefixes to change alignment at different screen sizes:
WText(
'Responsive alignment',
className: 'text-center md:text-left',
);
Related Documentation#
- Font Size — set text size.
- Font Weight — control text thickness.
- Text Color — apply color to text.
- WText — the primary text widget.