Container inside Row and Row inside Container

Question

In a flutter app, what is the difference between a Container inside a Row and a Row inside Container? In flutter in each time I want to make an app, I took minutes to ask my self which one should I choose?

Answer 1

In flutter Row and Column provide a way to use the Flex layout system aka FlexBox.

In short Flex is a one-dimensional layout system, where in the children can be aligned on the main-axis or cross-axis, the main axis can be defined as horizontal or vertical.

A Container in Flutter is a general-purpose widget that gives you access to a range of properties like padding, decoration, size etc. A full-list is available at the API Docs

To answer your question,

A Container in a Row is like we said above, a child of a Flex, which means it will respect the properties of alignment set by the parent (MainAxisAlignment/CrossAxisAlignment )

A Row in a Container, is the opposite of that which means that, the Row or Column will respect properties set on the Container that is for example the Decoration or Size properties amongst others.