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.

WFlexContainer

A utility-first widget that combines a styled WContainer with a WFlex layout, letting you decorate a box and lay out its children in one className.

Open Preview Source 

WFlexContainer(
  className: 'flex-col items-center justify-center gap-4 bg-gray-200 dark:bg-gray-800',
  children: [
    WContainer(
      className: 'w-16 h-16 bg-blue-500',
      child: WText('Child 1', className: 'text-white'),
    ),
    WContainer(
      className: 'w-16 h-16 bg-green-500',
      child: WText('Child 2', className: 'text-white'),
    ),
  ],
);

Basic Usage

WFlexContainer is a WContainer wrapping a WFlex, so it accepts both container styling utilities (background, border, padding, sizing) and flex layout utilities (direction, justify, align, gap) in the same className. It is the Wind equivalent of an HTML

that also carries box styling.

WFlexContainer(
  className: 'flex-col justify-center items-center gap-4 bg-gray-200 dark:bg-gray-800',
  children: [
    WContainer(className: 'w-full h-10 bg-blue-500'),
    WContainer(className: 'w-full h-10 bg-green-500'),
  ],
);

Constructor

WFlexContainer({
  Key? key,
  required List children,
  dynamic className = '',
  AlignmentGeometry? alignment,
  EdgeInsetsGeometry? padding,
  Color? color,
  Decoration? decoration,
  Decoration? foregroundDecoration,
  double? width,
  double? height,
  BoxConstraints? constraints,
  EdgeInsetsGeometry? margin,
  Matrix4? transform,
  AlignmentGeometry? transformAlignment,
  Clip clipBehavior = Clip.none,
  Axis? direction,
  MainAxisAlignment? mainAxisAlignment,
  MainAxisSize? mainAxisSize,
  CrossAxisAlignment? crossAxisAlignment,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline? textBaseline,
});

Props

Prop Type Default Description
className dynamic '' Wind utility class string applied to both the container and the flex layout.
children List Required The widgets laid out along the main axis.
alignment AlignmentGeometry? null Container alignment; overrides utility-driven alignment.
padding EdgeInsetsGeometry? null Inner padding of the container.
color Color? null Container background color.
decoration Decoration? null Full box decoration for the container.
foregroundDecoration Decoration? null Decoration painted in front of the children.
width double? null Fixed container width.
height double? null Fixed container height.
constraints BoxConstraints? null Box constraints for the container.
margin EdgeInsetsGeometry? null Outer margin of the container.
transform Matrix4? null Transformation matrix applied to the container.
transformAlignment AlignmentGeometry? null Origin of the transform.
clipBehavior Clip Clip.none How content is clipped, applied to both container and flex.
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.

Supported Utility Classes

Class Type Example Documentation
Responsive Design sm:flex-col, xs:flex-row Responsive Design
Flex Direction flex-row, flex-col Flex Direction
Justify Content justify-center, justify-between Justify Content
Align Items items-start, items-center Align Items
Axis Sizes axis-max, axis-min Axis Sizes
Gap (Spacing) gap-2, gap-[4] Gap (Spacing)
Flex-x flex-1, flex-2 Flex-x
Flex Fit Classes flex-grow, flex-auto Flex Fit Classes
Alignment alignment-top-left, alignment-center-right Alignment
Padding p-4, px-[6], py-2 Padding
Margin m-8, mx-[4], my-2 Margin
Width w-10, w-[30] Width
Height h-10, h-[30] Height
Max-Width & Min-Width max-w-10, min-w-[50] Max-Width & Min-Width
Max-Height & Min-Height max-h-10, min-h-[50] Max-Height & Min-Height
Background Color bg-red-500, bg-[#1abc9c] Background Color
Border Width border-4, border-[6] Border Width
Border Color border-red-500, border-[#1abc9c] Border Color
Border Radius rounded-lg, rounded-full Border Radius
Overflow overflow-scroll Overflow
Shadow shadow-md, shadow-lg Shadow
Display Classes hide, show, sm:hide Display

Styling Examples

A padded, rounded panel with centered children:

WFlexContainer(
  className: 'flex-col items-center gap-4 p-4 rounded-lg bg-white shadow-md dark:bg-gray-900',
  children: [
    WText('Title', className: 'text-lg font-bold text-gray-900 dark:text-white'),
    WText('Subtitle', className: 'text-gray-600 dark:text-gray-300'),
  ],
);

A horizontal bar:

WFlexContainer(
  className: 'flex-row justify-between items-center px-4 h-16 bg-gray-100 dark:bg-gray-800',
  children: [
    WText('Brand', className: 'font-bold text-gray-900 dark:text-white'),
    WText('Menu', className: 'text-gray-600 dark:text-gray-300'),
  ],
);

  • WFlex — flex layout without container styling.
  • WContainer — styled box without flex layout.
  • WFlexible — flexible child sizing within the layout.
  • Justify Content — main-axis alignment utilities.