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

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 upwidthandheight，ContainerWill 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.

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.

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.

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.

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

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.

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.

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 corner、Upper right corner、middleWait for the position to start the color change.

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.

---