Flutter - Padding Widget

Last Updated : 21 Feb, 2022

Padding widget in flutter does exactly what its name says, it adds padding or empty space around a widget or a bunch of widgets. We can apply padding around any widget by placing it as the child of the Padding widget. The size of the child widget inside padding is constrained by how much space is remaining after adding empty space around. The Padding widget adds empty space around any widget by using the abstract EdgeInsetsGeometry class.

Constructor of Padding Class:

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

Properties of Padding Widget:

child: This property simply takes a widget as the object to display is inside the Padding widget on the screen.
padding: This property holds the EdgeInsetsGeometry class as the object to add empty space around the widget.

Example 1:

Dart

import 'package:flutter/material.dart';

//Imported material design library
void main() {
  runApp(
    //App widget tree starts from here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          centerTitle: true,
          backgroundColor: Colors.greenAccent[400],
        ), //AppBar
        body: Center(
          child: Row(
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ), //Container
              /*Padding widget*/
              Padding(
                padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
                child: Container(
                  padding: const EdgeInsets.all(0.0),
                  color: Colors.green,
                  width: 80.0,
                  height: 80.0,
                ), //Container
              ), //Padding
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ) //Container
            ], //<Widget>[]
          ), //Row
        ), //Column
      ), //Scaffold
    ), //MaterialApp
  );
}

Output:

Explanation: The top-level parent widget in the app body here is Center which is holding Row as the child. In the Row widget, we have two red-colored containers the height and width for the first container is 200 each and for the second it is 100 pixels each. I between those two containers we have a Padding widget whose padding property is employing EdgeInsets.fromLTRB(20, 0, 20, 0) to give it a padding of 20 pixels from left and right sides. The child inside is a green-colored Container widget with dimensions 80X80, and there is no padding inside.

Example 2:

Dart

import 'package:flutter/material.dart';

//Importing material design library
void main() {
  runApp(
    //Widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          centerTitle: true,
          backgroundColor: Colors.greenAccent[400],
        ), //AppBar
        //Padding is the parent widget in the app body
        body: Padding(
          padding: EdgeInsets.all(120),
          child: Container(
            padding: const EdgeInsets.fromLTRB(50, 120, 10, 10),
            color: Colors.blue,
            width: 200.0,
            height: 200.0,
            child: Text(
              'GeeksforGeeks',
              style: TextStyle(color: Colors.white),
            ), //Text
          ), //Container
        ), //Padding
      ), //Scaffold
    ), //MaterialApp
  );
}

Output:

Explanation: Here in this app, all the app-body contains is a Padding widget. The Padding property inside is using EdgeInsets.all(120), which adds empty space of 120 pixels around in all directions. The child's property is holding a blue colored Container. The Container is having a height and width of 200 pixels each and its padding property is holding const EdgeInsets.fromLTRB(50, 120, 10, 10), which provides empty space is 50 px, 120 px, 10 px, and 10 px in the left, top, right and bottom directions respectively. This padding around holds the 'GeeksforGeeks' inside the container where it is.

Flutter - InkWell Widget

ankit_kumar_

Improve

Article Tags :

Flutter - Padding Widget

Constructor of Padding Class:

Properties of Padding Widget:

Similar Reads

Thank You!

What kind of Experience do you want to share?