WFlexible
A utility-first wrapper for Flutter's Flexible that controls flex factor and fit through className utilities; renders a Spacer when no child is given.
On this page
widgets/wflexible
The live demo is not available for this example.
wflexible.dart
View source
WFlexible(
className: 'flex-1 flex-grow',
child: WText('Flexible Child', className: 'text-blue-500 text-center'),
);
Basic Usage#
WFlexible corresponds to the CSS flex property: place it inside a WFlex and use flex-x to set its flex factor and flex-grow / flex-auto / flex-none to set its fit. If child is omitted, WFlexible renders a Spacer with the resolved flex value, which is handy for flexible gaps and layout fillers. Visibility utilities such as hide, show, and sm:hide conditionally render the widget based on screen size.
WFlexible(
className: 'flex-1',
child: WText('Flexible Item'),
);
Constructor#
WFlexible({
Key? key,
dynamic className,
int? flex,
FlexFit? fit,
Widget? child,
});
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
className |
dynamic |
null |
Wind utility class string controlling flex factor and fit. |
flex |
int? |
null |
Flex factor; overrides any flex-x utility. Falls back to 1 when neither the flex parameter nor a flex-x utility is set. |
fit |
FlexFit? |
null |
How the child fills available space; overrides any flex-grow / flex-auto / flex-none utility. Defaults to FlexFit.loose when unset. |
child |
Widget? |
null |
The widget to make flexible. When omitted, a Spacer is rendered instead. |
Supported Utility Classes#
| Class Type | Example | Documentation |
|---|---|---|
| Responsive Design | sm:, xs:, md: |
Responsive Design |
| Flex-x | flex-1, flex-2 |
Flex-x |
| Flex Fit Classes | flex-grow, flex-auto |
Flex Fit Classes |
| Display Classes | hide, show, sm:hide |
Display |
Styling Examples#
A flexible item that grows to fill its row:
WFlex(
className: 'flex-row gap-2',
children: [
WContainer(className: 'w-16 bg-gray-300'),
WFlexible(
className: 'flex-1 flex-grow',
child: WContainer(className: 'bg-blue-500 h-10'),
),
],
);
A spacer pushing items apart (no child):
WFlex(
className: 'flex-row',
children: [
WText('Left', className: 'text-gray-700 dark:text-gray-200'),
WFlexible(className: 'flex-1'),
WText('Right', className: 'text-gray-700 dark:text-gray-200'),
],
);
Related Documentation#
- WFlex — the flex layout WFlexible lives inside.
- WFlexContainer — styled container with flex layout.
- Flex-x — flex factor utilities.
- Flex Fit Classes — flex fit utilities.