Padding Widget – Flutter Widget Guide By Flutter Agency

Padding Widget – Flutter Widget Guide By Flutter Agency

What is Padding Widget?

Padding Widget is used to set space between Text content and defined text content area. It’s like a margin type but only applied on Text to set space between border defined area. There are two ways to set it in flutter first is using the Padding and the second is Wrap the Text widget in Container Widget and apply the padding on Container Widget. 

The constructor of it look like below :

Padding({
Key key, 
@required EdgeInsetsGeometry padding, 
Widget child
})

In above Constructor fields marked with @required must not be empty.

You can provide padding to a widget in many ways. The following are some of them.

• EdgeInsets.all()
• EdgeInsets.fromLTRB()
• EdgeInsets.only()

The following code snippet applies padding of 30 to all the four sides of the button.

padding: EdgeInsets.all(30),

To control the padding differently in the four directions, you can use EdgeInsets.fromLTRB() constructor.

//padding with left:5, top:25, right:50, bottom:10
padding: EdgeInsets.fromLTRB(5, 25, 50, 10)

You can also provide it only on the specific sides of the Button widget using EdgeInsets.only() constructor.

//padding to only left and right
padding: EdgeInsets.only(left: 50, right:50),
//paddint to only top
padding: EdgeInsets.only(top: 20),

EdgeInsets.all() :

Consider a code snippet like below :

Column(
      children: <Widget>[
        Center(
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button - Default Padding'),
                ),
              ),
              Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button - Padding 25'),
                  padding: EdgeInsets.all(25),
                ),
              ),
              Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button - Padding 50'),
                  padding: EdgeInsets.all(50),
                ),
              ),
            ],
          ),
        ),
      ],
    );

Above code will give us output like below :

EdgeInsets.all()

EdgeInsets.fromLTRB()

Consider a code snippet as below :

   Center(
          child: Column(children: <Widget>[
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button - Default Padding'),
                )),
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button'),
                  padding: EdgeInsets.fromLTRB(
                    5,
                    25,
                    50,
                    10,
                  ),
                )),
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button'),
                  padding: EdgeInsets.fromLTRB(
                    10,
                    25,
                    10,
                    10,
                  ),
                )),
          ]),
        ),

Above code, will gives us output like below

EdgeInsets.fromLTRB()

In this example application, we set padding to the only required sides using EdgeInsets.only() constructor as shown in the following code snippet.

Center(
            child: Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              child: RaisedButton(
                onPressed: () {},
                child: Text('Raised Button - Default Padding'),
              )),
          Container(
              margin: EdgeInsets.all(5),
              child: RaisedButton(
                onPressed: () {},
                child: Text('Raised Button'),
                padding: EdgeInsets.only(left: 50, right: 50),
              )),
          Container(
              margin: EdgeInsets.all(5),
              child: RaisedButton(
                onPressed: () {},
                child: Text('Raised Button'),
                padding: EdgeInsets.only(top: 20),
              )),
        ])),

We will get output like below :

EdgeInsets.only()

Need more assistance?
Do Contact Us !!!