WFlex

WFlex(
  className: 'flex-col justify-center items-center gap-4',
  children: [
    WContainer(className: 'w-10 h-10 bg-blue-500'),
    WContainer(className: 'w-10 h-10 bg-green-500'),
  ],
);

. It lays out a list of children along a main axis, controlling direction, justification, cross-axis alignment, gap spacing, and overflow with utility classes. When a Flutter Flex parameter is passed explicitly, it takes precedence over the matching utility class.

WFlex(
  className: 'flex-row justify-center items-center gap-4',
  children: [
    WText('Child 1', className: 'text-red-500'),
    WText('Child 2', className: 'text-blue-500'),
  ],
);

Constructor

WFlex({
  Key? key,
  dynamic className = '',
  Axis? direction,
  MainAxisAlignment? mainAxisAlignment,
  MainAxisSize? mainAxisSize,
  CrossAxisAlignment? crossAxisAlignment,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline? textBaseline,
  Clip clipBehavior = Clip.none,
  required List children,
});

Props

Prop	Type	Default	Description
className	dynamic	''	Wind utility class string applied to the flex layout.
children	List	Required	The widgets laid out along the main axis.
direction	Axis?	null	Main-axis direction; overrides any flex-row / flex-col utility.
mainAxisAlignment	MainAxisAlignment?	null	Main-axis alignment; overrides any justify-* utility.
mainAxisSize	MainAxisSize?	null	Main-axis size; overrides any axis-min / axis-max utility.
crossAxisAlignment	CrossAxisAlignment?	null	Cross-axis alignment; overrides any items-* utility.
textDirection	TextDirection?	null	Text direction used to resolve start / end alignment.
verticalDirection	VerticalDirection	VerticalDirection.down	Order in which children are laid out vertically.
textBaseline	TextBaseline?	null	Baseline used when cross-axis alignment is baseline.
clipBehavior	Clip	Clip.none	How overflowing content is clipped.

Supported Utility Classes

Class Type	Example	Documentation
Responsive Design	sm:flex-row, xs:flex-col	Responsive Design
Flex Direction	flex-row, flex-col	Flex Direction
Justify Content	justify-center, justify-start	Justify Content
Align Items	items-center, items-start	Align Items
Axis Sizes	axis-max, axis-min	Axis Sizes
Gap (Spacing)	gap-2, gap-[4]	Gap (Spacing)
Overflow	overflow-scroll	Overflow
Display Classes	hide, show, sm:hide	Display

Styling Examples

A spaced row of items:

WFlex(
  className: 'flex-row justify-between items-center gap-2',
  children: [
    WText('Left', className: 'text-gray-700 dark:text-gray-200'),
    WText('Right', className: 'text-gray-700 dark:text-gray-200'),
  ],
);

A scrollable column:

WFlex(
  className: 'flex-col gap-4 overflow-scroll',
  children: [
    WContainer(className: 'w-full h-20 bg-blue-500'),
    WContainer(className: 'w-full h-20 bg-green-500'),
    WContainer(className: 'w-full h-20 bg-purple-500'),
  ],
);

Related Documentation

• WFlexContainer — combines a styled container with flex layout.
• WFlexible — flexible child sizing within a flex layout.
• WContainer — single-child styled box.
• Flex Direction — main-axis direction utilities.