WText

A utility-first text component that translates Tailwind-like class strings into optimized Flutter typography.

• Basic Usage
• Constructor
• Props
• Runtime-Dynamic Colors
• Typography Styling
• State Variants
• Styling Examples
• All Supported Classes
• Customizing Theme
• Related Documentation

WText(
  'Design is not just what it looks like and feels like.',
  className: 'text-2xl font-bold text-slate-900 text-center leading-tight',
)

Basic Usage

The WText widget handles all text rendering in Wind. Unlike standard Flutter Text widgets, it supports direct styling via the className property, including responsive and state-based modifiers.

WText(
  'Utility-first styling for Flutter',
  className: 'text-lg text-blue-600 font-semibold italic p-4',
)

Constructor

const WText(
  String data, {
  Key? key,
  String? className,
  WindStyle? style,
  TextStyle? textStyle,
  bool selectable = false,
  Set? states,
  Color? foregroundColor,
})

Props

Runtime-Dynamic Colors

Utility classes are for design tokens (text-primary-500, text-red-500). When the color is a runtime value, a user-picked brand color or a hex loaded from an API, use the foregroundColor prop instead of interpolating into text-[#$hex].

// Good: runtime-dynamic color via inline prop
WText(
  'Brand',
  foregroundColor: userBrandColor,
  className: 'text-lg font-bold',
)

// Avoid: string interpolation bloats the parser cache, one entry per unique hex
WText('Brand', className: 'text-lg font-bold text-[#${userBrandColor.hex}]')

Precedence: inline foregroundColor wins over any text-* / dark:text-* resolved from className. When foregroundColor is null, className behavior, including the dark: fallback, is unchanged. The inline color does not participate in the parser cache key.

Typography Styling

WText supports a wide range of typography utilities that map directly to Flutter's TextStyle.

Alignment and Transform

WText('CENTERED UPPERCASE', className: 'text-center uppercase')
WText('capitalize me', className: 'capitalize')

Overflow and Clamping

Handle long text gracefully using truncation or line clamping.

WText(
  'A very long text that will be truncated with an ellipsis after two lines.',
  className: 'line-clamp-2 text-gray-500',
)

State Variants

Text colors and weights can react to states when provided via the states prop or when nested within state-aware widgets like WButton.

WText(
  'Hover me',
  className: 'text-gray-500 hover:text-blue-600 transition-colors',
)

Styling Examples

Gradient and Opacity

While standard text uses text-{color}, you can also apply opacity modifiers.

WText(
  'Faded Text',
  className: 'text-blue-500/50 font-medium',
)

Composition Pipeline

WText uniquely supports layout utilities (padding, margin, alignment) by automatically wrapping the text in the necessary layout widgets.

WText(
  'Alert Message',
  className: 'bg-red-100 text-red-700 p-4 rounded-lg border border-red-200',
)

All Supported Classes

Customizing Theme

Override default typography scales in your WindThemeData.

WindThemeData(
  fontSizes: {
    'huge': 120.0,
  },
  fontWeights: {
    'thick': FontWeight.w900,
  },
)

Related Documentation

• WDiv - For complex layouts and containers.
• Typography Settings - Deep dive into font sizes and scales.
• State Management - How hover: and focus: work.