Layout

Flutter layout uses constraints flow down, sizes flow up.

1. Parent gives constraints
2. Child picks/calculates size
3. Parent positions child

Container(width: 300)
   ↓ constraint
Child (cannot exceed 300)

BoxConstraints

• Flutter layout uses:

BoxConstraints(
 minWidth
 maxWidth
 minHeight
 maxHeight
)

• Example:

minWidth: 0
maxWidth: 300
minHeight: 0
maxHeight: 100

Row

• Row gives unbounded width to children.

• So sometimes see error: RenderFlex overflowed

• Fix using:

  Expanded
  Flexible
  SizedBox
  

• Example:

  Row(
   children: [
     Expanded(child: Text("Hello")),
     Text("World")
   ]
  )