How to Add Padding in Flutter

Proper padding is an important factor while designing a mobile user interface. Giving proper padding to each component make the layout neat and more beautiful. In this blog post, let’s see how to add padding in Flutter.

Padding can be applied using two classes – Padding and EdgeInsets. Padding widget insets the child by the given amount of padding whereas EdgeInsets is used to represent offset for each of the four sides.

You can nest your widget inside Padding widget as given below to apply some padding.

Padding(
        padding: EdgeInsets.only(left:20.0, top:10.0,right:20.0,bottom:10.0),
        child: Text("Hello World!"),
      )

If you want to have the same padding for all edges then you can add padding as given below:

Padding(
        padding: EdgeInsets.all(10.0),
        child: Text("Hello World!"),
      )

Following is a complete Flutter example on padding.

import 'package:flutter/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Body()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Padding Example'),
      ),
      body: Padding(
        padding: EdgeInsets.only(left:20.0, top:10.0,right:20.0,bottom:10.0),
        child: Text("Check out my padding!"),
      ),
    );
  }
}

Following is the output of Flutter example:

flutter padding

1 thought on “How to Add Padding in Flutter”

  1. Pingback: How to Add Margins to a Widget in Flutter – Flutter For You

Leave a Comment

Your email address will not be published. Required fields are marked *