Flutter: Expanded vs Flexible

Question

I've used both Expanded and Flexible widgets and they both seem to work the same.

What is the difference between Expanded and Flexible?

Answer 1

Scaffold(
  appBar: AppBar(),
  body: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          buildExpanded(),
          buildFlexible(),
        ],
      ),
      Row(
        children: <Widget>[
          buildExpanded(),
          buildExpanded(),
        ],
      ),
      Row(
        children: <Widget>[
          buildFlexible(),
          buildFlexible(),
        ],
      ),
    ],
  ),
);

Answer 2

Expanded is just a shorthand for Flexible

Using Expanded this way:

Expanded(
  child: Foo(),
);

is strictly equivalent to:

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

---

You may want to use Flexible over Expanded when you want a different fit, useful in some responsive layouts.

The difference between FlexFit.tight and FlexFit.loose is that loose will allow its child to have a maximum size while tight forces that child to fill all the available space.

Answer 3

Widget under Flexible are by default WRAP_CONTENT although you can change it using parameter fit.

Widget under Expanded is MATCH_PARENT you can change it using flex.

Answer 4

Expanded - it is Flexible with set fit

class Expanded extends Flexible {
    const Expanded({
        Key key,
        int flex = 1,
        @required Widget child,
    }) : super(
        key: key, 
        flex: flex, 
        fit: FlexFit.tight, 
        child: child
    );
}

Answer 5

You may use Flexible to resize the widgets in rows and columns. It's mainly used to adjust the space of the different child widgets while keeping the relation with their parent widgets.

Meanwhile, Expanded changes the constraints sent to the children of rows and columns; it helps to fill the available spaces there. Therefore, when you wrap your child in an Expanded widget it fills up the empty spaces.

Providing these videos from the Flutter's Official YouTube channel just to help out people, who might look for this in the upcoming future...

1. Expanded:

2. Flexible:

Answer 6

Expanded() is nothing more than Flexible() with

Flexible (fit: FlexFit.tight) = Expanded()

but, Flexible uses fit :FlexFit.loose by default.

FlexFit.tight = Wants to fit tight into parent taking as much space as possible.

FlexFit.loose = Wants to fit loose into parent taking as little space as possible for itself.

Answer 7

Expanded changes the constraints of a child widget so it fills any empty space. Expanded widget is a specialised Flexible widget with a set fit - Flexible(fit: FlexFit.tight. Expanded widgets also have a flex property.

Flexible makes the child widget flexible and resizable. You can add the flex or fit property to adjust the size and spacing.

Flexible fit properties include:

• FlexFit.loose - The widget’s preferred size is used. (Default)
• FlexFit.tight - Forces the widget to fill all of its extra space.

Answer 8

Flexible default will share the available space of the parent widget, but will NOT force the child to fit the space.

Expanded will share the available space of the parent widget, and force the child widget to change its width/height to fill the available space.

In fact, Expanded extends Flexible, which is a Flexible with FlexFit.tight. See the official document.

Here is a Container widget and three Flexible Widgets(flex = 1, fit = FlexFit.loose) in a row. We can see that the three flexible widgets share the same maxWidth (1/3 of the available screen width), and the blue one wants bigger than it, and the others want smaller. But as we can see, the blue guy has maxWidth as its width and the other widgets' width just fit their content.

Here is the code of the image above up:

        Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            Container(
                color: Colors.teal,
                child: Text(
                  'Container Text ',
                )),
            Flexible(
              child: Container(
                  color: Colors.blue,
                  child: Text(' Text.Flexible Text.Flexible Text.Flexible.')),
            ),
            Flexible(
              child: Container(
                  color: Colors.yellow, child: Text('Flexible Text.')),
            ),
            Flexible(
              child: Container(
                  color: Colors.lightGreen, child: Text('Flexible.')),
            ),
          ],
        )

Answer 9

The Expanded widget in flutter is shorthand of Flexible with the default fit of FlexFit.tight. A Flexible widget plays a very important part in making a responsive app. This will make the app looks and feels the same across multiple device sizes. But if one wants just basic filling up of spaces by widgets, then you can use Expanded.

https://flutteragency.com/flexible-widget-in-flutter/ This blog explains the main difference between the the two widget which are sometimes confusing to others...

Answer 10

here is the best example of expanded vs flexible

Scaffold(
      body: Column(
        children: [
          Flexible(
            child: Container(
              color: Colors.grey,
              child: ListView.builder(
                shrinkWrap: true,
                  itemCount: 6,
                  itemBuilder: (context,index){
                    return ListTile(title: Text('$index'),);
                  }),
            ),
          )
        ],
      ),
    )

flexible will take as much space as needed while expanded will occupy as maximum as it can..

to see the difference replace flexible with expand widget..it will occupy all possible space...