Flutter - Using LimitedBox Widget Examples

This tutorial explains what is LimitedBox widget in Flutter including its behavior and usage examples.

LimitedBox is a widget in Flutter that constraints the size of its child if it is unconstrainted by its parent. This can be useful if you want to create a widget that will be reused multiple times. If you use SizedBox, the size of the widget will always controlled by the SizedBox. Meanwhile, with LimitedBox, the size constraints will only be applied if the parent doesn't have size constraints.

LimitedBox has maxWidth and maxHeight properties, type of both is double with double.infinity as the default value. Those values are used to set maximum width and height limit to be applied. maxWidth is only used when BoxConstraints.maxWidth is absence, while maxHeight is only used when BoxConstraints.maxHeight is absence. You can pass those properties in the constructor. Those values cannot be null or negative to avoid assertion error.

You need to understand the behavior of the parent component. For example, if you use Container without passing width and height, it will pass constraints from the parent to te child, which means it becomes constrained and LimitedBox will not work as expected.

To demonstrate LimitedBox, the easiest way is using UnconstrainedBox, as shown in the below example. As the parent doesn't have constraint, it will use the constraint values from the LimitedBox.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
   @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'LimitedBox Example',
        home: Scaffold(
          appBar: AppBar(title: Text('LimitedBox Example by Woolha.com')),
          body: UnconstrainedBox(
            child: LimitedBox(
                maxHeight: 150,
                maxWidth: 150,
                child: Container(
                  color: Colors.red,
                )
            )
          ),
        ),
      );
    }
  }

Below is the output of the above code.

Another useful usage of LimitedBox is for controlling the size of ListView items. In the below example, the maxHeight is set to 50 though the item height is supposed to be greater than 50. As the result, it becomes overflow as the height is not enough to render the item.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
   @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'LimitedBox Example',
        home: Scaffold(
          appBar: AppBar(title: Text('LimitedBox Example by Woolha.com')),
          body: MyList(),
        ),
      );
    }
  }
  
  class MyList extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return ListView.builder(
        itemCount: 4,
        itemBuilder: (context, index) {
          return LimitedBox(
            maxHeight: 50,
            child: MyCard(index),
          );
        },
      );
    }
  }
  
  class MyCard extends StatelessWidget {
    int index;
  
    MyCard(this.index, {Key key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Card(
        child: ListTile(
          leading: Icon(Icons.album, size: 50),
          title: Text('Item $index'),
        ),
      );
    }
  }

Here's the output

In conclusion, LimitedBox widget can be useful to set the maximum width and height of a widget if it's unconstrained. However, it will not be used if the parent already sets size constraints to the widget.

Flutter - Using LimitedBox Widget Examples

Ivan Andrianto