# Top 5 Box widget

sumber&#x20;

{% embed url="https://medium.com/@pinkesh.earth/top-5-flutter-box-widgets-you-should-know-f86d8e02d86b" %}



```

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

![](https://miro.medium.com/max/60/1*GTUEbcHJ1zi_GdudovJ0eg.png?q=20)![](https://miro.medium.com/max/300/1*GTUEbcHJ1zi_GdudovJ0eg.png)

### The solution - <a href="#ddbb" id="ddbb"></a>

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

![](https://miro.medium.com/max/60/1*gO7roQEC7R1MXXA1ImIs9g.png?q=20)![](https://miro.medium.com/max/300/1*gO7roQEC7R1MXXA1ImIs9g.png)

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**_

## 2. FittedBox <a href="#id-91ec" id="id-91ec"></a>

It allows us to scale and fit the child inside.

### **When to use** <a href="#id-0b2b" id="id-0b2b"></a>

Whenever 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.

**Problem**

Let's say we have to show a **full long text** in a row.

_The below code does not match our expectations._

```
Row(children: [
  Expanded(
    child: Text(
      "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
      maxLines: 1,
      style: TextStyle(fontSize: 23),
    ),
  ),
])
```

![](https://miro.medium.com/max/60/1*qXz2L8YXQSgB0GClQnPGEA.png?q=20)![](https://miro.medium.com/max/1080/1*qXz2L8YXQSgB0GClQnPGEA.png)

**The solution -**

```
Row(children: [
  Expanded(
    child: FittedBox(
      child: Text(
        "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
        maxLines: 1,
        style: TextStyle(fontSize: 23),
      ),
    ),
  ),
])
```

![](https://miro.medium.com/max/60/1*LVYe5TtMlcY9K0rvoza_-Q.png?q=20)![](https://miro.medium.com/max/1080/1*LVYe5TtMlcY9K0rvoza_-Q.png)

Even though the font size is given as 23, It is ignored since it is inside FittedBox now.

## 3. FractionallySizedBox <a href="#id-2193" id="id-2193"></a>

It allows us to set the size of the child in percentage by setting a fraction of the total available space to width and height.

### When to use <a href="#c12f" id="c12f"></a>

Whenever you want to use a container and want to set its size in percentage then go for this. I know that it can also be set using Mediaquery but this is also a dedicated widget just for this.

**Basic syntax —**

```
FractionallySizedBox(
          widthFactor: 0.5,
          heightFactor: 0.1,
          child: Container(
            decoration: BoxDecoration(color: Colors.greenAccent),
          ),
        )
```

This would create a box with a width as 50% of horizontal space and height as 10% of vertical space.

**Portrait layout —**![](https://miro.medium.com/max/60/1*yQUf4sZnWACdh8BdkDZFng.png?q=20)![](https://miro.medium.com/max/893/1*yQUf4sZnWACdh8BdkDZFng.png)

**Landscape layout —**![](https://miro.medium.com/max/60/1*eLvlWIEnKhaYmyApEc87Dw.png?q=20)![](https://miro.medium.com/max/1662/1*eLvlWIEnKhaYmyApEc87Dw.png)

## 4. LimitedBox <a href="#f169" id="f169"></a>

It allows us to give the size of the child in an unconstrained environment.

### When to use <a href="#c443" id="c443"></a>

Whenever you have any child inside any scrollable widget and its size is not specified.

**Problem**

The below code won’t show anything on the screen because the container inside ListView doesn’t have its size specified.

```
ListView.builder(
    padding: const EdgeInsets.all(8),
    itemCount: 10,
    itemBuilder: (BuildContext context, int index) {
      return Container(
        color: Colors.greenAccent,
      );
    })
```

![](https://miro.medium.com/max/60/1*kFnVUK3_kyyxwDq3e5rpnA.png?q=20)![](https://miro.medium.com/max/1078/1*kFnVUK3_kyyxwDq3e5rpnA.png)

**The solution**

```
ListView.builder(
    padding: const EdgeInsets.all(8),
    itemCount: 10,
    itemBuilder: (BuildContext context, int index) {
      return LimitedBox(
        maxHeight: 50,
        child: Container(
          color: Colors.greenAccent,
        ),
      );
    })
```

![](https://miro.medium.com/max/42/1*hPapcYwcl65_T90hIEpYuA.png?q=20)![](https://miro.medium.com/max/1060/1*hPapcYwcl65_T90hIEpYuA.png)

Wrapping the container inside LimitedBox with maxHeight will start showing it.

## 5. SizedBox <a href="#id-8315" id="id-8315"></a>

It allows us to create a box with a fixed size. Pretty simple.

### When to use <a href="#id-87c1" id="id-87c1"></a>

It is mostly used when we need to create some empty space between two widgets.

**Basic syntax —**

```
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Container(
      height: 20,
      color: Colors.greenAccent,
    ),
    SizedBox(
      height: 10,
    ),
    Container(
      height: 20,
      color: Colors.greenAccent,
    )
  ],
)
```

![](https://miro.medium.com/max/60/1*oMlN54_vGdKpsM7qiGGuPw.png?q=20)![](https://miro.medium.com/max/1080/1*oMlN54_vGdKpsM7qiGGuPw.png)

**That’s it. Thanks for reading.**
