A Detailed comparison between Expanded and Flexible and where do we use it

Often times we are confused about when do we use Expanded and Flexible widgets while building complex layouts without depending on tight dependency.

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.

Remember this, Expanded is just a shorthand for Flexible

Expanded is just a shorthand for Flexible

Using Expanded this way:

Expanded(
  child: Foo(),
);

is strictly equivalent to:

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