Flutter Flexible vs Expanded widgets

Both the flexible and the expanded widgets are tightly bound to a Row or Column, which means these widgets can be used only inside a Row or Column.

Flexible Widget

Consider the scenario where we have a Column inside which we have two containers, consider the first container is of height 600 and the second container is also of height 600. The problem is the second container won't have enough space to occupy in smaller screens and we would encounter a Bottom overflowed error.

Solution

We can wrap the second container to a Flexible widget and we have a property named fit and it can have values such as loose fit and tight fit

Flexible with loose fit

If we set the property to loose fit, we know that the second container is of height 600. Loose fit means the container will take the least available space, if the available space is 600 pixels or more, it will take only 600 pixels and also when the available space is less than 600 pixels for example 350 pixels, it will take only 350 pixels.

Flexible with tight fit

If we set the property to tight fit, flexible is going to consider the height property of the child element, it is going to take whatever space is available. For example even if we specify the height as only 10 pixels, when the available space is around 200 pixels, it will take the entire space.

Expanded widget

Flexible with Flexfit.tight is an Expanded widget, it is a shortcut for the above method.