Flutter ConstrainedBox – Tutorial and Examples

ConstrainedBox is a built-in widget of Flutter that lets you specify the maximum or minimum width and height of its child widget. In this tutorial, you’ll learn how to use the ConstrainedBox widget through some quick examples.

Example 1: ConstrainedBox and Container

We’ll get started with a super simple example. It just contains an orange container box that is constrained by a ConstrainedBox. Without the ConstrainedBox, the orange box will expand to full screen.

Preview:

The full code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Kindacode.com')),
        body: Center(
          child: ConstrainedBox(
            constraints: BoxConstraints(maxHeight: 200, maxWidth: 200),
            child: Container(
              color: Colors.orange,
            ),
          ),
        ));
  }
}

Example 2: ConstrainedBox and buttons

This example demonstrates how to size an elevated button with ConstrainedBox.

Preview:

The code snippet:

ConstrainedBox(
            constraints: BoxConstraints.tightFor(width: 150, height: 150),
            child: ElevatedButton(
              child: Text('I am a button'),
              onPressed: () {},
            ),
          ),

Example 3: ConstrainedBox and Image

In this example, the images will be displayed with dimensions between 200 x 200 and 350 x 350.

Preview

The original resolution of the first image is 640 x 426 and the original resolution of the second image is 101 x 97. However, the first one is displayed smaller than its actual size and the second one is displayed larger than its actual size.

The full code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Kindacode.com')),
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              ConstrainedBox(
                constraints: BoxConstraints(
                    minWidth: 200,
                    minHeight: 200,
                    maxWidth: 350,
                    maxHeight: 350),
                child: Image.network(
                  'https://www.kindacode.com/wp-content/uploads/2020/11/my-dog.jpg',
                  fit: BoxFit.fill,
                  // the original resolution is 640 x 426
                ),
              ),

              // just add some white space
              SizedBox(
                height: 20,
              ),

              ConstrainedBox(
                constraints: BoxConstraints(
                    minWidth: 200,
                    minHeight: 200,
                    maxWidth: 350,
                    maxHeight: 350),
                child: Image.network(
                  'https://www.kindacode.com/wp-content/uploads/2021/01/tiny-dog.jpg',
                  // the original resolution is 101 x 97
                  fit: BoxFit.fill
                ),
              ),
            ],
          ),
        ));
  }
}

API

ConstrainedBox constructor:

ConstrainedBox({
  Key key, 
  @required BoxConstraints constraints, 
  Widget child
})

ConstrainedBox properties:

Name	Type	Description
child	Widget	The child widget
constraints	BoxConstraints	The constraints that imposes on the child widget

To implement ConstrainedBox, you need to know about BoxConstraints class constructors.

This constructor will create box constraints with the given constraints:

BoxConstraints({
  double minWidth: 0.0, 
  double maxWidth: double.infinity, 
  double minHeight: 0.0, 
  double maxHeight: double.infinity
})

This one make box constraints that expand to fill another box constraints:

BoxConstraints.expand({
  double? width, 
  double? height
})

This implement box constraints that forbid sizes larger than the given size:

BoxConstraints.loose(
  Size size
)

This creates box constraints that is respected only by the given size:

BoxConstraints.tight(
  Size size
)

This creates box constraints that require the given width or height:

BoxConstraints.tightFor({
  double? width, 
  double? height
})

This builds box constraints that require the given width or height, except if they are infinite:

BoxConstraints.tightForFinite({
  double width: double.infinity, 
  double height: double.infinity
})

You can find more useful information in the official docs at: https://api.flutter.dev/flutter/rendering/BoxConstraints-class.html

Wrap Up

In this article, we have explored the ConstrainedBox widget and walked through a few examples of using it. If you would like to learn more about Flutter, real also the following: Working with Table in Flutter – Flutter: Container border examples – Flutter form validation example – Flutter Draggable example – Flutter Cupertino Button or check out the Flutter category page for the latest tutorials and examples.