Ultimate Guide : Flutter Padding Widget Example With Tutorial

In this post, you will learn about the Flutter padding widget.

If you’re coming from a web development background or Android Development, You might familiar with the term ‘padding’ and know it’s just an attribute.

That’s all…

But in Flutter, it has more importance. That’s why they made it as a Widget.

Okay… Let’s learn more about Padding Widget.

How Flutter Padding Widget Works?

The padding widget gives empty space around the child widget. So if your widgets are colliding with each other and you think it is nice to add space around your widget, give it a go with Padding. Simply make your widget as a child of the Padding and give value.

That’s all.

Simple… isn’t it?

Flutter Padding Example

Let’s create a simple Flutter project with a Text Widget, the output should look like below.

• Create Project Using Flutter commands

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Padding Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Padding Demo'),
        ),
        body: Text('Text Widget'),
      ),
    );
  }
}

Let’s add some padding or empty space around the Text widget. Just like below.

Padding(
          padding: const EdgeInsets.all(50.0),
          child: Text('Text Widget'),
        ),

• Here padding property takes 50.0 value through EdgeInsets.all() named constructor and it gives 50.0 padding to all sides.
• Left=Right=Top=Bottom=50.0

Sometimes, adding a Padding widget around your child by typing might be difficult. How to simplify this problem?

Using Keyboard shortcuts.

Android Studio – Shortcut for Padding

• Click on the widget (here Text) and ALT + ENTER or you can click on the light yellow bulb on the left side.
• Select wrap with Padding.

Visual Studio – Shortcut for Padding

• Click on the widget (here Text) and CTRL + . (dot key), or Click on the light yellow bulb.
• Click on Wrap with Padding

How Padding Laid Out – Using Flutter Inspector

Open Flutter Inspector, and look at how the padding widget laid around the Text Widget.

• Android studio users, click on Flutter Inspector and click on show debug paint.

• This is how Padding provides empty space around the Text widget.

What if you need to provide padding to only one side or two or more than two?

You can use below named Constructors of EdgeInsets with Padding.

1. EdgeInsets.all() – Provides padding to all sides around the child widget.
2. EdgeInsets.only() – Supplies empty space only to the specified portions.
3. EdgeInsets.symmetric() – It gives padding based on horizontal and vertical values.
4. EdgeInsets.fromLTRB() – You can give padding to Left, Top, Right and Bottom Respectively.

How to provide padding to only specific sides – Using EdgeInsets.only

• When you need to add padding to only a specific side of the widget, use this named constructor with top, bottom, left and right parameters.
• In this example, I have used left, top and bottom.

 Padding(
          padding: EdgeInsets.only(left:50.0, top: 30.0, bottom: 40.0),
          child: Text('Text Widget'),
        ),

EdgeInsets.symmetric()

• EdgeInsets.symmetric has two parameters: horizontal – which applies padding for left and right sides.
• vertical – which applies padding for top and bottom.

Padding(
          padding: EdgeInsets.symmetric(horizontal: 50.0, vertical: 80.0),
          child: Text('Text Widget'),
        ),

EdgeInsets.fromLTRB()

• Using EdgeInsets.fromLTRB, you can easily specify Left, Top, Right and Bottom Respectively.

Padding(
          padding: EdgeInsets.fromLTRB(30.0,40.0,50.0,60.0),
          child: Text('Text Widget'),
        ),

Just like EdgeInsets, you can also use EdgeInsetsDirectional constructors. Look below.

EdgeInsetsDirectional.only()

• EdgeInsetsDirectional.only() works same as EdgeInsets.only() – It uses start and end for left and right. That’s all.

Padding(
          padding: EdgeInsetsDirectional.only(start: 60.0, end: 80.0, top: 20.0),
          child: Text('Text Widget'),
        ),

EdgeInsetsDirectional.fromSTEB()

• STEB stands for Start, Top, End, and Bottom.

Padding(
          padding: EdgeInsetsDirectional.fromSTEB(60.0,30.0,80.0,90.0),
          child: Text('Text Widget'),
        ),

I hope you liked this article, So please share it with your friends and family.

Flutter Padding docs