Container of the basic component of the flutter

In the official profile , say Container Component is a convenient drawing 、 Components that locate and resize subcomponents .

First Container Will be in child Fill around the sub assembly padding（ Include decoration Existing in border）, And then according to the constraints constraints To determine the width and height of the sub assembly , Last Container Will be based on margin To add white space around .

In the process of drawing ,Container First, I will apply matrix transformation transform, Then draw decoration, Then draw child Child components , Finally draw foregroundDecoration.

Container Try to be as large as possible if there are no sub components , Unless the incoming constraint constraints It's infinite , If that's the case ,Container As small as possible .Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this.（ I can't understand this sentence ,T_T）.

in general ,Container Is a very common component , We can use it to wrap any component , I said before Text The components have backgroundColor It will cause some text display problems , If you use Container To the parcel Text Setting the background is very convenient , And the styles including fillet can be set easily , No more Android That defines many of the same things xml 了 .

1 Construction method

Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child })

Container There is only one constructor , There are no parameters that must be passed , But we usually use it to wrap sub components , That is, it is generally set child attribute .

 

2 Common properties

width and height： Width and height , This one doesn't need to be repeated .

color： Background color , It's worth one Color object , Cannot be associated with decoration Property is set at the same time .

margin： Margin , It's worth one EdgeInsets object .EdgeInsets Object to call EdgeInsets.all() Methods to uniformly set the margins of the four edges at the top left and bottom right , You can also call EdgeInsets.fromLTRB() Set the margins of the upper left and lower right sides respectively .

padding： Internal spacing , Value with margin.

alignment： Alignment mode , Optional value （ It's easy to understand from the literal meaning ） Yes ：
     Alignment.topLeft： Align vertically to the top and horizontally to the left .
    Alignment.topCenter： Align vertically to the top and horizontally to the center .
    Alignment.topRight： Align vertically to the top and horizontally to the right .
    Alignment.centerLeft： Align vertically and horizontally to the left .
    Alignment.center： Align vertically and horizontally .
    Alignment.centerRight： Vertically centered, horizontally right aligned .
    Alignment.bottomLeft： Align vertically to the bottom and horizontally to the left .
    Alignment.bottomCenter： Align vertically to the bottom and horizontally to the center .
    Alignment.bottomRight： Align vertically to the bottom and horizontally to the right .
     In addition to the constants above , You can also create Alignment Object designation x、y Offset .

decoration： decorate , Background border, etc , Cannot be associated with color Property is set at the same time , Will be drawn in child under , That is, it will be child Cover , Specifically API  Reference resources 2.1

BoxDecoration.

foregroundDecoration： It's also decoration , But it will be drawn in child above , That is, it will cover child.

constraints： constraint , This rule seems very complicated , We will study it in detail later .

transform： Shape change , This should be used less , May be used in animation , We will study it in detail later .

child： Child components .

 

2.1 BoxDecoration

First BoxDecoration It's just Decoration An implementation class , Other implementation classes are  FlutterLogoDecoration、ShapeDecoration、UnderlineTabIndicator, Here is just an introduction to the commonly used  BoxDecoration.

color： Background fill color , It's worth one Color object .

border： It's worth one BoxBorder object , This object can set the border color 、 Border width 、 Border styles, etc .

borderRadius： Border fillet , You can call BorderRadius.all() Set the rounded corners of the four corners uniformly , You can also call BorderRadius.only() Set the fillets of the four corners respectively .

gradient： Set as the background of gradient effect , Will be covered color.

boxShadow： shadows , It's worth one BoxShadow aggregate .

backgroundBlendMode： It should be background blending mode , This should be complicated , I'll study it later .

image： Use pictures as decorations .

 

