Flutter box constraints - Height, width, Margin and Padding

In this post, we’ll learn about box constraints in Flutter using the Container widget.

The Container widget is used to contain child widgets and apply some basic styling properties such as Height, Width, Padding, Margin, Color etc… to be applied when the widgets laid out on screen.

If the container has no children then it will automatically fill the given area on the screen (dependant on constraints), otherwise it will wrap the height & width of the given child elements.

You can simply create a Container widget as:

Container(
  color: Colors.amber,
  alignment: Alignment.center,
  child: Text(
    "Container Widget",
    textDirection: TextDirection.ltr,
  ),
)

We’ll learn about the Container widget later.

Height and Width

In Flutter, you can set the height and width of any widgets that appears on the screen. For that you can use the height and width properties of the Container widget. To understand this, replace the contents of main.dart with the following code.

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "My App",
      home: Container(
        color: Colors.amber,
        alignment: Alignment.center,
        height: 200.0,
        width: 400.0,
        child: Text(
          "Container Widget",
          textDirection: TextDirection.ltr,
        ),
      ),
    )
  );
}

If you run the application, you will see that the Container widget spans the entire screen ignoring the height and width which we have provided.

Why did this happen? In the previous post, we’ve seen that before displaying the layout on the screen, Flutter creates a layout tree and assigns some of the properties of the parent widget to it’s child widgets.

Here, the MaterialApp widget covers the entire screen. That is, height and width of the MaterialApp widget will be equal to the height and width of your screen. These properties are passed to the child elements of the MaterialApp widget which includes the Container widget. So the custom height and width property specified is ignored.

To apply the height and width properties to the Container widget, we should use a widget that gives priority to the properties of the child widget as the parent widget. One such widget is the Center widget.

Now, I’m placing the Container widget as the child widget of a Center widget.

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "My App",
      home: Center(
        child: Container(
          color: Colors.amber,
          alignment: Alignment.center,
          height: 200.0,
          width: 400.0,
          child: Text(
            "Container Widget",
            textDirection: TextDirection.ltr,
          ),
        ),
      )
    )
  );
}

Run the project. Now you can see that the Container widget has a custom height and width.

Margin and Padding

A margin can be defined as the space between two widgets and Padding is the distance of a widget from its outer boundary. In Flutter, you can assign margin to all four sides of a widget.

To apply margin to all the sides of a widget, we’re using EdgeInsets.all() method.

margin: EdgeInsets.all(30.0)

To apply a different margin to the sides of a widget, you can use the following properties.

• margin: EdgeInsets.only( left: value )
• margin: EdgeInsets.only( top: value )
• margin: EdgeInsets.only( right: value )
• margin: EdgeInsets.only( bottom: value )

Here’s an example that sets margin only to the top and right side of the widget.

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      title: "My App",
      home: Center(
        child: Container(
          color: Colors.amber,
          alignment: Alignment.center,
          margin: EdgeInsets.only(top:30.0, right: 50.0),
          child: Text(
            "Container Widget",
            textDirection: TextDirection.ltr,
          ),
        ),
      )
    )
  );
}

Now try the same with padding and see what happens. Happy coding