In this Flutter post, we will be implementing and customizing Flutter container padding with detailed step by step explanation. We will be using an easy Flutter example to practically customize and implement Flutter container padding.
So what are we waiting for? Let’s both jump right into it.
What is Flutter Container Padding?
Flutter container padding the the inside padding of the container. It can be used to make a distance between the Flutter container border and the content.
Don’t worry we will now explain everything with proper Flutter example for better understanding.
First we will see what the default Flutter container padding is then we will change it using multiple ways.
Default Flutter Container Padding
So to see what the default padding of Flutter container is, we have to define a simple Flutter container widget.
For dem0nstration, we won’t be giving any height or width to the container widget, but we will give it a background color and a child Flutter text widget. See the below code:
Container( color: Colors.blue, child: Text( 'Flutter Container Default Padding', style: TextStyle(color: Colors.white, fontSize: 17), ), )
Change Flutter Container Padding(3 Methods)
We will be using multiple ways to change the Flutter container padding. These methods are listed below:
- Edge In Sets All
- Edge In Sets Symmetric
- Edge In Sets Only
Edge In Sets All
It is used when you want to give padding to each and every side of same value. See the below code:
padding: EdgeInsets.all(20)
You can see in the above image that 0ur Flutter container now has padding with each side having same value. If you still want to give different value to one or two or even more side then use the copyWith. See below code:
padding: EdgeInsets.all(20).copyWith(top: 30)
You can see that the top has more padding then other sides as specified in the above code. The copyWith is used to easily give one or two sides a different value. It is used for easiness to write code.
If you want to give each and every side a different value then we will be using a different method for that. That method will be more convenient.
Edge In Sets Symmetric
It is used to give different value to the vertical(top and bottom) direction and different value to the horizontal(left and right) direction of the Flutter container. For demonstration, we will use different values for the horizontal and vertical direction. See the below code:
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 60)
Edge In Sets Only
It is used when you want to give each and every side a different value, you can give same values as well, its completely your choice. For demonstration, we’ll given different value to each side. See below code:
padding: EdgeInsets.only(top: 100, right: 20, bottom: 0, left: 80)
Flutter Container Padding Customization 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 StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Container(
padding: EdgeInsets.all(40),
color: Colors.blue,
child: Text(
'Flutter Container Padding Implemented',
style: TextStyle(color: Colors.white, fontSize: 17),
),
)),
));
}
}Conclusion
To conclude, I have tried to explain how to implement and customize Flutter container padding. Hope after reading this post, you will easily customize Flutter container padding in your own Flutter apps. I would be looking forward to get your valuable feedback. Thank you for reading this Flutter post.
