After struggle with Flutter’s Layout System for a while, it seems i have passed the aha moment, so let’s talk about it.

Key Concepts

there are some key concepts in Flutter’s Layout System. knowing them is essential to help understanding layout.

Unbounded Constraints

either the maximum width or the maximum height is set to double.INFINITY

ScrollView and its descendant

ScrollView and its descendant like ListView or GridView are most seen, other widgets that can set width or height to double.INFINITY also counts. sometimes they are called as big as possible.

Flex

when in bounded constraints, try to be as big as possible in that direction. when in unbounded constraints, try to fit their children in that direction.

Row and Column

Row and Column are Flex instances, if you want more control, Flex widget is also available. they can be used with Flexible widgets, but not restricted to. (a Text widget in Column is totally fine.)

Flexible

Use it within Flex. Flexible declares what percent space to use.

i.e. flex = 1 means 1/all , if all = 1 + 1 , then it’s 50%.

Expanded