What is the purpose of the Flex widget in Flutter?

Overview

The

Flex

Row

Column

Flex vs Row vs Column

Flex

Row

Flex

direction: Axis.horizontal

Column

Flex

direction: Axis.vertical

Basic Usage

dartCopy
// This is equivalent to Row
Flex(
  direction: Axis.horizontal,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

// This is equivalent to Column
Flex(
  direction: Axis.vertical,
  children: [
    Text('Item 1'),
    Text('Item 2'),
  ],
)

Dynamic Axis — The Main Use Case

The real power of

Flex

dartCopy
class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final isLandscape =
        MediaQuery.of(context).orientation == Orientation.landscape;

    return Flex(
      direction: isLandscape ? Axis.horizontal : Axis.vertical,
      children: [
        Expanded(child: ImagePanel()),
        Expanded(child: DetailsPanel()),
      ],
    );
  }
}

All Available Properties

dartCopy
Flex(
  direction: Axis.horizontal,           // Required: horizontal or vertical
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  textDirection: TextDirection.ltr,
  verticalDirection: VerticalDirection.down,
  children: [...],
)

When to Use

textCopy

Flex

vs

textCopy

Row

/

textCopy

Column

Row

Column

Flex

Flex

In practice: You will rarely use

textCopy

Flex

directly. Use

textCopy

Row

and

textCopy

Column

for clarity. Use

textCopy

Flex

when you need runtime axis switching.