What is Flexible in Flutter?

Flexible is a widget that controls how a child of a Row, Column, or Flex flexes. It allows the child to share the available space along the main axis, but unlike Expanded, it does not force the child to fill the space. Instead, the child can be smaller than the available space (if fit is FlexFit.loose). Flexible is the base class for Expanded.

Basic Usage

Wrap any child with Flexible inside a Row or Column. Provide a flex factor to control the proportion of space, and optionally set fit to FlexFit.tight (forces fill) or FlexFit.loose (allows the child to be smaller).

DARTRead-only

Row(
  children: [
    Flexible(
      flex: 1,
      fit: FlexFit.loose,
      child: Container(color: Colors.red, height: 50),
    ),
    Flexible(
      flex: 2,
      fit: FlexFit.tight,
      child: Container(color: Colors.green, height: 50),
    ),
  ],
)

Row(
  children: [
    Flexible(
      flex: 1,
      fit: FlexFit.loose,
      child: Container(color: Colors.red, height: 50),
    ),
    Flexible(
      flex: 2,
      fit: FlexFit.tight,
      child: Container(color: Colors.green, height: 50),
    ),
  ],
)

Flexible vs Expanded

Expanded is simply Flexible(fit: FlexFit.tight). The key difference:

Expanded forces its child to fill the remaining space.
Flexible (with FlexFit.loose) allows the child to be its natural size, but still gives it a share of the space.

DARTRead-only

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(color: Colors.yellow, child: Text('Small')),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(color: Colors.yellow, child: Text('Small')),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

Key Properties

flex (default 1): The flex factor to use when distributing space.
fit: Either FlexFit.tight (force fill) or FlexFit.loose (allow smaller).
child: The widget being flexed.

Common Use Cases

Allowing a widget to take available space but not stretch if its content is small.
Creating responsive layouts where some items have natural widths.
Combining with Expanded to mix fixed and flexible sizing.

Key Points to Remember

Flexible must be a direct child of a flex widget (Row, Column, Flex).
Use FlexFit.loose when you want the child to have a say in its size.
Use FlexFit.tight (or Expanded) when you want the child to fill the space.
The flex property distributes space proportionally among all flex children.

Common Interview Questions

What is the difference between Flexible and Expanded?
How does FlexFit.loose behave? Give an example.
Can you use Flexible with a flex of 0? What happens?
What happens if you put two Flexible widgets with different fit values in the same Row?

Try it yourself

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flexible Example')),
        body: Center(
          child: Container(
            height: 100,
            color: Colors.grey[300],
            child: Row(
              children: [
                Flexible(
                  flex: 1,
                  fit: FlexFit.loose,
                  child: Container(color: Colors.red, child: Center(child: Text('A'))),
                ),
                Flexible(
                  flex: 2,
                  fit: FlexFit.tight,
                  child: Container(color: Colors.green, child: Center(child: Text('B'))),
                ),
                Flexible(
                  flex: 1,
                  fit: FlexFit.loose,
                  child: Container(color: Colors.blue, child: Center(child: Text('C'))),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 2

What does `FlexFit.loose` do?

Forces the child to fill all available space

Allows the child to be smaller than the available space

Makes the child take exactly its intrinsic size

Ignores the flex factor

of 2

Which widget is equivalent to `Flexible(fit: FlexFit.tight)`?

Container

Expanded

SizedBox

Spacer

Row( children: [ Flexible( flex: 1, fit: FlexFit.loose, child: Container(color: Colors.red, height: 50), ), Flexible( flex: 2, fit: FlexFit.tight, child: Container(color: Colors.green, height: 50), ), ], )

Row( children: [ Flexible( fit: FlexFit.loose, child: Container(color: Colors.yellow, child: Text('Small')), ), Expanded( child: Container(color: Colors.blue), ), ], )

Try it yourself

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flexible Example')),
        body: Center(
          child: Container(
            height: 100,
            color: Colors.grey[300],
            child: Row(
              children: [
                Flexible(
                  flex: 1,
                  fit: FlexFit.loose,
                  child: Container(color: Colors.red, child: Center(child: Text('A'))),
                ),
                Flexible(
                  flex: 2,
                  fit: FlexFit.tight,
                  child: Container(color: Colors.green, child: Center(child: Text('B'))),
                ),
                Flexible(
                  flex: 1,
                  fit: FlexFit.loose,
                  child: Container(color: Colors.blue, child: Center(child: Text('C'))),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 2

What does `FlexFit.loose` do?

Forces the child to fill all available space

Allows the child to be smaller than the available space

Makes the child take exactly its intrinsic size

Ignores the flex factor

of 2

Which widget is equivalent to `Flexible(fit: FlexFit.tight)`?

Container

Expanded

SizedBox

Spacer

Flutter Flexible Widget Tutorial for Beginners

Flutter Flexible Widget Tutorial for Beginners

What is Flexible in Flutter?

Basic Usage

Flexible vs Expanded

Key Properties

Common Use Cases

Key Points to Remember

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?

Flutter Flexible Widget Tutorial for Beginners

Flutter Flexible Widget Tutorial for Beginners

What is Flexible in Flutter?

Basic Usage

Flexible vs Expanded

Key Properties

Common Use Cases

Key Points to Remember

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?