Search code snippets, questions, articles...

Add padding to container in Flutter

Padding is a useful feature in Flutter which allows developers to set a specific amount of space between the edges of a container and its child elements. Padding helps to visually separate elements and can be used to create more interesting and aesthetically pleasing interfaces. In this tutorial, we will explain how to add padding to a container in Flutter and provide some examples of how to effectively use padding in design.

Add padding to Container in Flutter

To add padding to a Container widget:

  1. Create a Container widget in Flutter - Container()
  2. Use padding property to add padding to it - Container(padding: EdgeInsets.all(50.0), child: Text('Hello'))

In the following example, we are adding padding of 50px to each side of the Container widget.

Container(
    padding: EdgeInsets.all(50.0),
    child: Text('Hello World'),
),

To learn more about the padding property of the Container widget, check the following code examples.


Add Padding to each side of the Container 

Adding padding to each side of a container in Flutter is a simple process that involves using the EdgeInsets.all(val) value to the padding property. This property allows developers to specify an exact amount of padding to add to each side of the container.

Container(
    padding: EdgeInsets.all(20.0),
    child: Text('Hello World'),
),

The above code example will add a 20px padding to each side of the Container widget.


Add padding to specific sides of the Container

You can also specify different padding values for each side of the Container by using the EdgeInsets.only() method:

Container(
  padding: EdgeInsets.only(
    top: 10,
    bottom: 20,
    left: 30,
    right: 40,
  ),
  child: Text('Hello World'),
)

This code example creates a Container widget with the child widget 'Hello World' and sets the padding of the Container to 10px on the top, 20px on the bottom, 30px on the left, and 40px on the right. The padding is set using the EdgeInsets.only method.


Add padding to the symmetric sides of the Container

To add padding to the symmetric sides of a Container in Flutter, use the EdgeInsets.symmetric() constructor to create a symmetric EdgeInsets object. Pass this EdgeInsets object to the padding parameter of the Container. For example:

Container( 
  padding: EdgeInsets.symmetric(
    vertical: 20.0,
    horizontal: 10.0,
  ), 
  child: Text('Hello World'),
)

This Flutter code creates a Container widget which contains a Text widget with the text "Hello World". The Container widget has a padding of 20.0 pixels on the top and bottom, and 10.0 pixels on the left and right. This will create a margin around the Text widget.


Was this helpful?
1 Comments

The above code snippet will add padding from all sides symmetrically. To add different padding from specific sides use below code

Container(
    padding: EdgeInsets.only(top: 100.0, left: 50.0, right: 30.0, bottom: 20.0),
    child: Text(
        'Hello world'
    ),
),

To add padding horizontally or vertically in symmetric, use

Container(
    padding: EdgeInsets.symmetric(horizontal: 100.0, vertical: 50.0),
    child: Text(
        'Hello world'
    ),
),
Programming Feeds
Learn something new everyday on Devsheet