Container Container Flutter common single child controls Padding Center Align FittedBox AspectRatio ConstrainedBox

Flutter series overall directory

1、Container

alignment	Alignment: https://blog.csdn.net/mengks1987/article/details/84852235
padding	padding
width	width
height	height
margin	margin
color	background color
decoration	Background of various styles: https://blog.csdn.net/mengks1987/article/details/84856456
foregroundDecoration	Pattern drawn in front of the child controls, use the same Decoration, color settings or over the opaque color control sub-block
constraints	Maximum / Xiaokuan / high bound
transform	Rotation, translation and other operations 3D
child	Child controls

Center(
        child: Container(
      width: 300,
      height: 100,
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Color(0x330000FF),
        border:
            Border.all(color: Colors.red, width: 2, style: BorderStyle.solid),
        borderRadius: BorderRadius.all(Radius.circular(10)),
        boxShadow: [BoxShadow(color: Colors.blue, offset: Offset(5, 5))],
        gradient: LinearGradient(colors: [Colors.blue, Colors.yellow]),

        backgroundBlendMode: BlendMode.srcATop,
        shape: BoxShape.rectangle
      ),
      foregroundDecoration: FlutterLogoDecoration(),
      transform: Matrix4.rotationZ(1),
      child: new Text(
        "TextDirection.rtl topStart",
        textDirection: TextDirection.rtl,
        style: TextStyle(),
      ),
      alignment: AlignmentDirectional.topStart,
    ));

2、Padding

Padding is very simple to two properties:
1, provided padding value
2, the sub-control

demo

Padding(
      padding: EdgeInsets.all(100),
      child: Container(
        color: Colors.blue,
      ),
    );

3、Center

Center is in the middle of the child controls

Attributes	Explanation
widthFactor	If not null, Center of child controls width = width * widthFactor
heightFactor	If not null, Center of child controls height = height * heightFactor

Note that if the two are not set, Center is as large as possible.

Column(
      children: <Widget>[
        Center(
          heightFactor: 2,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
        ),
        Container(
          height: 100,
          width: 100,
          color: Colors.blue,
        )
      ],
    );

effect:

4、Align

You can customize the child control position

Attributes	Explanation
alignment	Default: Alignment.center Alignment: https://blog.csdn.net/mengks1987/article/details/84852235
widthFactor	If not null, Center of child controls width = width * widthFactor
heightFactor	If not null, Center of child controls height = height * heightFactor

demo

Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );

effect:

5、FittedBox

	Attributes	Explanation
	BoxFit.fill	Filling scale
	BoxFit.cover	As small as possible to fill
	BoxFit.fitWidth	Wide accordance filled
	BoxFit.fitHeight	According to populate high
	BoxFit.none
	BoxFit.scaleDown
alignment		Default: Alignment.center Alignment: https://blog.csdn.net/mengks1987/article/details/84852235

6、AspectRatio

Fixed aspect ratio control.

AspectRatio(
        aspectRatio: 5 / 4,
        child: Container(
          color: Colors.red,
        ),
    );

7、ConstrainedBox

Pair controls impose constraints.
As follows: minimum height of 80 child controls, even if the child controls set a height of 30, whose height is still 80.

ConstrainedBox(
          constraints: BoxConstraints(minHeight: 80),
          child: Container(
            height: 30,
            color: Colors.blue,
          ),
        ),