Flutter – Widget de relleno

El widget de relleno en flutter hace exactamente lo que dice su nombre, agrega relleno o espacio vacío alrededor de un widget o un montón de widgets. Podemos aplicar relleno alrededor de cualquier widget colocándolo como elemento secundario del widget Padding . El tamaño del widget secundario dentro del relleno está limitado por la cantidad de espacio que queda después de agregar espacio vacío alrededor. El widget Padding agrega un espacio vacío alrededor de cualquier widget mediante la clase abstracta EdgeInsetsGeometry .

Constructor de clase de relleno:

const Padding(
{Key key,
@required EdgeInsetsGeometry padding,
Widget child}
)

Propiedades del widget de relleno:

• child: Esta propiedad simplemente toma un widget ya que el objeto a mostrar está dentro del widget Padding en la pantalla.
• padding: esta propiedad contiene la clase EdgeInsetsGeometry como el objeto para agregar un espacio vacío alrededor del widget.

Ejemplo 1: 

import 'package:flutter/material.dart';
 
//Imported material design library
void main() {
  runApp(
    //App widget tree starts from here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          centerTitle: true,
          backgroundColor: Colors.greenAccent[400],
        ), //AppBar
        body: Center(
          child: Row(
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ), //Container
              /*Padding widget*/
              Padding(
                padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
                child: Container(
                  padding: const EdgeInsets.all(0.0),
                  color: Colors.green,
                  width: 80.0,
                  height: 80.0,
                ), //Container
              ), //Padding
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ) //Container
            ], //<Widget>[]
          ), //Row
        ), //Column
      ), //Scaffold
    ), //MaterialApp
  );
}

Producción:

Explicación: el widget principal de nivel superior en el cuerpo de la aplicación aquí es el Centro, que contiene Fila como elemento secundario. En el widget Fila , tenemos dos contenedores de color rojo, la altura y el ancho del primer contenedor son 200 cada uno y el segundo tiene 100 píxeles cada uno. Entre esos dos contenedores tenemos un widget de relleno cuya propiedad de relleno emplea EdgeInsets.fromLTRB(20, 0, 20, 0) para darle un relleno de 20 píxeles desde los lados izquierdo y derecho. El elemento secundario del interior es un widget de contenedor de color verde con dimensiones de 80X80 y no hay relleno en el interior.

Ejemplo 2:

import 'package:flutter/material.dart';
 
//Importing material design library
void main() {
  runApp(
    //Widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          centerTitle: true,
          backgroundColor: Colors.greenAccent[400],
        ), //AppBar
        //Padding is the parent widget in the app body
        body: Padding(
          padding: EdgeInsets.all(120),
          child: Container(
            padding: const EdgeInsets.fromLTRB(50, 120, 10, 10),
            color: Colors.blue,
            width: 200.0,
            height: 200.0,
            child: Text(
              'GeeksforGeeks',
              style: TextStyle(color: Colors.white),
            ), //Text
          ), //Container
        ), //Padding
      ), //Scaffold
    ), //MaterialApp
  );
}

Producción:

Explicación: aquí, en esta aplicación, todo lo que contiene el cuerpo de la aplicación es un widget de relleno . La propiedad Padding del interior usa EdgeInsets.all(120) , que agrega un espacio vacío de 120 píxeles alrededor en todas las direcciones. La propiedad del niño contiene un Contenedor de color azul . El Contenedor tiene una altura y un ancho de 200 píxeles cada uno y su propiedad de relleno contiene const EdgeInsets.fromLTRB(50, 120, 10, 10) , que proporciona un espacio vacío de 50 px, 120 px, 10 px y 10 px en las direcciones izquierda, superior, derecha e inferior respectivamente. Este relleno mantiene el ‘GeeksforGeeks’ dentro del contenedor donde está.