search ESC

Searching…

No results for "".

Type at least 2 characters to search.

Docs
You are viewing an older version (0.0.5). Go to the latest.

WText

A utility-first text widget that extends Flutter's Text, styling inline text through className utilities. The text content is passed as the first positional argument.

Open Preview Source 

WText('Utility Styled Text', className: 'text-red-500 font-bold text-lg');

Basic Usage

WText is the Wind equivalent of an HTML . The text content is the first positional argument; every other parameter is named. All Flutter Text parameters are available, and when a parameter conflicts with a utility class, the explicitly passed parameter wins. Pass selectable in the className to render a SelectableText instead.

WText(
  'Styled Text',
  className: 'text-red-500 font-bold text-lg underline truncate max-lines-2',
);

Constructor

WText(
  String data, {
  dynamic className,
  Key? key,
  TextStyle? style,
  StrutStyle? strutStyle,
  TextAlign? textAlign,
  TextDirection? textDirection,
  Locale? locale,
  bool? softWrap,
  TextOverflow? overflow,
  int? maxLines,
  String? semanticsLabel,
  TextWidthBasis? textWidthBasis,
  TextHeightBehavior? textHeightBehavior,
  Color? selectionColor,
});

Props

Prop Type Default Description
data String Required (positional) The text content to render. First positional argument.
className dynamic null Wind utility class string applied to the text.
style TextStyle? null Explicit text style; merged over and overriding utility-driven styling.
strutStyle StrutStyle? null Strut style controlling minimum line height.
textAlign TextAlign? null Text alignment; overrides any text-left / text-center / text-right / text-justify utility.
textDirection TextDirection? null Direction in which the text flows.
locale Locale? null Locale used to select region-specific glyphs.
softWrap bool? null Whether the text wraps at soft line breaks; overrides overflow-derived wrapping.
overflow TextOverflow? null Overflow handling; overrides any truncate / text-clip / text-fade utility.
maxLines int? null Maximum number of lines; overrides any max-lines-{n} utility.
semanticsLabel String? null Alternative semantics label read by accessibility tools.
textWidthBasis TextWidthBasis? null How the text width is measured.
textHeightBehavior TextHeightBehavior? null How leading is applied to the first and last lines.
selectionColor Color? null Color of the selection highlight.

Supported Utility Classes

Class Type Example Documentation
Responsive Design sm:text-xl, xs:text-sm Responsive Design
Text Transform uppercase Text Transform
Text Color text-blue-400 Text Color
Font Weight font-bold Font Weight
Font Size text-lg, text-[18] Font Size
Font Style italic Font Style
Line Height leading-6, leading-[20] Line Height
Text Decoration underline, line-through Text Decoration
Letter Spacing tracking-wide, tracking-[4] Letter Spacing
Text Align text-center, text-justify Text Align
Padding p-4, pb-[6] Padding
Display Classes hide, show, sm:hide Display

Styling Examples

Utility-styled text:

WText('Utility Styled Text', className: 'text-red-500 font-bold text-lg dark:text-red-400');

Using explicit parameters (overrides utility classes):

WText(
  'Explicit Parameters',
  className: 'text-red-500 font-bold text-lg',
  // style overrides text-red-500 and font-bold
  style: TextStyle(color: Colors.green, fontWeight: FontWeight.w300),
);

Truncated, selectable text:

WText(
  'A long line of selectable text that truncates after one line',
  className: 'selectable truncate max-lines-1 text-gray-800 dark:text-gray-200',
);