Flutter - Padding Widget - GeeksforGeeks

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.
const Padding(
{Key key,
@required EdgeInsetsGeometry padding,
Widget child}
)
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 libraryvoid 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 libraryvoid 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.
anikakapoor
sagar0719kumar
simranarora5sos
android
Flutter
Flutter-widgets
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Flexbox-Layout in Android
How to Post Data to API using Retrofit in Android?
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar