A review of Flutter layout widgets

Container

1, the introduction of

• Container is similar to the H5 box model and is equivalent to the layout Container
• The Container tries to be large enough when it has no child nodes
• When a Container has child nodes, it adjusts its size based on the size of child nodes

constructors

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
})
Copy the code

• Alignment: Controls the alignment of the child
• Padding: Inner margin of the container itself
• Color: Background color of the container
• Decoration: container style, similar to the STYLE of the CSS
• ForegroundDecoration: The foreground of the container may obscure the color effect
• Width: indicates the container width
• Height: Indicates the height of the container
• Constraints: Constraints on the size of the container
• Margin: The margin of the container itself
• Transform: The container’s transformation matrix, which allows the container to scale, rotate, translate, etc
• Child: child control of the container

Example 3,

Decoration can be used to create shadows and borders

Widget _buildColumn() {
    return Container(
      constraints: BoxConstraints.expand(
        height: 200,
      ),
      padding: EdgeInsets.all(8.0),
      child: Text("Hello World"),
      alignment: Alignment.center,
      transform: Matrix4.identity(),
      margin: EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2.0),
        color: Colors.blue[200],
        borderRadius: BorderRadius.circular(20.0)
      ),
      foregroundDecoration: BoxDecoration(),
      height: 200,
      width: 100.//color: Colors.blue[200],
    );
}
Copy the code

Padding

1, the introduction of

• A Padding is a single-purpose comparison control that is responsible for the inner margin of the child control

constructors

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

• Padding: Inner margin of the control
• Child: child control

Example 3,

Widget _buildColumn() {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Container(
        height: 200,
        width: 200,
        color: Colors.blue[200],),); }Copy the code

Align

1, the introduction of

• Align Sets the alignment of the child, such as center, left, or right, and adjusts its size according to the child size
• When widthFactor and heightFactor are null, the child expands its size as much as possible until the parent control is filled

constructors

const Align({
    Key key,
    this.alignment: Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child
})
Copy the code

• Alignment: Indicates the alignment of the child
• WidthFactor: widthFactor. If set to 2.0, Align is twice as wide as child
• HeightFactor: heightFactor. When set to 2.0, Align is twice the height of child
• Child: child control

Example 3,

Because heightFactor and widthFactor are set, the maximum width and height of the parent control should be 2.0 times that of the child control. If heightFactor and widthFactor are not set, the parent control is infinite and the child control is middot at the bottom of the screen

Widget _buildColumn() {
    return Container(
      color: Colors.blue[200],
      child: Align(
        heightFactor: 2.0,
        widthFactor: 2.0,
        alignment: Alignment(0.0.1.0), // Align bottom midpoint
        child: Text("Hello!"),),); }Copy the code

Center

1, the introduction of

• The Center control centers the Child, which is the midpoint of the parent control
• Center control With heightFactor and widthFactor set, the size of the parent control changes
• The Center control inherits exactly from the Align control, except that the internal default isalignmentProperty set to center

constructors

class Center extends Align {
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}
Copy the code

Example 3,

Because the heightFactor and widthFactor are set, the maximum width and height of the parent control should be 1.5 times that of the child control, so if the parent control size is 300×300, the child control will be centered on the parent control. If heightFactor and widthFactor are not set, the parent control is infinite, filling the screen, and the Center component is displayed in the Center of the parent control, in the middle of the screen

Widget _buildColumn() {
    return Container(
      color: Colors.blueGrey,
      child: Center(
        heightFactor: 1.5,
        widthFactor: 1.5,
        child: Container(
          height: 200,
          width: 200,
          color: Colors.blue[200],),),); }Copy the code

FittedBox

1, the introduction of

• The FittedBox scales within its size and adjusts the Child position to fit its size
• FittedBox is similar to the ScaleType property of ImageView

constructors

const FittedBox({
    Key key,
    this.fit: BoxFit.contain,
    this.alignment: Alignment.center,
    Widget child,
})
Copy the code

• Fit: Fill mode for the Child control
• Alignment: Indicates the alignment of the child
• Child: child control

Fill mode

• Boxfit. none: Defaults to no zoom, based on the width and height of the child control. If the parent control is not large enough, the child control is scaled down and the image does not distort
• Boxfit. fill: Fill the entire parent control with the width and height of the child control. The image will be distorted
• BoxFit. Contain: Fill the width and height of the child control proporately with the width and height of the parent control until one side is filled first. The image will not be distorted
• Boxfit. cover: Based on the width and height of the child control, it is placed into the parent control. If the parent control is not strong enough, the superfluous part of the child control is cropped
• Boxfit. fitWidth: Base on the width of the child control and place it in the parent control until the width of the parent control is full and the image is not distorted but cropped
• Boxfit. fitHeight: Base on the height of the child control and place it in the parent control until the height of the parent control is full. The image will not be distorted, but will be cropped
• Boxfit. scaleDown: Based on the width and height of the parent control, the child control scales unconditionally until it can fit into the parent control

Example 3,

Cropping is common for images, but can also be cropping for widgets, as long as the widget has a fixed size

Widget _buildColumn() {
    return Container(
      width: 300,
      height: 300,
      color: Colors.blue,
      child: FittedBox(
        fit: BoxFit.cover,
        alignment: Alignment.centerLeft,
        child: Image.asset("images/day27/girl.jpg"),),); }Copy the code

AspectRatio

1, the introduction of

• AspectRatio is the component that adjusts a child to a set AspectRatio
• AspectRatio scales proportionally based on unspecified width or height

constructors

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

• AspectRatio: Indicates the scaling ratio. 1.0 is the initial scaling ratio
• Child: child control

Example 3,

Since the height 200 is deterministic, the width is indeterminate, and the child control has a scale ratio of 1.5, the final child control has a width of 300 and a height of 200

Widget _buildColumn() {
    return Container(
      height: 200.0,
      color: Colors.blue,
      child: AspectRatio(
        aspectRatio: 1.5,
        child: Container(
          color: Colors.red,
        ),
      ),
    );
}
Copy the code

ConstrainedBox

1, the introduction of

• ConstrainedBox represents a constraint on a child control that can constrain its size

constructors

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

• Constraints: Constraints on child controls
• Child: child control

Example 3,

The constraint child control must have a minimum of 100×100 and a maximum of 150×150

Widget _buildColumn() {
    return ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: 100.0,
        minHeight: 100.0,
        maxWidth: 150.0,
        maxHeight: 150.0,
      ),
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.red,
      ),
    );
}
Copy the code

Baseline

1, the introduction of

• The Baseline control is the same as the text Baseline and is at the text Baseline
• If the child has a baseline (such as a Text control), the position of the child is adjusted based on its baseline property
• If the child does not have a baseline (such as the Container control), the position of the child is adjusted based on its bottom

constructors

const Baseline({
  Key key,
  @required this.baseline,
  @required this.baselineType,
  Widget child
})
Copy the code

• Baseline: Indicates the baseline value, top-down
• BaselineType: baseline type, alphabetic (line up the horizontal line at the bottom of the character) and ideographic (line up the horizontal line of the ideographic character)
• Child: child control

Example 3,

If there is no baseline attribute, align the text with the bottom of the child, and the text will be at the baseline

Widget _buildColumn() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Baseline(
          baselineType: TextBaseline.alphabetic,
          child: Text("Java",style: TextStyle(fontSize: 20.0),),
          baseline: 50.0,
        ),
        Baseline(
          // Alphabetic: Line up the bottom line of the character
          //ideographic: Align the horizontal lines of ideographic characters
          baselineType: TextBaseline.alphabetic,
          child: Container(
            width: 30,
            height: 30,
            color: Colors.blue[200],
          ),
          baseline: 50.0,
        ),
        Baseline(
          baselineType: TextBaseline.alphabetic,
          child: Text("iOS",style: TextStyle(fontSize: 30.0),),
          baseline: 50.0,)]); }Copy the code

FractionallySizedBox

1, the introduction of

• The FractionallySizedBox control resizes the child to fit the existing space
• The FractionallySizedBox control has no effect on the size of the child

constructors

const FractionallySizedBox({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget child,
})
Copy the code

• Alignment: Indicates the alignment of the child
• WidthFactor: widthFactor. At 0.5, the child control is half the width of the parent control. At 1.5, the child control is 1.5 times the width of the parent control
• HeightFactor: heightFactor. When set to 0.5, the child control is half the height of the parent control. When set to 1.5, the child control is 1.5 times the height of the parent control
• Child: child control

Example 3,

You do not need to specify the size of the child control. Use the FractionallySizedBox to constrain the child control to be half the size of the parent control

