Top 5 Flutter Box Widgets You Should Know.

Why this article

There are times when you may get confused about which widget to use when and especially the Box widgets which falls under the layout widgets category.

1. ConstrainedBox

It allows us to add flexibility to the height and width of the widget when its child’s size is subject to change.

When to use

It depends on your case/requirement. There are various cases where you may require to use it. I will try to simulate one problem here.

problem

Let’s say we have to show a container of at least a height of 50 and the child inside can have height 30 or 80. In any situation when the child is bigger than the container then the container should also expand rather than cutting the child’s view.

The below code does not match our expectations.

Container(
  height: 50,
  child: Icon(
    Icons.add,
    size: 80,
    color: Colors.red,
  ),
)

The solution -

Container(
  child: ConstrainedBox(
    constraints: BoxConstraints(minHeight: 50),
    child: Icon(
      Icons.add,
      size: 80,
      color: Colors.red,
    ),
  ),
)

Even though the minimum height is 50, The container will try to be as big as its child since we have not given maxHeight property which is by default double.infinity

#flutter #mobile-apps #developer