WFlex

The WFlex widget in the Wind plugin provides a utility-driven approach to building flexible layouts in Flutter. It simplifies handling alignment, spacing, and direction by leveraging utility classes, similar to how TailwindCSS works in web development.

Supported Utility Classes

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

Class Type	Example	Documentation
Responsive Design	sm:flex-row, xs:flex-col	Responsive Design
Flex Direction	flex-row, flex-col	Flex Direction
Justify Content	justify-center, justify-start	Justify Content
Align Items	items-center, items-start	Align Items
Axis Sizes	axis-max, axis-min	Axis Sizes
Gap (Spacing)	gap-2, gap-[4]	Gap (Spacing)
Overflow	overflow-scroll	Overflow

Example

WFlex(
  className: 'flex-col justify-center items-center gap-4',
  children: [
    WContainer(className: 'w-10 h-10 bg-blue-500'),
    WContainer(className: 'w-10 h-10 bg-green-500'),
  ],
);

The above example HTML equivalent is:

<div class="flex flex-col justify-center items-center gap-4">
  <div class="w-10 h-10 bg-blue-500"></div>
  <div class="w-10 h-10 bg-green-500"></div>
</div>