Flutter components--SizeBox, FittedBox (child components scale and align beyond parent components)

When to use SizeBox?

We know that the width and height of the button cannot be set. If we need to customize the width and height of the button, it can SizeBox be used to limit it.

1. SizeBox attribute and description

serial number	field	Attributes	describe
1	width	double	box width
2	height	double	box height

SzieBox Method and Instructions

1.expand()

Create a box as big as possible

const SizedBox.expand({ Key? key, Widget? child })
  : width = double.infinity,
    height = double.infinity,
    super(key: key, child: child);

2.shrink()

Create an empty box

const SizedBox.shrink({ Key? key, Widget? child })
  : width = 0.0,
    height = 0.0,
    super(key: key, child: child);

3.fromSize()

Create a box of a specified size

SizedBox.fromSize({ Key? key, Widget? child, Size? size })
  : width = size?.width,
    height = size?.height,
    super(key: key, child: child);

2. Introduction to FittedBox

When the content of the child component exceeds the size of the parent component, FittedBox the role of the component is to set the zoom and alignment of the child component.

serial number	field	Attributes	describe
1	fit	BoxFit	Subcomponent zoom position adjustment
2	alignment	AlignmentGeometry	Alignment of subcomponents
3	clipBehavior	Clip	How to clip the content of child components

The FittedBox attribute is used in detail

1、fit

serial number	Attributes	describe
1	fill	Unequal scaling, the picture fills the entire control
2	contain	Scale proportionally until the height or width of the picture fills the control
3	cover	Scale proportionally until the width and height of the picture fill the entire control. The picture can exceed the range of the control, but it will cause incomplete display
4	fitWidth	Proportionally scaled, the width fills
5	fitHeight	Scaled proportionally, the height fills
6	none	Unequal scaling, retain the original image size and display in the center
7	scaleDown	Proportional scaling, two scaling methods, the first one adopts containthe layout when the size of the picture is larger than the control, and the second one adopts the layout when the width and height of the picture are smaller than the controlnone

2.alignment

alignment Mainly used to set the alignment of subcomponents

3.clipBehavior

serial number	Attributes	describe
1	none	No mode cropping, normal effect
2	hardEdge	Clip without antialiasing
3	antiAlias	Clipping with antialiasing
4	antiAliasWithSaveLayer	Clip with antialiasing and save layer immediately after clipping

Summarize

SizeBox Mainly used to limit the size of sub-controls, such as the need to set the width and height of the button.

FittedBox Mainly used for scaling, alignment, and clipping operations on sub-controls.