How to add padding in Flutter
It's essential to pay attention to the spacing between components and the layout designs of your app pages when you are designing applications in Flutter. There are a number of different ways to ensure a clean and organized user interface, and the padding widget is one of them.
In Flutter apps, padding refers to the space around a widget that is left for maintaining a specific visual layout. It acts as a convenient way to add empty spaces or create gaps between different elements.
Moreover, it can be used to provide space around a specific widget element to give it an enhancing appeal. That is why padding is typically applied to containers, columns, rows, or any other widget that needs some extra spacing.
Adding padding widget to your Flutter app
The most common way to add padding in Flutter is by using the padding widget. The padding class provides a list of attributes such as these:
child: specifies the widget around which you want padding.
padding: specifies the type of padding you want around your widget.
There are a couple of different ways through which you can specify the type of padding you want around your widget. However, we will discuss the two most common functions that are used for wrapping widgets with padding.
EdgeInsets.all function
The EdgeInsets.all function is specified in the padding attribute of the widget. It takes a single input parameter from the user and adds padding equal to the input parameter on all sides of the wrapped widget around which you want padding.
Here's what the code should look like:
Padding(padding: EdgeInsets.all(16.0),child: Container(color: Colors.blue,height: 100,width: 100,),)
In the example above, we create a Padding widget with EdgeInsets.all(16.0). This means we want to add 16 pixels of padding on all sides of the wrapped Container widget. You can adjust the padding values according to your requirements.
EdgeInsets.only function
On the other hand, if you want to add padding only on some specific sides of the wrapped widget, you can use EdgeInsets.only function.
The EdgeInsets.only takes four kinds of parameter values.
left
right
top
bottom
Each of these parameters can be specified with different double values according to your preference. The padding widget will wrap the child widget accordingly to make a visually appealing layout for the users.
Padding(padding: EdgeInsets.only(left: 16.0, top: 8.0),child: Container(color: Colors.blue,height: 100,width: 100,),)
In the example above, we apply 16 pixels of padding on the left side and 8 pixels on the top side of the same Container widget, as in the previous example. The other sides will have the default padding of 0.
Nested padding in Flutter
Similarly, the padding widget can also be used to provide nested padding around a widget. This can be done in the following way:
Padding(padding: EdgeInsets.all(8.0),child: Padding(padding: EdgeInsets.only(left: 16.0, top: 8.0),child: Text('Nested Padding'),),)
Using padding in your Flutter app
Now let's build a new app that incorporates padding in order to completely understand the concept and use it efficiently.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Educative',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Padding Demo'),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(16.0),
child:Container(
width:200,
height:150,
color:Colors.yellow,
child:Padding(
padding:EdgeInsets.only(top:50,left:50),
child: Text(
'Educative',
style: TextStyle(
color:Colors.blue,
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
),
);
}
}
In the example above, we have used nested padding to efficiently wrap our Container and Text widget with the needed padding.
The provided code creates a centered Container with a yellow background color. Inside the container, there is a Text widget displaying 'Educative' with a blue color, and the text is positioned with additional padding of 50 pixels on the top and left sides of the container.
Lines 20–22: We wrap the container widget with 16 pixels of padding on all four sides using
EdgeInsets.all(16.0)Lines 26–28: We use nested padding to wrap the
Textwidget again with padding on the top and left side to modify the spacing of ourTextwidget.
Free Resources