Padding Widget and Attributes

Padding Widget and Attributes

ยท

2 min read

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.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย