Text Align
Utilities for controlling the alignment of text.
On this page
typography/text_align_basic
The live demo is not available for this example.
text_align_basic.dart
View source
// Basic alignment examples
WText('Left aligned', className: 'text-left')
WText('Center aligned', className: 'text-center')
WText('Right aligned', className: 'text-right')
Basic Usage#
Use text-left, text-center, text-right, and text-justify to control the text alignment of an element.
WDiv(
className: 'flex flex-col gap-4',
children: [
WText('Left aligned text.', className: 'text-left'),
WText('Center aligned text.', className: 'text-center'),
WText('Right aligned text.', className: 'text-right'),
WText('Justified text.', className: 'text-justify'),
],
)
Quick Reference#
| Class | Value | Description |
|---|---|---|
text-left |
TextAlign.left |
Align text to the left. |
text-center |
TextAlign.center |
Align text to the center. |
text-right |
TextAlign.right |
Align text to the right. |
text-justify |
TextAlign.justify |
Stretch lines of text to equal width. |
text-start |
TextAlign.start |
Align text to the start (direction-aware). |
text-end |
TextAlign.end |
Align text to the end (direction-aware). |
Responsive Design#
Apply different alignment at different breakpoints using the standard sm:, md:, lg:, xl:, and 2xl: prefixes.
typography/text_align_responsive
The live demo is not available for this example.
text_align_responsive.dart
View source
// Center on mobile, left on medium screens and up
WText(
'Responsive Alignment',
className: 'text-center md:text-left',
)
Dark Mode#
Use the dark: prefix to apply different alignment in dark mode. While less common for alignment than colors, it is fully supported.
WText('Dark mode alignment', className: 'text-left dark:text-center')
Arbitrary Values#
The text alignment utility does not support arbitrary values because it maps directly to Flutter's TextAlign enum.
Customizing Theme#
Text alignment values are hardcoded to map to Flutter's TextAlign enum and cannot be customized via WindThemeData.