WContainer

WContainer(
  className: 'bg-gray-200 p-4 rounded-lg dark:bg-gray-800',
  child: WText('This is a container', className: 'text-lg text-gray-700 dark:text-gray-200'),
);

: a single-child box you style with utility classes. It wraps a single child; it does not lay out multiple children. For multi-child flex layouts reach for WFlex or WFlexContainer.

WContainer(
  className: 'bg-blue-500 p-4 rounded-lg shadow-md dark:bg-blue-700',
  child: WText('This is a container', className: 'text-white text-lg'),
);

Constructor

WContainer({
  Key? key,
  dynamic className = '',
  AlignmentGeometry? alignment,
  EdgeInsetsGeometry? padding,
  Color? color,
  Decoration? decoration,
  Decoration? foregroundDecoration,
  double? width,
  double? height,
  BoxConstraints? constraints,
  EdgeInsetsGeometry? margin,
  Matrix4? transform,
  AlignmentGeometry? transformAlignment,
  Widget? child,
  Clip clipBehavior = Clip.none,
});

Props

Prop	Type	Default	Description
className	dynamic	''	Wind utility class string applied to the container.
child	Widget?	null	The single widget wrapped by the container.
alignment	AlignmentGeometry?	null	Aligns the child within the container; overrides any alignment-* utility.
padding	EdgeInsetsGeometry?	null	Inner padding; overrides any p-* utility.
color	Color?	null	Background color; overrides any bg-* utility.
decoration	Decoration?	null	Full box decoration; when set, overrides the utility-driven background, border, and shadow.
foregroundDecoration	Decoration?	null	Decoration painted in front of the child.
width	double?	null	Fixed width; overrides any w-* utility.
height	double?	null	Fixed height; overrides any h-* utility.
constraints	BoxConstraints?	null	Box constraints; overrides utility-driven min/max sizing.
margin	EdgeInsetsGeometry?	null	Outer margin; overrides any m-* utility.
transform	Matrix4?	null	Transformation matrix applied before painting.
transformAlignment	AlignmentGeometry?	null	Origin of the transform relative to the container's size.
clipBehavior	Clip	Clip.none	How content is clipped to the container bounds.

Supported Utility Classes

Class Type	Example	Documentation
Responsive Design	sm:p-4, xs:mt-2	Responsive Design
Flex-x	flex-1, flex-3	Flex-x
Flex Fit Classes	flex-grow, flex-auto	Flex Fit Classes
Alignment	alignment-top-left	Alignment
Padding	p-4, p-[11]	Padding
Margin	m-8, m-[4]	Margin
Width	w-10, w-[30]	Width
Height	h-10, h-[30]	Height
Max-Width & Min-Width	max-w-10, min-w-10	Max-Width & Min-Width
Max-Height & Min-Height	max-h-10, min-h-10	Max-Height & Min-Height
Background Color	bg-red-500, bg-green	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
Shadow	shadow-sm, shadow-lg	Shadow
Display Classes	hide, show, sm:hide	Display

Styling Examples

A bordered, rounded card-like box:

WContainer(
  className: 'bg-white border-2 border-gray-200 rounded-lg p-4 dark:bg-gray-900 dark:border-gray-700',
  child: WText('Bordered box', className: 'text-gray-800 dark:text-gray-100'),
);

A fixed-size, centered tile:

WContainer(
  className: 'w-[120] h-[120] bg-blue-500 alignment-center rounded-lg',
  child: WText('Centered', className: 'text-white'),
);

Related Documentation

• WCard — card variant with elevation and shadow color.
• WFlex — multi-child flex layout.
• WFlexContainer — container and flex combined.
• WText — utility-styled text for container children.