How to apply padding to any Widget in Flutter

Padding is an essential aspect of building user interfaces in Flutter. It allows you to control the spacing between widgets. In this post, we go over the different approaches you can take to apply padding in Flutter. Each approach has its advantages and use cases, depending on your specific needs and requirements.

Getting started

To get started we have a simple main.dart file that will display an orange colored Container widget:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Padding Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Padding Demo'),
        ),
        body: Container(
          height: 200,
          color: Colors.orange,
        ),
      ),
    );
  }
}

Running the main.dart file will show the following screen:

1. Padding Widget

Let us start with the most common approach to applying padding, the Padding widget. The Padding widget takes a padding property that accepts the EdgeInsets class. The EdgeInsets class has different constructors that can be used to apply padding in different ways. To apply padding on every side we use the EdgeInsets.all constructor, see the code below:

body: Padding(
  padding: const EdgeInsets.all(20),
  child: Container(
    height: 200,
    color: Colors.orange,
  ),
),

To apply different padding for each side individually, we use the EdgeInsets.only constructor. In this constructor we can apply different properties: top, right, bottom, and left, see the code below:

body: Padding(
  padding: const EdgeInsets.only(top: 20, right: 15, bottom: 10, left: 5),
  child: Container(
    height: 200,
    color: Colors.orange,
  ),
),

We can also use the EdgeInsets.fromLTRB constructor to specify the padding for each side individually in Flutter. Here is an example:

body: Padding(
  padding: EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0),
  child: Container(
    height: 200,
    color: Colors.orange,
  ),
),

At last, we can use the EdgeInsets.symmetric constructor to specify equal padding on opposite sides. In this constructor, we can provide the horizontal and vertical properties. For example:

body: Padding(
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  child: Container(
    height: 200,
    color: Colors.orange,
  ),
),

2. Container Widget

The Container widget itself can also be used to apply padding, along with additional styling like background color, borders, or alignment. This approach is recommended when you want to apply padding alongside other customization.

Here is an example of using the Container widget to apply padding to a widget in Flutter:

body: Container(
  color: Colors.green,
  padding: EdgeInsets.all(20),
  child: Container(
    height: 200,
    color: Colors.orange,
  ),
),

As you can see we wrapped our initial Container widget with another Container widget. The wrapping Container widget applies padding on the second Container widget by using the EdgeInsets class, the same class that the Padding widget uses. This means that we can apply the same constructors in the padding property of the Container widget as the Padding widget.

3. SizedBox Widget

The SizedBox widget is useful when you need to apply padding on the top or bottom of a widget that is inside a Column widget or inside a Row widget to apply padding on the left or right of the widget.

Here is an example of using the SizedBox widget to apply padding to a widget in Flutter:

body: Column(
  children: [
    SizedBox(
      height: 20,
    ),
    Container(
      height: 200,
      color: Colors.orange,
    ),
  ],
),

By adding the SizedBox widget on top of our Container widget you can see that we applied padding on top of our Container widget.

Conclusion

When it comes to applying padding in Flutter, you have multiple approaches that you can use. The Padding widget is the most commonly used and recommended approach due to its simplicity and flexibility. However, the Container widget can be useful when you want to add additional styling. Furthermore, the SizedBox widget can be useful inside the Column and Row widgets.

Tags

• Flutter
• Dart