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.

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.

Open Preview 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'),
  ],
);