Container components.

  • Representation can be defined through BoxConstraints (row-level/block-level)

  • Margin can be defined with EdgeInsets (padding/margin).

  • BoxDecoration allows you to define borders, shadows, gradients, etc

  • You can set the Alignment by Alignment

1, constraints,

1.1. No constraints

Similar to row-level elements, they grow as content increases.

Container(
  child: Text("A convenience widget that combines common painting, positioning, and sizing widgets."))Copy the code

Equivalent to:

<span>
  A convenience widget that combines common painting, positioning, and sizing widgets.
</span>
Copy the code

1.2. Maximum size of constraint

Container(
  child: Text("A container first surrounds the child with padding (inflated by any borders present in the decoration) and then applies  additional constraints to the padded extent (incorporating the width and height as constraints, if either is non-null). The container is then surrounded by additional empty space described from the margin."), constraints: BoxConstraints(maxWidth: 200.0, maxHeight: 200.0)Copy the code

Equivalent to:

<div
  style=
  " max-width: 200px; max-height: 200px; "
>
A container first surrounds the child with padding (inflated by any borders present in the decoration) and then applies additional constraints to the padded extent (incorporating the width and height as constraints, if either is non-null). The container is then surrounded by additional empty space described from the margin.
</div>
Copy the code

1.3. Constraint minimum size

Container(
  child: Text("Hello Flutter!"), constraints: BoxConstraints(minWidth: 200.0, minHeight: 200.0)Copy the code

Equivalent to:

<div
  style=
  " min-width: 200px; min-height: 200px; "
>
  Hello Flutter!
</div>
Copy the code

1.4. Expand to parent element size

Container(
  child: Text("Hello Flutter!"),
  constraints: BoxConstraints.expand()
)
Copy the code

Equivalent to:

<div
  style=
  " width: 100%; height: 100%; "
>
  Hello Flutter!
</div>
Copy the code

1.5. Set fixed size

Container(
  child: Text("Hello Flutter!"Expand (width: 200.0, height: 200.0)Copy the code

Equivalent to:

<div
  style=
  " width: 200px; height: 200px; "
>
  Hello Flutter!
</div>
Copy the code

2, margins

2.1. Separate Settings

Edgeinsets.only () can be used when you need to set the direction margin separately.

Container(
  child: Text("Hello Flutter!"Padding-right: EdgeInsets. Only (top: 10.0, left: 5.0)Copy the code

Equivalent to:

<div
  style=
  " padding-top: 10px; padding-left: 5px; "
>
  Hello Flutter!
</div>
Copy the code

2.2. All Settings

Use edgeinsets.all () when all directions are the same.

Container(
  child: Text("Hello Flutter!"), padding: EdgeInsets. All (10.0))Copy the code

Equivalent to:

<div
  style=
  "padding: 10px;"
>
  Hello Flutter!
</div>
Copy the code

2.3. Symmetrical Settings

EdgeInsets.Symmetric () only needs to set a single direction. EdgeInsets.Symmetric ()

Container(
  child: Text("Hello Flutter!"Symmetric (vertical: 10.0, horizontal: 15.0)), symmetric: symmetric(horizontal: 15.0)Copy the code

Equivalent to:

<div
  style=
  "padding: 10px 15px 10px 15px;"
>
  Hello Flutter!
</div>
Copy the code

2.4. Quick Settings respectively

EdgeInsets. FromLTRB (l, t, r, b)

Container(
  child: Text("Hello Flutter!"),
  padding: EdgeInsets.fromLTRB(5.0, 10.0, 15.0, 20.0)
)
Copy the code

Equivalent to:

<div
  style=
  " padding-left: 5px; padding-top: 10px; padding-right: 15px; padding-bottom: 20px; "
>
  Hello Flutter!
</div>
Copy the code

3, decoration

3.0, [There is a pit]

If the decoration property exists, the background color should be written in BoxDecoration. If the BoxDecoration conflicts with the outer style property, an error will be reported.

The container’s color is a shortcut to its boxdecoration. color.

For details, see the following example:

pit

Container(
  child: Text("Hello Flutter!"Color: color. deepPurple, decoration: BoxDecoration(color: decoration) Colors.deepPurple ) )Copy the code

Error details:

Cannot provide both a color and a decoration The color argument is just a shorthand for “decoration: BoxDecoration(color: color)”.

3.1. Set the border

Container(
  child: Text("Hello Flutter!"), decoration: BoxDecoration(border: border. All (width: 2.0, style: borderStyle. solid, color: color (0xFF000000))))Copy the code

Equivalent to:

<div
  style=
  "border: 2px solid #000000FF;"
>
  Hello Flutter!
</div>
Copy the code

3.2. Set the projection

Container(
  child: Text("Hello Flutter!"), constraints: BoxConstraints. Expand (width: 200.0, height: 200.0), decoration: Color: color. white, boxShadow: [boxShadow (color: color: RGB (50, 50, 50)) Color(0xFFFF0000), offset: offset (5.0, 10.0), blurRadius: 15.0)])Copy the code

Equivalent to:

<div
  style=
  " width: 200px; height: 200px; box-shadow: 5px 10px 15px #FF0000FF; "
>
  Hello Flutter!
</div>
Copy the code

3.3. Set gradients

3.3.1 Default linear gradient

Container(
  child: Text("Hello Flutter!"), constraints: BoxConstraints. Expand (width: 200.0, height: 200.0), decoration: BoxDecoration(gradient: LinearGradient( colors: [ Color(0xFF6A11CB), Color(0xFF2575FC) ] ) ) )Copy the code

Equivalent to:

<div
  style=
  " width: 200px; height: 200px; background-image: linear-gradient(to right, #6A11CBFF, #2575FCFF); "
>
  Hello Flutter!
</div>
Copy the code

3.3.1. Set gradient orientation

Container(
  child: Text("Hello Flutter!"), constraints: BoxConstraints. Expand (width: 200.0, height: 200.0), decoration: BoxDecoration(gradient: LinearGradient( colors: [ Color(0xFF6A11CB), Color(0xFF2575FC) ], begin: Alignment.topCenter, end: Alignment.bottomCenter ) ) )Copy the code

Equivalent to:

<div
   style=
   " width: 200px; height: 200px; background-image: linear-gradient(to bottom, #6A11CBFF, #2575FCFF); "
>
  Hello Flutter!
</div>
Copy the code

3.3.1 Radial gradient

Container(
  child: Text("Hello Flutter!"), constraints: BoxConstraints. Expand (width: 200.0, height: 200.0), decoration: BoxDecoration(gradient: RadialGradient( colors: [ Color(0xFF6A11CB), Color(0xFF2575FC) ], begin: Alignment.topCenter, end: Alignment.bottomCenter ) ) )Copy the code

Equivalent to:

<div
  style=
  " width: 200px; height: 200px; background-image: radial-gradient(#6A11CBFF, #2575FCFF); "
>
  Hello Flutter!
</div>
Copy the code

3.4. Set the background image

Container(
  child: Text("Hello Flutter!"), constraints: BoxConstraints. Expand (width: 200.0, height: 200.0), decoration: BoxDecoration(image: DecorationImage( image: AssetImage("assets/images/thumbnail.png"),
      fit: boxfit.cover
    )
  )
)
Copy the code

Equivalent to:

<div
  style=
  " width: 200px; height: 200px; background-image: url('assets/images/thumbnail.png'); background-size: cover; "> <span>Hello Flutter! </span> </div>Copy the code

Note: To introduce background images for containers, you should declare them in the Assets field of “Pubspec. yaml”. For details, please refer to:

Insert local resource image juejin.cn/post/684490…

3.5. Set rounded corners

Container(
  child: Text("Hello Flutter!"), constraints: BoxConstraints. Expand (width: 200.0, height: 200.0), decoration: BoxDecoration(color: white) Colors. Blue, borderRadius: borderRadius. All (5.0))Copy the code

Equivalent to:

<div
  style=
  " width: 200px; height: 200px; background-color: blue; border-radius: 5px; "> <span>Hello Flutter! </span> </div>Copy the code

reference

[1] Liu, J., Liu, J., Liu, J., Liu, J., Liu, J., Liu, J., Liu, J