Introduction to Containers
A handy widget that combines the common drawing, positioning and sizing widgets.
The composition of Container
The child element will first be wrapped by padding; then additional constraints will be added; finally margin will be added.
Container drawing
When drawing, first draw the transform effect; then draw the decoration; then draw the child; finally draw the foregroundDecoration, filling the filling range.
Container size adjustment
Container will try to become big enough when it has no children. If the constraints are unbounded constraints, the Container will try to be small enough. A Container with child nodes will adjust its own size according to the size of the child nodes, but if the Container constructor contains width, height, and constraints, the size will be adjusted according to the parameters in the constructor.
The layout behavior of a Container is somewhat complicated because a Container composes many other widgets, each with its own layout behavior.
In general: the order of Container attempts is: respect alignment, resize itself according to child objects, respect width, height and constraints, expand to fit parent objects, and be as small as possible.
More specifically:
If the widget has no children, no height, no width, no constraints, and the parent provides an unbounded constraint, the Container will try to shrink in size.
If a widget has no children and no alignment, but a height, width, or constraint is provided, the Container will be as small as possible, taking into account the combination of those constraints and the parent's constraints.
If the widget has no children, no height, no width, no constraints, and no alignment, but the parent provides constraints with bounds, the Container will expand to fit the constraints provided by the parent.
If the widget has an alignment, and the parent provides an infinite constraint, the Container will try to size itself around the child.
If the widget has an alignment, and the parent provides a bounded constraint, the Container will attempt to expand to fit the parent, and then place the child within itself according to the alignment.
Otherwise, the widget has a child, but no height, width, constraints, and alignment, and the Container passes the constraints from the parent to the child and resizes it to match the child.
The margin and padding properties also affect layout, as described in the documentation for these properties. (Their effect is simply to enforce the above rules.) Decorations can implicitly increase padding (e.g. borders in BoxDecoration contribute to padding)
Container instance
Container will try to become big enough when it has no children.
The code is as follows:
Container(
margin: const EdgeInsets.all(10.0),
color: Colors.amber[600],
),
A Container with child nodes will adjust its own size according to the size of the child nodes
Container(
margin: const EdgeInsets.all(10.0),
color: Colors.amber[600],
child: Text(
‘This is a Container’,
style: TextStyle(fontSize: 24),
),
),
If the Container constructor contains width, height, and constraints, the size will be adjusted according to the parameters in the constructor.
Container(
margin: const EdgeInsets.all(10.0),
color: Colors.amber[600],
width: 48.0,
height: 48.0,
child: Text(
‘This is a Container’,
style: TextStyle(fontSize: 24),
),
),
