“This is the third day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

preface

The Text component of Flutter was briefly introduced in the previous article. This article introduces the Container component.

A:Container

Container is a convenient widget that combines normal drawing, positioning, and resizing widgets.

1.1 Containerstructure

Container is usually used as a Container for other widgets, so the primary property is child (a child widget similar to an iOS subview).

The Container first surrounds the child with the padding, then applies additional constraints to the fill range (if one of them is non-empty, the width and height are combined as constraints), and finally, the Container is surrounded by other empty Spaces described by the margin.

During the drawing process, the Container first applies the given transform, then draws decoration to fill the filling range, then draws child, and finally draws foregroundDecoration to fill the filling range.

Containers without child widgets are as large as possible. Unless the incoming constraints are unbounded, in which case they will be as small as possible.

A Container with child widgets resizes itself based on the size of the child widgets. However, if the constructor contains width, height, and constraints, it resizes itself according to the constructor parameters.

By default, Container returns false for all hit tests. If the color attribute is specified, the hit test is handled by ColoredBox, which always returns true. If the decoration or foregroundDecoration property is specified, the hit test is processed by decoration. hitTest.

1.2 Containerlayout

Container’s layout behavior is somewhat complex because it combines many other widgets, each of which has its own layout behavior.

Summary:

  • ContainerTry, in this order: followalignmentAnd according to thechildResize and conformwidth,heightandconstraints, expand itself to fit the parent, adjust itself to be as small as possible.

To be more specific:

  • If there are no children, width, height, and constraints, and the parent provides unbounded constraints, then the Container will try to adjust itself to be as small as possible.

  • If there are no children and no alignment, but width, height, and constraints are provided, then the Container will adjust itself to be as small as possible based on these constraints and the constraints of the parent.

  • If there are no children, width, height, constraints, and alignment, but the parent provides bounded Constraints, the Container will expand to accommodate the constraints provided by the parent.

  • If alignment is available, and the parent part provides unbounded constraints, the Container will attempt to resize itself around the child parts.

  • If there is alignment, and the parent provides bounded constraints, the Container will try to expand to accommodate the parent, and then position the children into itself based on alignment.

  • If there are children but no width, height, constraints, and alignment, the Container passes constraints from the parent to the children and resizes itself to match the children.

  • Margin and padding properties also affect the layout, as described in the documentation for these properties (their effect only reinforces the rules above). Decoration can implicitly add padding.

1.3 ContainerBasic properties

  • Key: unique identifier of the widget, used for authentication and update.

  • Alignment: Controls the alignment of the child. This property takes effect if the Container or its parent component is larger than the child size.

  • Padding: space inside decoration. If there’s a child, it’s inside the padding.

  • Color: Container Background color. If the color decoration is set, the color effect may be obscured.

  • Decoration: Decoration drawn after child, using the color attribute to specify a simple solid color.

  • ForegroundDecoration: Decoration painted in front of child.

  • Constraints: Additional constraints applied to the child,

  • Margin: The empty area surrounding decoration and child.

  • Transform: Transform matrix to be applied before drawing the container.

  • TransformAlignment: Specifies the alignment of the origin relative to the Container size if the transform is specified.

  • Child: child of a Container.

  • ClipBehavior: indicates the clipping behavior. This parameter is valid only when Container. Decoration is not null.

The difference between padding and margin: the padding is contained within the content, while the margin is the outer boundary. The padding area can respond to interactions, while the margin area cannot.

1.4 ContainerUsing an example

void main(a) {
  // Execute runApp, pass in the widget, and it will be displayed on the screen
  runApp(
      MyApp()); }class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.white,
      alignment: Alignment.center,
      child: Container(
        constraints: BoxConstraints.expand(
          height: Theme.of(context).textTheme.headline4! .fontSize! *1.1 + 200,
        ),
        padding: const EdgeInsets.all(10.0),
        color: Colors.blue[600],
        alignment: Alignment.center,
        child: Text('Hello Flutter',
          style: Theme.of(context)
                .textTheme
                .headline4!
                .copyWith(color: Colors.white),
            textDirection: TextDirection.ltr,
        ),
        transform: Matrix4.rotationZ(0.1),),); }}Copy the code

Operation effect:

For more information about Containers, see the official document Container.

Look forward to attention, continuous output.