Widget _buildColumn() {
    return Container(
      color: Colors.blue[600],
      width: 200,
      height: 200,
      child: FractionallySizedBox(
        alignment: Alignment.center,
        widthFactor: 0.5,
        heightFactor: 0.5,
        child: Container(
          color: Colors.blue[200],),),); }Copy the code

IntrinsicHeight

1, the introduction of

• The IntrinsicHeight control adjusts the child to a fixed height

constructors

const IntrinsicHeight({ Key key, Widget child })
Copy the code

• Child: child control

Example 3,

Place four containers of the same width in the IntrinsicHeight child control. With two of the containers set to 150 and 60, and the other two not set, the IntrinsicHeight will find the maximum height to restrict the remaining containers

Widget _buildColumn() {
    return IntrinsicHeight(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: 40.0,
            height: 150.0,
          ),
          Container(
            color: Colors.red,
            width: 40.0,
            height: 60.0,
          ),
          Container(color: Colors.yellow, width: 40.0),
          Container(color: Colors.yellow, width: 40.0),,),); }Copy the code

IntrinsicWidth

1, the introduction of

• The IntrinsicWidth control adjusts the Child to a fixed width
• The main difference between the IntrinsicWidth control and the IntrinsicHeight control is that the width of the IntrinsicWidth is limited

constructors

const IntrinsicWidth({ Key key, this.stepWidth, this.stepHeight, Widget child })
Copy the code

• StepWidth: If null, the width of the child is the maximum width in the child set, and the minimum width of the child is the specified stepWidth width. If the stepWidth is less than the minimum width of the child, this value does not take effect
• StepHeight: If null, the child height is the maximum height of the parent control. If not null, the child height is the maximum height of the specified stepHeight. If the stepHeight is less than the height of the parent container, the value does not take effect
• Child: child control

Example 3,

Set stepHeight to 200, but this value does not take effect because the parent control is taller than 200. Set stepWidth to 150, but the maximum width of other child controls is not more than 150, so the minimum width is 150, that is, the gray background in the figure

