Introduction to the

Container is a single Container component widely used in Flutter

The 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,
  })
Copy the code
  • alignmentalignment
  • paddingpadding
  • colorThe background color
  • decorationSet decorationBoxDecorationSuch as: color, picture, border, rounded corner, shadow, etc., cannot be givenContainerAt the same time set updecorationandcolorattribute
  • foregroundDecorationSet foreground decorations
  • widthThe width of the
  • heighthighly
  • constraintsRange of constraints,minWidth,maxWidth,minHeight,maxHeight
  • marginFrom the outside
  • transformTransformation effect such as: rotation, deformation and so on
  • transformAlignmentAlign Container after the change

The sample

1. Default effect

Container(
    child: Text("Hello Flutter"),Copy the code

2. Set the background color

Container(
    color: Colors.orange,
    child: Text("Hello Flutter"),Copy the code

3. Set the inside and outside margins

Container(
     width: 300,
     height: 200,
     color: Colors.red,
     child: Container(
         color: Colors.orange,
         padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
         margin: EdgeInsets.all(40),
         child: Text("Hello Flutter"),),)Copy the code

4. Set up decorations

Sets the rounded border effect

Container(
      padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
      decoration: BoxDecoration(
          color: Colors.orange,
          border: Border.all(color: Colors.green, width: 3.0),
          borderRadius: BorderRadius.all(Radius.circular(20))
      ),
      child: Text("Hello Flutter"),),Copy the code

Rounded rectangle image

Container(
     padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
     width: 200,
     height: 200,
     decoration: BoxDecoration(
         color: Colors.orange,
         border: Border.all(color: Colors.green, width: 5.0),
         borderRadius: BorderRadius.all(Radius.circular(20)),
         image: DecorationImage(
             image: NetworkImage(
                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-fce4f8a778fe3f24bca2cafc709b6847_hd.jpg& Refer=http%3A%2F%2Fpic1.zhimg.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1619932000 & 94 d94f4650ff22cdff3 t = afb8ab71b5462'),
             fit: BoxFit.cover)
          ),
 ),
Copy the code

Circular images

Container(
     padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
     width: 200,
     height: 200,
     decoration: BoxDecoration(
         color: Colors.orange,
         border: Border.all(color: Colors.green, width: 5.0),
         shape: BoxShape.circle,
         image: DecorationImage(
             image: NetworkImage(
                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-fce4f8a778fe3f24bca2cafc709b6847_hd.jpg& Refer=http%3A%2F%2Fpic1.zhimg.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1619932000 & 94 d94f4650ff22cdff3 t = afb8ab71b5462'),
             fit: BoxFit.cover)
          ),
 ),
Copy the code

5. Alignment

When the alignment is set, the Container will fill its parent control

Container(
     color: Colors.orange,
     alignment: Alignment.center,
     child: Text('Hello Flutter'),),Copy the code

6. Fixed width and height

Container(
     width: 200,
     height: 100,
     color: Colors.orange,
     alignment: Alignment.center,
     child: Text('Hello Flutter'),),Copy the code

You can also set the width through the Constraints property. If this is not set for constraints, the default minimum width is 0 and the maximum width is unlimited

Container(
     constraints: BoxConstraints.tightForFinite(width: 200, height: 100),
     color: Colors.orange,
     alignment: Alignment.center,
     child: Text('Hello Flutter'),),Copy the code

7. The transform of transform

Container(
     constraints: BoxConstraints.tightForFinite(width: 200, height: 100),
     color: Colors.orange,
     alignment: Alignment.center,
     transform: Matrix4.rotationZ(0.3),
     child: Text('Hello Flutter'),),Copy the code

Matrix4.rotationz () in radians