Explore Padding Widget in Flutter

A tutorial to help you understand everything about Padding Widget in Flutter

Introduction about Padding Widget

It is a Widget that apply the given Padding to it’s child.

Let’s see an Example -

Padding(
      padding: EdgeInsets.all(30.0),
      child: Text('Hello World!'),
    )</span>

The Output is -

Now you can see a padding around the Text widget which we apply for all directions.

NOTE: I wrap the Padding widget inside a Card Widget that is why i got the Rounded corner and set color to red to see it Clearly.

How to define Padding from one Direction

To define Padding from any side(i.e from left,right,top,bottom) we can use property EdgeInsets.only

Note: we can use a single or any two or any three or all of them . It is all valid .

Example-1

Padding(
      padding: EdgeInsets.only(left:30.0),
      child: Text('Hello World!'),
    )</span>

The Output is -

Padding from left side

Now here you can see that only from left side the text is shifted.

Example-2

Padding(
      padding: EdgeInsets.only(left:30.0,right:50),
      child: Text('Hello World!'),
    )</span>

The Output is-

Padding left=30 and right=50

Here we can see that left,right side is shifted.

Example-3

Padding(
      padding: EdgeInsets.only(left:30.0,right:50,top:40,bottom:60),
      child: Text('Hello World!'),
    )</span>

The Output is-

padding left=30 ,right=50 ,top=40,bottom=60

We see all four side have a padding.

How to define Padding different from all side

As you see above we also define padding different in all directions . There is no difference in the output we can use any of them.

But mainly we use EdgeInsets.fromLTRB to define padding for left,top,right,bottom .Remember the order because flutter expect values in that order only.

Let’s take an example-

Padding(
      padding: EdgeInsets.fromLTRB(30.0,40,50,60),
      child: Text('Hello World!'),
    )</span>

The Output is-

Note that the output is same in Example-3 and this method .You can use any of the method.

How to define Padding Symmetricaly

Symmetrical means same from parts facing each other or same around an axis.

Let’s take an example-

Padding(
      padding: EdgeInsets.symmetric(vertical:30,horizontal:60),
      child: Text('Hello World!'),
    )</span>

The Output is-

Vertical=30,Horizontal=60

Here in this we can either use vertical,horizontal or both and Here you see that the Padding is same in vertical direction(i.e 30) as well as for horizontal direction(i.e 60).

That’s It for this Article.Hope you like it.If you like it then clap for it.