WContainer
A utility-first container widget that wraps Flutter's Container, styled directly with Wind className utilities.
On this page
widgets/wcontainer
The live demo is not available for this example.
wcontainer.dart
View source
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'),
);
Basic Usage#
WContainer is the Wind equivalent of an HTML <div>: 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.