The following is a with the above properties set  demo：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var imgUrl =
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545122324077&di=1b5986ad937c81c41f4c135ea1a9a026&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3Df719f9458f01a18bf0be1a4bab1f2b3e%2Fc2fdfc039245d688a8f2cdcdacc27d1ed31b24e2.jpg";
    return MaterialApp(
      // Whether or not shown  debug  label 
      debugShowCheckedModeBanner: false,
      title: "Container",
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("Container"),
        ),
        body: new Container(
//      color: new Color(0xFFFF0000),
          // Margin , It's worth one  EdgeInsets  object 
          margin: EdgeInsets.all(30.0),
          // Internal spacing , It's worth one  EdgeInsets  object 
          padding: EdgeInsets.fromLTRB(30.0, 0, 0, 0),
          // Alignment mode , Optional values are ：
          //Alignment.topLeft： Align vertically to the top and horizontally to the left .
          //Alignment.topCenter： Align vertically to the top and horizontally to the center .
          //Alignment.topRight： Align vertically to the top and horizontally to the right .
          //Alignment.centerLeft： Align vertically and horizontally to the left .
          //Alignment.center： Align vertically and horizontally .
          //Alignment.centerRight： Vertically centered, horizontally right aligned .
          //Alignment.bottomLeft： Align vertically to the bottom and horizontally to the left .
          //Alignment.bottomCenter： Align vertically to the bottom and horizontally to the center .
          //Alignment.bottomRight： Align vertically to the bottom and horizontally to the right .
          // In addition to the constants above , You can also create  Alignment  Object designation  x、y  Offset 
          alignment: Alignment.centerLeft,
          // decorate , Background border, etc , Cannot be associated with  color  Property is set at the same time , Will be drawn in  child  under , That is, it will be  child  Cover 
          decoration: new BoxDecoration(
              // Background fill color 
              color: new Color(0xFFFF0000),
              // Background border 
              border: new Border.all(
                  // Border color 
                  color: new Color(0xFFFFFF00),
                  // Border width 
                  width: 5),
              // Border fillet 
              borderRadius: new BorderRadius.only(
                  topLeft: new Radius.circular(5.0),
                  topRight: new Radius.circular(10.0),
                  bottomLeft: new Radius.circular(15.0),
                  bottomRight: new Radius.circular(20.0)),
              // Gradient effect , Will be covered  color
              gradient: new LinearGradient(colors: [
                new Color(0xFFFFDEAD),
                new Color(0xFF98FB98),
                new Color(0xFF6495ED)
              ]),
              // shadows 
              boxShadow: [new BoxShadow(color:Color(0xFFFF0000),blurRadius: 5.0)],
              // It should be background blending mode , This should be complicated , I'll study it later 
              backgroundBlendMode: BlendMode.color,
              // picture 
//              image: new DecorationImage(image: new NetworkImage(imgUrl))
              ),
          // It's also decoration , But it will be drawn in  child  above , That is, it will cover  child
//          foregroundDecoration: new BoxDecoration(
//              image: new DecorationImage(image: new NetworkImage(imgUrl))
//          ),
          // constraint , This rule seems very complicated , We will study it in detail later 
          constraints: new BoxConstraints(maxWidth: 300.0, maxHeight: 400.0),
          // Shape change , This should be used less , May be used in animation , We will study it in detail later 
          transform: new Matrix4.skewY(0.3),
          // Child components 
          child: new Text(
            "Hello World",
            textDirection: TextDirection.ltr,
            style: new TextStyle(color: new Color(0xFFFFFFFF), fontSize: 40.0),
          ),
        ),
      ),
    );
  }
}

 

The operation effect is as follows ：

You can see that we give Container Set up margin attribute , So there are some outer margins up, down, left and right , Then although the alignment is set alignment by centerLeft, But the left margin is set to 100, All the left side has some inner space , Constraints are also set constraints The maximum width is 300, So its width is smaller than the full screen minus the outer margin , We also set the border 、 Round corners 、 Gradient background 、 Matrix transformation and a series of attributes that make it more effective , These settings are not troublesome , The final result is the above effect .

 

3 summary

I'm learning Text When you set the component, you don't know how to set the rounded background , But if you use Container A package is simply not too simple , and Flutter Rounded corners are implemented in a way that compares to Android That kind of writing a lot xml How to file , Let me fall in love with it .