The author | | vlad source vlad (public number: fulade_me)

Container

Let’s take a look at the Container initialization parameters:

  Container({
    Key key,
    // The position is left, right, and center
    this.alignment, 
    // EdgeInsets Inner margin of the Container
    this.padding,
    // Background color
    this.color,
    // Background decorator
    this.decoration,
    // Foreground decorator
    this.foregroundDecoration,
    / / width
    double width,
    / / tell
    double height,
    / / constraints
    BoxConstraints constraints,
    // EdgeInsets Container margins
    this.margin,
    / / rotation
    this.transform,
    / / the child controls
    this.child,
    // Clipping the pattern of the Widget
    this.clipBehavior = Clip.none,
  }) 
Copy the code

Note:

  • Container 的colorAttributes and attributesdecorationthecolorThere is a conflict if there are twocolorIt’s all set. By default, it’sdecorationthecolorShall prevail.
  • If we don’t giveContainerSet up thewidthandheight.ContainerWill followchildAre of the same size; Let’s say we didn’t set itchildIt will maximize its size and fill it as much as possibleThe parent Widget.

1. The simplest Container

Container(
    child: Text("Fulade"),
    color: Colors.red,
)
Copy the code

Container receives onechildParameters, we can pass inTextAs achildThe argument is then passed in as a color.

2. Padding

Container(
    child: Text("Pading 10"),
    padding: EdgeInsets.all(10),
    color: Colors.blue,
)
Copy the code

PaddingIt’s the inside margin, which we set up herepadding: EdgeInsets.all(10)That is to sayTextdistanceContainerAll four edges of theta have margins of 10.

3. Margin

Container(
    child: Text("Margin 10"),
    margin: EdgeInsets.all(10),
    color: Colors.green,
)
Copy the code

MarginIt’s the margin, which we set up heremargin: EdgeInsets.all(10).ContainerOn the basis of the original size, and bySurrounded byI have a layer of 10 width rectangles. It’s important to note that the white area outside of the green area also belongs toContainerPart of.

4. transform

Container(
    padding: EdgeInsets.symmetric(horizontal: 15),
    margin: EdgeInsets.all(10),
    child: Text("transform"),
    transform: Matrix4.rotationZ(0.1),
    color: Colors.red,
)
Copy the code

transformIt helps us do the rotation,Matrix4Gives us a lot of transformation styles.

5. Decoration can help us achieve more effects. Such as shapes, rounded corners, borders, border colors, etc.

Container(
    child: Text("Decoration"),
    padding: EdgeInsets.symmetric(horizontal: 15),
    margin: EdgeInsets.all(10),
    decoration: BoxDecoration(
        color: Colors.red,
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.all(Radius.circular(5)),),)Copy the code



Here is an example of setting a rounded cornerBoxDecorationthecolorProperty to set the color on the wholeContainerIs also valid.

6. Display the Image

Container(
    height: 40,
    width: 100,
    margin: EdgeInsets.all(10),
    decoration: BoxDecoration(
        image: DecorationImage(
                image: AssetImage("images/flutter_icon_100.png"),
                fit: BoxFit.contain,
            ),
    ),
)
Copy the code

BoxDecorationYou can pass in aImageObject, so it’s a lot more flexible,ImageIt can be local or network.

7. Border

Container(
    child: Text('BoxDecoration with border'),
    padding: EdgeInsets.symmetric(horizontal: 15),
    margin: EdgeInsets.all(5),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circula(12),
        border: Border.all(
            color: Colors.red,
            width: 3,),),)Copy the code

useborderIt helps us to do border effects, and it can also set rounded cornersborderRadius, can also be setborderWidth, color, etc.

8. Gradients

Container(
    padding: EdgeInsets.symmetric(horizontal: 20),
    margin: EdgeInsets.all(20), // Fill the container
    decoration: BoxDecoration(
        gradient: RadialGradient(
            colors: [Colors.blue, Colors.black, Colors.red],
            center: Alignment.center,
            radius: 5
        ),
    ),
    child: Text(
        // The card text
        "RadialGradient",
        style: TextStyle(color: Colors.white),
    ),
)
Copy the code

The attribute gradient of BoxDecoration receives an array of colors. Alignment. Center is the position where the gradient starts.

To see how the Container example works, go to my Github repository project flutter_app->lib->routes->container_page.dart and download it and run it.