Containers

What are the container building blocks?
Flex is the base class for Row and Column. It implements the flex layout protocol in an axis-agnostic manner.
Row is identical to Flex with a default axis of Axis.horizontal.
Column is identical to Flex with a default axis of Axis.vertical.
Flexible is the base class for Expanded. It is a parent data widget that alters its child’s flex value. Its default fit is FlexFit.loose, which causes its child to be laid out with loose constraints
Expanded is identical to Flexible with a default fit of FlexFit.tight. Consequently, it passes tight constraints to its children, requiring them to fill all available space.
How are flex-based containers laid out?
All flexible containers follow the same protocol.
Layout children without flex factors with unbounded main constraints and the incoming cross constraints (if stretching, cross constraints are tight).
Apportion remaining space among flex children using flex factors.
Main axis size = myFlex * (freeSpace / totalFlex)
Layout each child as above, with the resulting size as the main axis constraint. Use tight constraints for FlexFit.tight; else, use loose.
The cross extent is the max of all child cross extents.
If using MainAxisSize.max, the main extent is the incoming max constraint. Else, the main extent is the sum of all child extents in that dimension (subject to constraints).
Children are positioned according to MainAxisAlignment and CrossAxisAlignment.
How are containers laid out?
In short, containers size to their child plus any padding; in so doing, they respect any additional constraints provided directly or via a width or height. Decorations may be painted over this entire region. Next, a margin is added around the resulting box and, if specified, a transformation applied to the entire container.
If there is no child and no explicit size, the container shrinks in unbounded environments and expands in bounded ones.
The container widget delegates to a number of sub-widgets based on its configuration. Each behavior is layered atop all previous layers (thus, child refers to the accumulation of widgets). If a width or height is provided, these are transformed into extra constraints.
If there is no child and no explicit size:
Shrink when the incoming constraints are unbounded (via LimitedBox); else, expand (via ConstrainedBox).
If there is an alignment:
Align the child within the parent (via Align).
If there is padding or the decoration has padding...
Apply the total padding to the child (via Padding).
If there is a decoration:
Wrap the child in the decoration (via DecoratedBox).
If there is a foreground decoration:
Wrap the child in the foreground decoration (via DecoratedBox, using DecorationPosition.foreground).
If  there are extra constraints:
Apply the extra constraints to the incoming constraints (via ConstrainedBox).
If there is a margin...
Apply the margin to the child (via Padding).
If there is a transform...
Transform the child accordingly (via Transform).
Last modified 3yr ago