# 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`).