Flutter Sizedbox is a layout component, which is used to add tight constraints to children, and can also be used to add blank space.
Width, height are the parameters of Sizedbox
BoxConstraints get _additionalConstraints {
return BoxConstraints.tightFor(width: width, height: height);
}
final BoxConstraints constraints = this.constraints;
if (child != null) {
child!.layout(_additionalConstraints.enforce(constraints),
parentUsesSize: true);
size = child!.size;
} else {
size = _additionalConstraints.enforce(constraints).constrain(Size.zero);
}
The enforce method _additionalConstraintsreturns that is guaranteed to constraintsbe within the range of the parameter .
The above is the layout logic of SizedBox. Let's analyze the child constraints and SizedBox size through the code.
child 的 constrains
The constraints are tight, and the SizedBox transparently transmits the constraints to the child.
Constrains is loose, width is empty, SizedBox transparently transmits minWidth, maxWith to child; height is empty, SizedBox transparently transmits minHeight, maxHeight to child.
constraints is loose, width is not empty, within the scope of constraints to the child's width tight constraints; height is not empty within the scope of constraints to the child's height tight constraints.
determine your size
If there is a child, it is as big as the child.
Without child, the constraints are tight and the size is the minimum value of the constraint.
Without child, the constraints are loose, specified by the width and height parameters within the constraints.
Named constructors for SizedBox
Although SizedBox itself is very simple, it does have quite a few named constructors. We usually ignore these named constructors when we usually use them, so we should get familiar with them first. It is still beneficial to use these named constructors, which can increase the readability of the code.
SizedBox.expand
Make the SizedBox get the maximum Size, which is the same size as the parent widget.
const SizedBox.expand({
super.key, super.child })
: width = double.infinity,
height = double.infinity;
SizedBox.shrink
Make the SizedBox as small as possible.
const SizedBox.shrink({
super.key, super.child })
: width = 0.0,
height = 0.0;
SizedBox.fromSize
Construct the SizedBox by size.
SizedBox.fromSize({
super.key, super.child, Size? size })
: width = size?.width,
height = size?.height;
SizedBox.square
Make sure the SizedBox is a square.
const SizedBox.square({
super.key, super.child, double? dimension})
: width = dimension,
height = dimension;
Application Scenario
Provide tight constraints for child.
When the width and height parameters are specified, the child gets the tight constraint of width and height. Ensures that child has a fixed size. This is very useful for fixed layouts.
Provide white space between children.
You can add blanks with padding, but that will add a layer of nesting, and it looks better to use SizedBox as blanks.
placeholder
It is only used to occupy space. For example, the child in Spacer uses SizedBox.shrink.
class Spacer extends StatelessWidget {
const Spacer({
super.key, this.flex = 1})
: assert(flex != null),
assert(flex > 0);
final int flex;
Widget build(BuildContext context) {
return Expanded(
flex: flex,
child: const SizedBox.shrink(),
);
}
}