ConstrainedBox

ConstrainedBox introduction

The main purpose is to impose additional constraints on its children, and ConstrainedBox is the best choice when the child needs to adjust its width and height automatically for optimal fit.

The sample code

Many of the effects in this article are not screenshots. Download the source code to run the project source code address, or view the video tutorial address through the video tutorial

ConstrainedBox property and description

ConstrainedBox has only two properties. Constraints adds additional constraints to the child component, and child to the constrained child component.

field attribute describe
constraints BoxConstraints Add additional constraints to the child components
child Widget Constrained child components

ConstrainedBox Basic use

ConstrainedBox is very simple to use, so let’s focus on BoxConstraints

ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: 100,
    minHeight: 30,
  ),
  child: Container(
    color: Colors.orangeAccent,
    child: Text("ConstrainedExample"),),)Copy the code

BoxConstraints

BoxConstraints introduction

BoxConstraints immutable layout constraints on RenderBox layout. RenderBox is a 2d cartesian rendering object. I want to learn more about RenderBox

BoxConstraints properties and instructions

There are four attributes

field attribute describe
minWidth double Minimum width, default 0.0
maxWidth double Maximum width, double. Infinity by default
minHeight double Minimum height, default is 0.0
maxHeight double Maximum height, default double. Infinity

Basic use of BoxConstraints

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 30,
    maxHeight: 100
  ),
  child: Container(
    color: Colors.orangeAccent,
    child: Text("ConstrainedExample"),),)Copy the code

BoxConstraints methods and instructions

1, the tight ()

The width and height of the container depend on the size passed in.

BoxConstraints.tight(Size size)
    : minWidth = size.width,
      maxWidth = size.width,
      minHeight = size.height,
      maxHeight = size.height;
Copy the code

2, tightFor ()

Width and height are optional parameters, which can be larger if not passed in.

const BoxConstraints.tightFor({
  double? width,
  double? height,
}) : minWidth = width ?? 0.0,
     maxWidth = width ?? double.infinity,
     minHeight = height ?? 0.0,
     maxHeight = height ?? double.infinity;
Copy the code

3, tightForFinite ()

The width and height of the default to the maximum, in the absence of the parameters of the maximum, in the passing of parameters can be tight.

const BoxConstraints.tightForFinite({
  double width = double.infinity,
  double height = double.infinity, }) : minWidth = width ! =double.infinity ? width : 0.0, maxWidth = width ! =double.infinity ? width : double.infinity, minHeight = height ! =double.infinity ? height : 0.0, maxHeight = height ! =double.infinity ? height : double.infinity;
Copy the code

4, loose ()

The maximum width and height are limited to the size that is passed in

BoxConstraints.loose(Size size)
  : minWidth = 0.0,
		maxWidth = size.width,
		minHeight = 0.0,
		maxHeight = size.height;
Copy the code

5, expand ()

Width and height are optional parameters that depend on the parent component when not passed in, take up all the remaining space of the parent component, and be as large as you set when passed in.

const BoxConstraints.expand({
  double? width,
  double? height,
}) : minWidth = width ?? double.infinity,
		 maxWidth = width ?? double.infinity,
		 minHeight = height ?? double.infinity,
		 maxHeight = height ?? double.infinity;
Copy the code

UnconstrainedBox

UnconstrainedBox does not impose any restrictions on its children, and allows them to be drawn at their own size. Therefore, this component is rarely used in our development, so it is useful to remove multiple constraints.

For example, the button size of the Actions attribute in AppBar is fixed. If you want to change it, you can UnconstrainedBox the parent element.

AppBar(
  title: Text("ConstrainedExample"),
  actions: [
    UnconstrainedBox(
      child: Container(
        width: 20,
        height: 20,
        color: Colors.pink,
        child: IconButton(onPressed: () {}, icon: Icon(Icons.alarm), iconSize: 20, padding: EdgeInsets.zero,),
      ),
    ),
    IconButton(onPressed: () {}, icon: Icon(Icons.add)),
  ],
)
Copy the code

conclusion

ConstrainedBox automatically adjusts the width and height of the ConstrainedBox to best fit the child components. If you know exactly how wide and tall the component needs to be, ConstrainedBox will not fit. BoxConstraints is an additional option added to ConstrainedBox to maximize business requirements. UnconstrainedBox is used in very few scenarios, mainly to remove multiple constraints.