The Container is introduced

If a component needs some background style, shape, or size restrictions, it can be wrapped in a Container. The child components are used for decoration and positioning, so a Container is a composite class Container. It is a multifunctional container composed of DecoratedBox, ConstrainedBox, Transform, Padding, Align, and more.

The sample code

Many of the effects in this article are not screenshots. Download the source code to run the project source code address, or view the video tutorial address through the video tutorial

When is Container used?

Use Container when you need multiple restrictions on a component, such as setting the size, background color, rounded corners, and so on for the same box.

Container constructor

Container({
  Key? key,
  this.alignment,
  this.padding,
  this.color,
  this.decoration,
  this.foregroundDecoration,
  double? width,
  double? height,
  BoxConstraints? constraints,
  this.margin,
  this.transform,
  this.transformAlignment,
  this.child,
  this.clipBehavior = Clip.none,
}) : assert(margin == null || margin.isNonNegative),
     assert(padding == null || padding.isNonNegative),
     assert(decoration == null || decoration.debugAssertIsValid()),
     assert(constraints == null || constraints.debugAssertIsValid()),
     assert(clipBehavior ! =null),
     assert(decoration ! =null || clipBehavior == Clip.none),
     assert(color == null || decoration == null.'Cannot provide both a color and a decoration\n'
       'To provide both, use "decoration: BoxDecoration(color: color)".', ), constraints = (width ! =null|| height ! =null)
        ? constraints?.tighten(width: width, height: height)
          ?? BoxConstraints.tightFor(width: width, height: height)
        : constraints,
     super(key: key);
Copy the code

Container properties and Description

field attribute describe
color Color The background color of the box
child Widget Child components
width double Width of box
height double Height of box
alignment AlignmentGeometry Alignment of child components
padding EdgeInsetsGeometry The inside margin of a box
margin EdgeInsetsGeometry The margins of the box
decoration Decoration The background decoration of the box
foregroundDecoration Decoration The foreground decoration of the box
constraints BoxConstraints Additional constraints on the box
transform Matrix4 Matrix changes, of type Matrix4, a fourth order matrix
transformAlignment AlignmentGeometry Change the direction of the anchor point
clipBehavior Clip How component content edges are clipped

Container Usage

1, color, color

Container(
  color: Colors.pink,
  child: Text("Jimi",
     style: TextStyle(
         color: Colors.white,
         fontSize: 30),),)Copy the code

Results show

2, width, height

Container(
  color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,),Copy the code

Results show

3, alignment

Container(
  color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
),
Copy the code

Results show

4. Padding and margin

Container(
  color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),),Copy the code

Results show

5, decoration

Container(
  // color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.greenAccent,
    // borderRadius: BorderRadius.circular(100),
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.blue
      ]
    ),
  ),
),
Copy the code

Results show

6, foregroundDecoration

Container(
  // color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  foregroundDecoration: BoxDecoration(
    color: Colors.greenAccent,
    // borderRadius: BorderRadius.circular(100),
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.orange,
        Colors.purple
      ]
    ),
  ),
),
Copy the code

Results show

7, Constraints

Container(
  // color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.greenAccent,
    // borderRadius: BorderRadius.circular(100),
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.blue
      ]
    ),
  ),
  constraints: BoxConstraints(
    maxWidth: 100),),Copy the code

Results show

8 the transform.

Container(
  // color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.greenAccent,
    // borderRadius: BorderRadius.circular(100),
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.blue
      ]
    ),
  ),
  transform: Matrix4.rotationZ(0.3),),Copy the code

Results show

9 transformAlignment.

Container(
  // color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.greenAccent,
    // borderRadius: BorderRadius.circular(100),
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.blue
      ]
    ),
  ),
  transform: Matrix4.rotationZ(0.3),
  transformAlignment: Alignment.center,
),
Copy the code

Results show

AnimatedContainer

It is an animated version of Container, such as AnimatedContainer when we need to add animation effects for changing width, height, color, matrix edge, etc

AnimatedContainer is basically used

import 'package:flutter/material.dart';

class ContainerExample extends StatefulWidget {
  @override
  _ContainerExampleState createState() => _ContainerExampleState();
}

class _ContainerExampleState extends State<ContainerExample> {

  var color = Colors.orange;
  var width = 200.0;
  var height = 200.0;
  var matrix4Value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ContainerExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            AnimatedContainer(
              width: width,
              height: height,
              color: color,
              duration: Duration(milliseconds: 1000),
              transform: Matrix4.rotationZ(matrix4Value),
            ),
            Padding(
              padding: EdgeInsets.all(20),
              child: ElevatedButton(
                onPressed: (){
                  setState(() {
                    color = Colors.blue;
                  });
                },
                child: Text("Change color"),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(0),
              child: ElevatedButton(
                onPressed: (){
                  setState(() {
                    width = 100;
                    height = 400;
                  });
                },
                child: Text("Change width and height"),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(0),
              child: ElevatedButton(
                onPressed: (){
                  setState(() {
                    matrix4Value = 0.3;
                  });
                },
                child: Text("Matrix transformation"() [() [() [() [() }}Copy the code

Results show

conclusion

Container is a composite Container. You can use a Container when you need multiple restrictions on a component. It describes the size, location, spacing, decoration, restrictions, and transformations of a Container.

AnimatedContainer is an addition to the Container.