As the name implies, a container can hold other widgets. In this section, we’ll look at Padding, DecoratedBox, and ConstrainedBox.

A, Padding

In Android development, we give controls padding and margin, which is called padding and margin, and of course if the parent controls have padding, it actually affects the child controls. Padding in Flutter adds Padding to its children.

  const Padding({
    Key key,
    @required this.padding,
    Widget child,
  })
Copy the code

Padding —- EdgeInsetsGeometry type: inserts and populates the child node

EdgeInsetsGeometry is an abstract class, and we generally use its subclass EdgeInsets

class EdgeInsets extends EdgeInsetsGeometry {
  /// Specify padding in each of the four directions.
  const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);

  /// All directions are filled with the same value.
  const EdgeInsets.all(double value)
    : left = value,
      top = value,
      right = value,
      bottom = value;

  /// You can set padding in a specific direction.
  const EdgeInsets.only({
    this.left = 0.0.this.top = 0.0.this.right = 0.0.this.bottom = 0.0});/// Set the fill in the symmetric direction.
  const EdgeInsets.symmetric({
    double vertical = 0.0.double horizontal = 0.0, }) : left = horizontal, top = vertical, right = horizontal, bottom = vertical; . }Copy the code

Now let’s set a Text to the Padding child and see what happens. The effect is to leave 8px around the Text.

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text("See how it affects the child control, see how it affects the child control, see how it affects the child control.")),Copy the code

Second, the ConstrainedBox

  ConstrainedBox({
    Key key,
    @required this.constraints,
    Widget child,
  })
Copy the code

  const BoxConstraints({
    this.minWidth = 0.0.this.maxWidth = double.infinity,
    this.minHeight = 0.0.this.maxHeight = double.infinity,
  })
Copy the code

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 100),
  child: Text("See how it affects the child control, see how it affects the child control, see how it affects the child control."))
Copy the code

Third, DecoratedBox

A decorative Box that can draw decorations, such as backgrounds and borders, before (or after) its widgets.

  const DecoratedBox({
    Key key,
    @required this.decoration,
    this.position = DecorationPosition.background,
    Widget child,
  })
Copy the code

Decoration —- represents the decoration to be drawn. Its type is Decoration and we usually use its subclass BoxDecoration.

Position —- where frame decoration.

enum DecorationPosition {
  /// After the child widgets
  background,

  /// Before the child widgets
  foreground,
}
Copy the code

Let’s look at BoxDecoration in detail.

  const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  })
Copy the code

Color —- Background color

Image —- Background image

Border —- border. Draw the border above the background [color], [gradient], or [image], based on [shape] and [borderRadius].

BorderRadius —- Rounded border

BoxShadow shadows –

Gradient, the gradient

BackgroundBlendMode —- Background blending mode

Shape —- Background shape

Now border, it’s an abstract class of type BoxBorder, and we usually use its subclass border.

  const Border({
    this.top = BorderSide.none,
    this.right = BorderSide.none,
    this.bottom = BorderSide.none,
    this.left = BorderSide.none,
  })
Copy the code

It’s easy to see that both directions can be controlled, and their type is BorderSide.

  const BorderSide({
    this.color = const Color(0xFF000000),
    this.width = 1.0.this.style = BorderStyle.solid,
  })
Copy the code

Color – color

Width – the width of the

Style –

enum BorderStyle {
  none,
  /// Draws borders with solid lines.
  solid,
}
Copy the code

BorderRadius is of type BorderRadiusGeometry, and we generally use its subclass borderRadius.

  /// The border radius is [RADIUS].
  const BorderRadius.all(Radius radius) : this.only(
    topLeft: radius,
    topRight: radius,
    bottomLeft: radius,
    bottomRight: radius,
  );

  /// Create a vertically symmetric border radius where the top and bottom of the rectangle have the same radius.
  const BorderRadius.vertical({
    Radius top = Radius.zero,
    Radius bottom = Radius.zero,
  }) : this.only(
    topLeft: top,
    topRight: top,
    bottomLeft: bottom,
    bottomRight: bottom,
  );

  /// Creates a horizontally symmetric border radius, where the left and right sides of the rectangle have the same radius.
  const BorderRadius.horizontal({
    Radius left = Radius.zero,
    Radius right = Radius.zero,
  }) : this.only(
    topLeft: left,
    topRight: right,
    bottomLeft: left,
    bottomRight: right,
  );

  /// Only the given non-zero value is used to create the border radius; the other angles will be right angles.
  const BorderRadius.only({
    this.topLeft = Radius.zero,
    this.topRight = Radius.zero,
    this.bottomLeft = Radius.zero,
    this.bottomRight = Radius.zero,
  });
Copy the code

BoxShadow —- The list of shadows cast behind the box. The elements in the list are of type boxShadow.

  const BoxShadow({
    Color color = const Color(0xFF000000),
    Offset offset = Offset.zero,
    double blurRadius = 0.0.this.spreadRadius = 0.0,})Copy the code

Color and offset are easy to understand, just the color and offset.

Create an offset. The first parameter sets [dx], the horizontal component, and the second parameter sets [dy], the vertical component.

const Offset(double dx, double dy)
Copy the code

BlurRadius —- blurRadius

SpreadRadius —- Before applying the blur effect, you should first set the width of the Box extension.

Gradient is of type Gradient, 2D gradient, which is the gradient to use when filling the Box. We typically use subclasses LinearGradient, RadialGradient, and SweepGradient.

Shape is of type BoxShape.

enum BoxShape {
  /// rectangular
  rectangle,
  /// circular
  circle,
}
Copy the code

Consider an example of using DecoratedBox.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: ContainerRoute(), ); }}class ContainerRoute extends StatefulWidget {
  @override
  _ContainerRouteState createState() => new _ContainerRouteState();
}

class _ContainerRouteState extends State<ContainerRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Container"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("See how it affects the child control, see how it affects the child control, see how it affects the child control.")),
          ConstrainedBox(
              constraints: BoxConstraints(maxWidth: 100),
              child: Text("See how it affects the child control, see how it affects the child control, see how it affects the child control.")),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: DecoratedBox(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [Colors.red[600], Colors.green[600]]),
                borderRadius: BorderRadius.all(Radius.circular(6)),
                boxShadow: [
                  / / the shadow
                  BoxShadow(
                      color: Colors.grey,
                      offset: Offset(3.0.3.0),
                      blurRadius: 4.0,
                      spreadRadius: 2.0),
                ],
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text("See how it affects the child control, see how it affects the child control, see how it affects the child control.""" "" "" "" "" "" }}Copy the code