Text Align

Utilities for controlling the alignment of text.

• Basic Usage
• Quick Reference
• Responsive Design
• Dark Mode
• Arbitrary Values
• Customizing Theme
• Related Documentation

// 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

Responsive Design

Apply different alignment at different breakpoints using the standard sm:, md:, lg:, xl:, and 2xl: prefixes.

// 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.

Related Documentation

• Font Size
• Font Weight
• Line Height