There may be moments when you get confused about which widget to use and especially the Box widgets which fall under the layout widgets category. In this post, we will understand the difference and practical use of each Box Widget.
1. ConstrainedBox
You can add flexibility to the height and width of the widget when its child is constrained as per the given values. The size of ConstrainedBox itself depends on its parent. For using ConstrainedBox, you need to create a BoxConstraints. BoxConstraints allows you to define the minimum and maximum width and height of a widget.
2. UnconstrainedBox
It puts no constraints on its child, allowing it to render at its “natural” size. It renders the child as if it were alone on an infinite canvas with no constraints.
3. OverflowBox
OverflowBox imposes different constraints on its child than it gets form its parent, allowing the child to overflow it. Although OverflowBox and UncosntrainedBox are similar, but the first one will not show any warnings if the child does not fit the space.
4. LimitedBox
LimitedBox allows giving the size of the child when it is unconstrained. This box is useful when composing widgets that normally try to match their parents’ size, so that they behave reasonably in lists. You can use LimitedBox when you have any child inside the scrollable widget and its size is not specified. LimitedBox differs from the ConstrainedBox in that it limits only when it gets infinite constraints.
5. FittedBox
This box will change the size of its child until it is completely filled. You can use it for example, when you want to show child inside parent and for you showing a full child is more important (even though it gets scales down) than the child being clipped off.
6. SizedBox
This is a box with a specified size. You cannot set color or decoration using SizedBox, but it is used for sizing the widget passed as child. If given a child, this widget forces its child to have a specific width or height (considering that values are permitted by this widget’s parent). If width or height is null, this widget will size itself to match the child’s size in that dimension.
