In this post, I'm going to share you an example of LimitedBox widget in Flutter.
Here is how the final output of the example app, you are going to create.
![](https://fluttercentral.com/Uploads/ae4d54de-d72a-4e21-8e90-5c7a9c30505e.gifwidth="50%height="auto](
As per Flutter documentation, LimitedBox is a box that limits its size only when it's unconstrained.
If this widget's maximum width is unconstrained then its child's width is limited to maxWidth. Similarly, if this widget's maximum height is unconstrained then its child's height is limited to maxHeight.
This has the effect of giving the child a natural dimension in unbounded environments. For example, by providing a maxHeight to a widget that normally tries to be as big as possible, the widget will normally size itself to fit its parent, but when placed in a vertical list, it will take on the given height.
This is useful when composing widgets that normally try to match their parents' size so that they behave reasonably in lists (which are unbounded).
Here is the full code from main.dart file.
Note: It is important to check how this example behaves by removing the LimitedBox. The output is going to be an ListView with no containers with colors.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: rgb(86, 156, 214);](import color: rgb(206, 145, 120);]('dart:math';
color: rgb(86, 156, 214);](import color: rgb(206, 145, 120);]('package:flutter/material.dart';
color: rgb(86, 156, 214);](void color: rgb(220, 220, 170);](main() { color: rgb(220, 220, 170);](runApp(color: rgb(78, 201, 176);](MyApp());}
color: rgb(86, 156, 214);](class color: rgb(78, 201, 176);](MyApp color: rgb(86, 156, 214);](extends color: rgb(78, 201, 176);](StatelessWidget { color: rgb(86, 156, 214);](final length = color: rgb(181, 206, 168);](10;
color: rgb(86, 156, 214);](@override color: rgb(78, 201, 176);](Widget color: rgb(220, 220, 170);](build(color: rgb(78, 201, 176);](BuildContext context) { color: rgb(197, 134, 192);](return color: rgb(78, 201, 176);](MaterialApp( home: color: rgb(78, 201, 176);](Scaffold( body: color: rgb(78, 201, 176);](ListView.color: rgb(220, 220, 170);](builder( padding: color: rgb(86, 156, 214);](const color: rgb(78, 201, 176);](EdgeInsets.color: rgb(220, 220, 170);](all(color: rgb(181, 206, 168);](8), itemCount: length, itemBuilder: (color: rgb(78, 201, 176);](BuildContext context, color: rgb(78, 201, 176);](int index) { color: rgb(197, 134, 192);](return color: rgb(78, 201, 176);](LimitedBox( maxHeight: color: rgb(181, 206, 168);](200, child: color: rgb(78, 201, 176);](Container( color: color: rgb(78, 201, 176);](UniqueColorGenerator.color: rgb(220, 220, 170);](getColor(), ), ); } ) ), ); }}
color: rgb(86, 156, 214);](class color: rgb(78, 201, 176);](UniqueColorGenerator { color: rgb(86, 156, 214);](static color: rgb(78, 201, 176);](Random random = color: rgb(197, 134, 192);](new color: rgb(78, 201, 176);](Random(); color: rgb(86, 156, 214);](static color: rgb(78, 201, 176);](Color color: rgb(220, 220, 170);](getColor() { color: rgb(197, 134, 192);](return color: rgb(78, 201, 176);](Color.color: rgb(220, 220, 170);](fromARGB(color: rgb(181, 206, 168);](255, random.color: rgb(220, 220, 170);](nextInt(color: rgb(181, 206, 168);](255), random.color: rgb(220, 220, 170);](nextInt(color: rgb(181, 206, 168);](255), random.color: rgb(220, 220, 170);](nextInt(color: rgb(181, 206, 168);](255)); }}
font-size: 1rem;](Hope this is helpful to you.
Thanks,Srikanth