Related Articles

Related Articles

Flutter – Padding Widget
  • Difficulty Level : Hard
  • Last Updated : 03 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
//Imported matrial design libery
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
      ), //Scaffols
    ), //MaterialApp
  );
}

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
//Importing material design liberary
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
  );
}

chevron_right


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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :