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.
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.
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final length = 10;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body:
ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: length,
itemBuilder: (BuildContext context, int index) {
return LimitedBox(
maxHeight: 200,
child: Container(
color: UniqueColorGenerator.getColor(),
),
);
}
)
),
);
}
}
class UniqueColorGenerator {
static Random random = new Random();
static Color getColor() {
return Color.fromARGB(255, random.nextInt(255), random.nextInt(255), random.nextInt(255));
}
}
Hope this is helpful to you.
Thanks,
Srikanth