Flutter container components

summary

• Container components usually can only receive one child element, and add some modifications, transformations, restrictions, etc.
• Layout class components can receive one or more child elements, usually just sorting the child element processes.

Container

Width & height: you can set the width and height of components, with the highest priority.

Constraints: constraints. You can also specify the width and height of components.

Color: component background color.

Decoration: background decoration, mutually exclusive with the color attribute.

Padding & margin: the essence of inside margin and outside editing is realized through padding components.

Container(
    width: 100,
    height: 50,
    color: Colors.blue,
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.all(10),
    alignment: Alignment.center,
    child: Text("hello world"),
)

Container(
    margin: EdgeInsets.all(50),
    constraints: BoxConstraints.tightFor(width: 200, height: 150),
    decoration: BoxDecoration(
        gradient: RadialGradient(
            colors: [Colors.blue.shade800, Colors.blue.shade200],
            center: Alignment.center,
            radius: 0.5,
        ),
        boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(2, 2),
                blurRadius: 2,
            ),
        ],
    ),
    transform: Matrix4.rotationZ(0.2),
    transformAlignment: Alignment.center,
    alignment: Alignment.center,
    child: Text("hello world"),
)

Padding

Set the inside margin of the component.

EdgeInsets

EdgeInsets.all(): the inner margins in the four directions use the same inner margin.

EdgeInsets.fromLTRB(): different inner margins can be set at the same time.

EdgeInsets.symmetric(): set the horizontal or vertical inner margin at the same time.

EdgeInsets.only(): sets the inner margin of a direction.

Container(
    color: Colors.red,
    child: Padding(
        padding: EdgeInsets.all(10),
        child: Text("hello world"),
    ),
),
Container(
    color: Colors.green,
    child: Padding(
        padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
        child: Text("hello world"),
    ),
),
Container(
    color: Colors.blue,
    child: Padding(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        child: Text("hello world"),
    ),
)

DecoratedBox decoration

DecoratedBox can draw some decorations before or after sub components, such as background, border, gradient, etc.

DecoratedBox

Child: sets the child element.

position: set the background decoration or foreground decoration.

• DecorationPosition.background: background decoration
• DecorationPosition.foreground: foreground decoration

Decoration: decoration to be drawn.

BoxDecoration

It belongs to the subclass of Decoratin and is used for drawing decorative elements. Generally, BoxDecoration class is used directly.

Color: color.

Gradient: gradient.

borderRadius: fillet.

boxShadow: shadow, you can add more than one.

Shape: shape.

• BoxShape.rectangle: rectangle
• BoxShape.circle: circle

DecoratedBox(
    child: Padding(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
        child: Text("land"),
    ),
    position: DecorationPosition.background,
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.red, Colors.green, Colors.blue],
        ),
        borderRadius: BorderRadius.circular(3),
        shape: BoxShape.rectangle,
        boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(2, 2),
                blurRadius: 4,
            ),
        ],
    ),
),
SizedBox(height: 10),
DecoratedBox(
    child: Padding(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
        child: Text("land"),
    ),
    position: DecorationPosition.background,
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.red, Colors.green, Colors.blue],
        ),
        shape: BoxShape.circle,
        boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(2, 2),
                blurRadius: 4,
            ),
        ],
    ),
)

Transform transform

Transform can add some special effects to child elements.

The change of Transform is in the drawing stage, not the layout stage, so the space occupied by sub components is unchanged.

translation

DecoratedBox(
    child: Transform.translate(
        offset: Offset(10, 10), //The default origin is the upper left corner, which translates 10 to the right and 10 to the down
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

rotate

DecoratedBox(
    child: Transform.rotate(
        angle: math.pi / 2, //Select 90 degrees
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

zoom

DecoratedBox(
    child: Transform.scale(
        scale: 2,
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

tilt

Container(
    color: Colors.black,
    child: Transform(
        alignment: Alignment.topRight,
        transform: Matrix4.skewY(0.3),
        child: Container(
            padding: EdgeInsets.all(8),
            color: Colors.red,
            child: Text("  hello transform!  "),
        ),
    ),
)

RotatedBox

The function of RotatedBox is similar to that of Transform.rotate(), but the RotatedBox changes in the layout stage, so it will affect the position and size of sub components.

DecoratedBox(
    child: RotatedBox(
        quarterTurns: 1,
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

Clip clipping

Fluent provides some clipping tools for clipping components.

ClipOval: clip to a circle.

ClipRect: clip to rectangle.

Clipprrect: clip to a rounded rectangle.

avatar, //Original image comparison
ClipOval(
    child: avatar,
),
ClipRect(
    child: avatar,
),
ClipRRect(
    child: avatar,
    borderRadius: BorderRadius.circular(10),
),

Custom clipping

getClip(): sets the clipping area.

shouldReclip(): whether to re clip.

DecoratedBox(
    decoration: BoxDecoration(color: Colors.red),
    child: ClipRect(
        clipper: MyClipper(),
        child: avatar,
    ),
)

class MyClipper extends CustomClipper<Rect> {
    @override
    Rect getClip(Size size) {
        return Rect.fromLTWH(0, 0, 30, 30);
    }

    @override
    bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
        return false;
    }
}