[flutter 2-3] flutter handle tutorial UI layout and widget – container control

Time:2022-2-16

By Vlad
Source Vlad (official account: fulade_me)

Container

Let’s take a look at the parameters of container initialization:

Container({
    Key key,
    //Position left, right and center
    this.alignment, 
    //Inner margin of edgeinsets container
    this.padding,
    //Background color  
    this.color,
    //Background decorator
    this.decoration,
    //Foreground decorator
    this.foregroundDecoration,
    //Width
    double width,
    //Tell
    double height,
    //Restraint
    BoxConstraints constraints,
    //Outer margin of edgeinsets container
    this.margin,
    //Spin
    this.transform,
    //Child controls
    this.child,
    //Mode of clipping widget 
    this.clipBehavior = Clip.none,
  })

be careful:

  • ContainerofcolorAttributes and attributesdecorationofcolorThere is a conflict if twocolorAll have been set. By defaultdecorationofcolorSubject to.
  • If we don’t giveContainerset upwidthandheightContainerWill followchildOf the same size; If we don’t setchildWhen it is, its size will be maximized and filled as much as possibleParent widget

1. The simplest container

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

Container receives achildParameters, we can pass inTextAschildParameter, and then a color is passed in.
[flutter 2-3] flutter handle tutorial UI layout and widget - container control

2. Padding

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

PaddingIt’s the inner margin. We set it herepadding: EdgeInsets.all(10), which meansTextdistanceContainerThe margins on all four sides of the are 10.
[flutter 2-3] flutter handle tutorial UI layout and widget - container control

3. Margin

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

MarginIt’s the outer margin. We set it heremargin: EdgeInsets.all(10)ContainerBased on the original sizesurroundA layer of rectangle with a width of 10 is.
It should be noted that the white area around the green also belongs toContainerPart of.
[flutter 2-3] flutter handle tutorial UI layout and widget - container control

4. transform

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

transformCan help us spin,Matrix4It provides us with a lot of transformation styles.
[flutter 2-3] flutter handle tutorial UI layout and widget - container control

5. decoration
decorationCan help us achieve more results. For example, shape, fillet, boundary, boundary color, 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)),
    ),
)

[flutter 2-3] flutter handle tutorial UI layout and widget - container control
Here is an example of setting a fillet. Similarly, weBoxDecorationofcolorProperty to set the color for the entireContainerIs also effective.

6. Display image

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

BoxDecorationYou can pass in aImageObject, which is much more flexible,ImageIt can come from local or network.
[flutter 2-3] flutter handle tutorial UI layout and widget - container control

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,
        ),
    ),
)

useborderIt can help us do boundary effect and set filletborderRadius, you can also setborderWidth, color, etc.
[flutter 2-3] flutter handle tutorial UI layout and widget - container control

8. Gradient

Container(
    padding: EdgeInsets.symmetric(horizontal: 20),
    margin: EdgeInsets. All (20), // filling outside the container
    decoration: BoxDecoration(
        gradient: RadialGradient(
            colors: [Colors.blue, Colors.black, Colors.red],
            center: Alignment.center,
            radius: 5
        ),
    ),
    child: Text(
        //Card text
        "RadialGradient",
        style: TextStyle(color: Colors.white),
    ),
)

BoxDecorationProperties ofgradientCan receive an array of colors,Alignment.centerIs the starting position of the gradient, which can betop left cornerUpper right cornermiddleWait for the position to start the color change.

[flutter 2-3] flutter handle tutorial UI layout and widget - container control

Want to experience the aboveContainerThe running effect of the example can beMy GitHub warehouseprojectflutter_app->lib->routes->container_page.dartView it, and you can download it, run it and experience it.


[flutter 2-3] flutter handle tutorial UI layout and widget - container control