Flex-x

Assign a numeric flex factor to a child widget using flex-N, where N is a positive integer. Higher numbers claim proportionally more space.

• Basic Usage
• Quick Reference
• Responsive Design
• Related Documentation

import 'package:fluttersdk_wind/fluttersdk_wind.dart';

WFlexContainer(
  className: 'flex-row bg-gray-200',
  children: [
    WCard(
      className: 'flex-2 bg-blue-500',
      child: WText('Flex 2'),
    ),
    WCard(
      className: 'flex-1 bg-green-500',
      child: WText('Flex 1'),
    ),
  ],
);

Basic Usage

Use flex-N on a child widget to assign it a flex factor. The space is divided proportionally: a child with flex-2 receives twice the space of a sibling with flex-1.

Under the hood, flex-N resolves to FlexFit.tight with a flex value of N. This wraps the child in a Flutter Flexible widget.

WFlexContainer(
  className: 'flex-row bg-gray-200',
  children: [
    WCard(className: 'flex-3 bg-blue-500', child: WText('3 parts')),
    WCard(className: 'flex-1 bg-green-500', child: WText('1 part')),
    WCard(className: 'flex-1 bg-red-500', child: WText('1 part')),
  ],
);

Quick Reference

Any positive integer is accepted for N.

Responsive Design

Prefix flex-N with a breakpoint to change the flex factor at specific screen sizes.

WFlexContainer(
  className: 'flex-row bg-gray-200',
  children: [
    WCard(
      className: 'flex-1 md:flex-2 bg-blue-500',
      child: WText('Grows on md+'),
    ),
    WCard(
      className: 'flex-1 bg-green-500',
      child: WText('Always 1'),
    ),
  ],
);

Related Documentation

• Flex Fit — flex-grow / flex-auto for non-numeric flex sizing.
• Axis Sizes — control the container's main-axis size.
• WFlexible — the widget that wraps Flutter Flexible.
• WFlexContainer — the primary flex layout widget.