Flutter's size-restricted container components include ConstrainedBox, UnconstrainedBox, SizedBox, AspectRatio, FractionallySizedBox, LimitedBox, and Container. These components can constrain the size of sub-components, one by one introduced below.
The ConstrainedBox component constrains the maximum width and height of the subcomponents. If a component has a width and height of 300, it is wrapped in a ConstrainedBox, and a maximum width and height constraint is added to the ConstrainedBox. The usage is as follows:
BoxConstraints provides convenient construction functions for developers to call, such as BoxConstraints.tight (Size size) and BoxConstraints.expand ().
If BoxConstraints are nested, there are 2 ConstrainedBoxes as follows:
Taking the maximum width as an example, the maxHeight value of the first BoxConstraints is 60, which means that the maximum height of the child controls is 60, and the maxHeight value of the second BoxConstraints is 100. Since the second BoxConstraints is also subject to the first Constraints, so the maximum height of the second BoxConstraints can only be 60, the maximum height of the final subcomponent is 60, and the maximum width of the same is 200, so the final value of the multi-level BoxConstraints nested constraint maximum value is equal to multiple BoxConstraints constraints The minimum value. Similarly, the minimum value of nested constraints is equal to the maximum value of multiple BoxConstraints constraints.
The UnconstrainedBox component does not impose any constraints on the child components. For example, there is a parent component whose size is 200x200, and the child component is UnconstrainedBox. The UnconstrainedBox wraps a 300x300 component. The code is as follows:
Note: The yellow area indicates that the child control is beyond the area of the parent control. The yellow area will only exist in debug mode, and only the red area in release mode.
Although UnconstrainedBox does not limit the size of its child controls, it is still constrained by the parent control, and the area beyond the parent control will be intercepted.
UnconstrainedBox allows to set the alignment, the usage is as follows:
Although the infinite size is set, will the child controls be infinitely long? No, no, the child control will still be constrained by the parent component, will expand to the size of the parent component, and there is a convenient way to set this method:
child: RaisedButton (
child: Text ('this is SizedBox'),
SizedBox can have no sub-components, but it will still take up space, so SizedBox is very suitable for controlling the gap between 2 components, the usage is as follows:
The AspectRatio component is a component with a fixed aspect ratio. If the width of the component is fixed, the height is expected to be 1/2 of the width. AspectRatio can be used to achieve this effect.
The aspectRatio parameter is the aspect ratio. It can be written directly as a fraction or as a decimal, but it is recommended to write it as a fraction, which is more readable. The effect is as follows:
When we need a control whose size is relative, for example, the width of the current button accounts for 70% of the parent component, we can use FractionallySizedBox to achieve this effect.
Wrap the child control with FractionallySizedBox, set the widthFactor width coefficient or heightFactor height coefficient, the coefficient value range is 0-1, 0.7 means 70% of the parent component, the usage is as follows:
The LimitedBox component limits its size when it is not constrained by the parent component. What does it mean by not being constrained by the parent component? Like the other components introduced in this article, they will constrain the child components. The unconstrained parent components are ListView, Row, Column, etc. If the parent component of the LimitedBox is constrained, the LimitedBox will not do anything at this time. Think that without this component, the code is as follows:
The width and height set by the LimitedBox are not square. At this time, the effect is square, indicating that the LimitedBox has no effect.
Add the Container component directly in the ListView as follows:
The Container component should be one of the most commonly used components. The Container component can directly set its width and height. The usage is as follows:
The Container component is the one with the most attributes in these components, and of course the one with the most complex usage. There is an opportunity to write another article introduction, Official Document.
With so many constrained container components, which one should you use? Summarized as follows:
ConstrainedBox: It is suitable for setting the maximum / small width and height, the size of the sub-component since the component size, but it cannot exceed the set limit. UnconstrainedBox: Not used much, as a child component of ConstrainedBox can "break through" the constraints of ConstrainedBox, and parts that exceed the limit will be intercepted. SizedBox: It is suitable for the case of fixed width and height, and is often used as a gap between two components. AspectRatio: Applicable to fixed aspect ratio. FractionallySizedBox: Applies to the percentage of parent components. LimitedBox: Applicable when there is no parent component constraint. Container: Applicable to situations where there are not only size constraints, but also decorations (colors, borders, etc.), inner and outer margins, etc.
In today's digital age, mobile applications have become an integral part of our daily lives. From ordering food to managing finances, there seems to be an app for every need. Behind the scenes, these apps are powered by a technology that has revolutionize...
Spatial is a metaverse platform that allows anyone to create immersive 3D spaces, which can be instantly shared to the Web, iOS, Android, and VR, and explored by others. The Spatial Creator Toolkit, powered by Unity, allows you to add even more interactiv...