Widget _buildColumn() {
    return Container(
      color: Colors.grey,
      child: IntrinsicWidth(
        // Size of the parent container
        stepHeight: 200,
        stepWidth: 150,
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.blue,
              width: 100.0,
              height: 150.0,
            ),
            Container(
              color: Colors.red,
              width: 60.0,
              height: 150.0,
            ),
            Container(color: Colors.yellow, height: 150.0),
            Container(color: Colors.green, height: 150.0[[(), [(), [(), [(); }Copy the code

LimitedBox

1, the introduction of

• LimitedBox control is a control that limits the maximum width and height of child controls
• The LimitedBox control has certain conditions for the maximum width and height limit to work
• If the outer width of the LimitedBox is not restricted (such as Row, which is high and has an unlimited width), the width of the child is limited by the LimitedBox maxWidth property
• If the outer height of the LimitedBox is not restricted (for example, Column, which is unlimited in width), the height of the child is limited by the LimitedBox maxHeight property

constructors

const LimitedBox({
  Key key,
  this.maxWidth = double.infinity,
  this.maxHeight = double.infinity,
  Widget child,
})
Copy the code

• MaxWidth: Limits the maximum width of child controls
• MaxHeight: Limits the maximum height of the child control
• Child: child control

Example 3,

Since it is a Row component, the height of the Row component is determined, and the width is unlimited, so the height limit doesn’t work, the width limit works, and finally the width is 150, and the height is 250

Widget _buildColumn() {
    return Row(
      children: <Widget>[
        LimitedBox(
          maxHeight: 150.// Since it is Row, the height is determined, so the height limit has no effect
          maxWidth: 150.// Since it is Row, the width is not limited, so the width limit works
          child: Container(
            width: 250,
            height: 250,
            color: Colors.redAccent,
          ),
        )
      ],
    );
}
Copy the code

Offstage

1, the introduction of

• The Offstage control controls whether a child is displayed with a parameter

constructors

const Offstage({ Key key, this.offstage = true, Widget child })
Copy the code

• Offstage: When offstage is true, the current control is not drawn on the screen, does not respond to clicks, does not take up space, and vice versa
• Child: child control

Example 3,

Widget _buildColumn() {
    return Offstage(
      offstage: false,
      child: Container(
        width: 250,
        height: 250,
        color: Colors.redAccent,
      ),
    );
}
Copy the code

OverflowBox

1, the introduction of

• The OverflowBox control limits a range, clipping it beyond the maximum value and filling it below the minimum value

constructors

const OverflowBox({
    Key key,
    this.alignment = Alignment.center,
    this.minWidth,
    this.maxWidth,
    this.minHeight,
    this.maxHeight,
    Widget child,
})
Copy the code

• Alignment: Indicates the alignment of child controls
• MinWidth: Limits the minimum width of child controls
• MaxWidth: Limits the maximum width of child controls
• MinHeight: Limits the minimum height of the child control
• MaxHeight: Limits the maximum height of the child control
• Child: child control

Example 3,

The child controls must conform to the minimum height, so the resulting size is 300×600

Widget _buildColumn() {
    return OverflowBox(
      minHeight: 600,
      child: Container(
        width: 300,
        height: 300,
        color: Colors.blueAccent,
      ),
    );
}
Copy the code

SizedBox

1, the introduction of

• A SizedBox is a control that sets a specific size

constructors

const SizedBox({ Key key, this.width, this.height, Widget child })
Copy the code

• Width: The width of the child control. If it is set, it is forcibly adjusted to this width. If it is not set, it is adjusted to the width of the child control itself
• Height: Specifies the height of the child control. If it is set, it is forcibly adjusted to this height. If it is not set, it is adjusted to the height of the child control itself
• Child: child control

Example 3,

Widget _buildColumn() {
    return SizedBox(
      width: 200,
      height: 200,
      child: Container(
        color: Colors.blueAccent,
      ),
    );
}
Copy the code

SizedOverflowBox

1, the introduction of

• SizedOverflowBox is a combination of SizedBox and OverflowBox
• SizedOverflowBox has the fixed size of SizedBox as well as the clipping function of OverflowBox

constructors

const SizedOverflowBox({
  Key key,
  @required this.size,
  this.alignment = Alignment.center,
  Widget child,
})
Copy the code

• Size: size of the child control
• Alignment: Indicates the alignment of child controls
• Child: child control

Example 3,

Controls the size of the child to be 100×100

Widget _buildColumn() {
    return SizedOverflowBox(
      size: Size(100.100),
      alignment: Alignment.center,
      child: Container(
        width: 300,
        height: 300,
        color: Colors.blueAccent,
      ),
    );
}
Copy the code

Transform

1, the introduction of

• Transform control is a control that controls the matrix transformation of child control. By transforming matrix, the control is animated

constructors

const Transform({
  Key key,
  @required this.transform,
  this.origin,
  this.alignment,
  this.transformHitTests = true,
  Widget child,
})
Copy the code

• Transform: Result of matrix transformation
• Origin: Indicates the offset position of the child control
• Alignment: Indicates the alignment of child controls
• TransformHitTests: Whether the click area of the child control is changed accordingly
• Child: child control

Example 3,

Offset the container slightly above and then do the rotation effect on itself

Widget _buildColumn() {
    return Transform(
      origin: Offset(0.0.10.0),
      transformHitTests: true,
      alignment: Alignment.center,
      transform: Matrix4.rotationZ(3.0),
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blueAccent,
      ),
    );
}
Copy the code

CustomSingleChildLayout

1, the introduction of

• The CustomSingleChildLayout control is a layout that can be customized with a single child control

constructors

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

• Delegate: A proxy class that controls child controls
• Child: child control

Example 3,

Create a proxy class that takes Size as the expected Size. If the expected Size does not match the Size of the current child control, the child control will be re-constrained to fit the expected Size

class FixedSizeLayoutDelegate extends SingleChildLayoutDelegate {
  FixedSizeLayoutDelegate(this.size);
  // Expected size
  final Size size;

  @override
  Size getSize(BoxConstraints constraints) => size;

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    // Resets the constraints of the child control to fit the expected Size
    return BoxConstraints.tight(size);
  }

  @override
  bool shouldRelayout(FixedSizeLayoutDelegate oldDelegate) {
    // If the expected size does not match the size of the current child control, relayout
    return size != oldDelegate.size;
  }
}
Copy the code

Because the expected size is 300×300, the current size does not match the expected size, so the child control is adjusted to the expected size

Widget _buildColumn() {
    return CustomSingleChildLayout(
      delegate: FixedSizeLayoutDelegate(Size(300, 300)),
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blueAccent,
      ),
    );
}
Copy the code

The author

Hensen_