# Top 5 Box widget sumber {% embed url="" %} ``` 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 - ``` 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 It allows us to scale and fit the child inside. ### **When to use** 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 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 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 It allows us to give the size of the child in an unconstrained environment. ### When to use 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 It allows us to create a box with a fixed size. Pretty simple. ### When to use It is mostly used when we need to create some empty space between two widgets. **Basic syntax —** ``` Column( mainAxisAlignment: MainAxisAlignment.center, children: [ 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.** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://triyono.gitbook.io/fluttercheatsheet/widgets/top-5-box-widget.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.