How To Use Flutter Padding – Easy Flutter Guide

In this Flutter post, we will be understanding practically how to properly use Flutter padding with the help of an easy flutter example. We will be discussing everything about Flutter padding in detail so you can have a better idea of how to customize it in your own apps with ease.

After reading this post, I am sure you will be able to easily implement and customize Flutter padding. So let us not waste any more time and just get right into it.

What is Flutter Padding?

Flutter padding is used to create a space between its child and other widgets or screen border. Don’t worry we will understand everything practically about the customization of Flutter padding. Let’s start implementing Flutter padding practically.

Implementing Flutter Padding (Multiple Examples)

To understand how Flutter padding works, we first have to implement a Flutter widget so we can wrap that widget inside Flutter padding.

We will be using a Flutter container widget for demonstration. We will give our container a height, width and a background color so it can be seen clearly on the screen. See below code:

Container(
      height: double.infinity,
      width: double.infinity,

    )

You can see in the above image that the container is covering the whole screen. This will be perfect for us to understand how Flutter padding actually works.

Let’s now wrap that container widget with Flutter padding. We can give padding using three ways:

• Edge In Sets All
• Edge In Sets Symmetric
• Edge In Sets Only

Edge In Sets All

Padding(
      padding: EdgeInsets.all(80),
      child: Container(
        height: double.infinity,
        width: double.infinity,
        color: Colors.purple,
      )
    )

We have used the padding constructor of Flutter padding class and have passed in edge in sets all, which means that give same padding from every side as seen in the above image.

If you still want one or more sides to have a different padding the use copy with. See below code:

  padding: EdgeInsets.all(80).copyWith(top: 0)

You can see that now the top don’t have any padding as specified in the above code line.

Edge In Sets Symmetric

padding: EdgeInsets.symmetric(horizontal: 30, vertical: 100)

Symmetric is used to give same padding to horizontal(right and left) or vertical(top and bottom) as seen in the above image. We can use copy with here as well, if we want.

Edge In Sets Only

padding: EdgeInsets.only(top: 50, bottom: 200, left: 10, right: 30)

Edge in sets only can be used to specify each side with a different value, you can pass same value as well. Copy with can also be used here but using it here won’t make any sense.

So this is how you can easily implement and customize padding in Flutter. You can use Flutter padding with other Flutter widgets as well like icons, text widgets, images etc. Hope you like it. If you still have any questions related to the implementation of Flutter padding then let me know in the comment section. I would be happy to answer all.

Below is the complete source code of the customized Flutter padding.

Flutter Padding Implementation Source code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Padding(
      padding: EdgeInsets.only(top: 50, bottom: 200, left: 10, right: 30),
      child: Container(
        height: double.infinity,
        width: double.infinity,
        color: Colors.purple,
      ),
    )));
  }
}

Conclusion

To conclude, we have discussed practically in depth of how to use and customize Flutter padding. Hope you now will be able to easily implement and customize Flutter padding. I would love to read your valuable comments on this post. Thank you for reading.