The Padding widget in Flutter is used to add space or padding around its child widget. Here is a detailed explanation of the Padding widget along with its properties:
The Padding widget is used to insert space around a child widget. It takes a padding property, which is of type EdgeInsets. The EdgeInsets class allows you to specify padding for each side (top, right, bottom, left) individually.
Properties of the Padding widget:
1. padding (EdgeInsets):
The primary property of the Padding widget.
It defines the amount of space to be added around the child widget.
It takes an EdgeInsets object, which allows you to specify padding for each side individually.
Example:
Padding( padding: EdgeInsets.all(16.0), // Adds 16.0 pixels of padding on all sides child: YourChildWidget(), )
You can customize it further based on your requirements, such as EdgeInsets.only(top: 8.0, left: 16.0).
2. child (Widget):
The child widget that will have padding applied to it.
It can be any widget, such as Text, Image, Container, etc.
Example Usage:
Here's a more detailed example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Padding Widget Example'),
),
body: Padding(
padding: EdgeInsets.all(16.0), // Add 16.0 pixels of padding on all sides
child: Container(
color: Colors.blue,
child: Center(
child: Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24.0, color: Colors.white),
),
),
),
),
),
);
}
}
In this example, the Padding widget is used to add 16.0 pixels of padding around a Container widget containing a centered Text widget. The padding property is set using EdgeInsets.all(16.0). Adjust the values according to your layout needs. This results in a blue box with white text, centered and padded.