flutter: expanded vs flexible

Utilizing an Expanded gadget makes an offspring of a Row or Column (likewise for Flex) extend to occupy the accessible space in the principle hub ( evenly for a Row or vertically for a Column). On the off chance that different kids are extended, the accessible space is split between them as per the flex factor.

How about we improve. For instance we have a segment with 3 holder including a letter.

Image for post
Image for post

Typically Row and Column partition the free space agreeing the size of the youngsters gadgets. Youngsters are rigid. Additionally this space use rely upon the cushioning territory or mainAxisAlignment property (Row and Column Usage)

Yet, in the event that you need a portion of the kids stretch and occupy the additional room then you should utilize Expanded gadget (Wrap the youngsters with Expanded gadget) In the present circumstance kid become adaptable.

Image for post
Only one child is wrapped with Expanded widget and use all free space.Image for post
Image for post
Two children are wrapped with Expanded widget and share equally remaining free spaceImage for post

Without giving any additional property like flex, Expanded gadgets utilize all leftover space similarly. On the off chance that one kid is extended utilize all free space, if there are at least two kids are extended, they share all free space equally.(Default flex:1)

On the off chance that you need to give some scale to share the free space, you should utilize flex factor. Flex factor is a property of Expanded gadget and decides the use and sharing of the leftover space between kids gadgets.

Image for post
B using 2x, C using 3x free space acording the flex factor. A is not expandedImage for post

You can see some place adaptable gadget and possibly get confounded what is the contrast between these two gadgets.

Extended versus Flexible

Infact, Expanded gadget is reached out from Flexible gadget. Extended is a shorthand for Flexible with tight fit. To explain the issue, you can discover the code of the Expanded class in shudder beneath. What you can see it broadens the Flexiable class wih fit property FlexFit.tight.

Extended is an extraordinary use of the Flexiable Widget

class Expanded extends Flexible {
// Creates a widget that expands a child of a [Row], [Column], or [Flex]
/// so that the child fills the available space along the flex widget's main axis.
const Expanded({
Key key,
int flex = 1,
@required Widget child,
}) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

Thanks for being with us on a Flutter Journey!!!

Leave a Comment