WFlexible

The WFlexible widget in the Wind plugin is a utility-first wrapper for Flutter’s Flexible widget. It allows for dynamic and responsive layout management by leveraging utility classes.

If child is omitted, WFlexible renders a Spacer with the appropriate flex value.
This is useful when creating flexible gaps or layout fillers.

You can also use visibility utility classes such as hide, show, or sm:hide to conditionally render the widget based on screen size.

Supported Utility Classes

The following utility classes can be used with the WFlexible widget:

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

Example

WFlexible(
  className: 'flex-1 flex-grow',
  child: WText('Flexible Child', className: 'text-blue-500 text-center'),
);

The above example HTML equivalent is:

<div class="flex-1 flex-grow">
  Child
</div>