Padding en Flutter

Controla los espacios internos de tus widgets de forma precisa

Descargar Ejemplos Completos

¿Qué es Padding?

El Padding es un widget fundamental en Flutter que añade espacio alrededor de su widget hijo. A diferencia de SizedBox que controla tamaño, Padding se enfoca en márgenes internos.

Sin Padding
Con Padding

Sintaxis Básica

Constructor Básico de Padding

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Mi Widget con espacio'),
)

Características Principales:

  • Widget de espaciado interno: Añade márgenes alrededor del hijo
  • Múltiples constructores: all, symmetric, only, fromLTRB
  • Esencial para diseño: Mejora legibilidad y estética
  • Responsive: Se adapta a diferentes tamaños de pantalla

Constructores de EdgeInsets

EdgeInsets.all()

Mismo padding en todos los lados

Contenido
EdgeInsets.all(20)

EdgeInsets.symmetric()

Padding vertical y horizontal

Contenido
EdgeInsets.symmetric(
vertical: 10,
horizontal: 20
)

EdgeInsets.only()

Padding en lados específicos

Contenido
EdgeInsets.only(
left: 15,
top: 10
)

EdgeInsets.fromLTRB()

Padding específico para cada lado

Contenido
EdgeInsets.fromLTRB(
10, 20, 30, 40
)

¿Cuándo usar Padding?

Texto Legible

Mejorar legibilidad añadiendo espacio alrededor del texto

Padding( padding: EdgeInsets.all(16), child: Text('Texto importante'), )

Botones Táctiles

Aumentar área táctil de botones para mejor UX

Padding( padding: EdgeInsets.all(12), child: ElevatedButton(...), )

Separación de Elementos

Crear espacio entre widgets en contenedores

Container( child: Padding( padding: EdgeInsets.all(8), child: Row(...), ), )

Ejemplos Visuales

1. Padding Básico en Container

Container con Padding
Container(
  color: Colors.blue,
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Text('Container con Padding'),
  ),
)

2. Padding en Botón

Padding(
  padding: EdgeInsets.symmetric(
    horizontal: 32,
    vertical: 16,
  ),
  child: ElevatedButton(...),
)

3. Padding Asimétrico

Más espacio arriba
Padding(
  padding: EdgeInsets.only(
    top: 40,
    left: 20,
    right: 20,
    bottom: 10,
  ),
  child: Text('Texto'),
)

Propiedades del Padding

Propiedad Tipo Descripción
padding EdgeInsets Define el espacio alrededor del widget hijo
child Widget Widget hijo al que se aplica el padding

Constructores de EdgeInsets:

  • EdgeInsets.all(double): Mismo valor en todos los lados
  • EdgeInsets.symmetric(): Valores verticales y horizontales
  • EdgeInsets.only(): Valores específicos por lado
  • EdgeInsets.fromLTRB(): Left, Top, Right, Bottom

Probador de Padding Interactivo

20 px
Widget con Padding
Padding( padding: EdgeInsets.all(20), child: Container(...), )

Padding vs Margin

Contenido
Margin (espacio externo)
Padding (espacio interno)
Content (contenido)

Padding

  • Espacio interno del widget
  • Afecta el tamaño total del widget
  • Se usa con widget Padding
  • Ejemplo: espacio dentro de un botón

Margin

  • Espacio externo del widget
  • No afecta el tamaño del widget
  • Se usa en Container (margin property)
  • Ejemplo: espacio entre botones

Ejercicios Prácticos

Ejercicio 1: Card con Padding

Crea una Card con 16px de padding en todos los lados.

Solución:
Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Contenido de la card'),
  ),
)

Ejercicio 2: Botón con Padding Simétrico

Crea un botón con 12px vertical y 24px horizontal de padding.

Solución:
Padding(
  padding: EdgeInsets.symmetric(
    vertical: 12,
    horizontal: 24,
  ),
  child: ElevatedButton(...),
)

Ejercicio 3: Texto con Padding Asimétrico

Añade padding solo a la izquierda y arriba de un texto.

Solución:
Padding(
  padding: EdgeInsets.only(
    left: 20,
    top: 10,
  ),
  child: Text('Texto indentado'),
)

Consejos y Mejores Prácticas

✅ Lo que SÍ debes hacer

  • Usa padding para mejorar legibilidad de texto
  • Aplica padding a botones para mejor UX táctil
  • Usa valores consistentes en toda la app
  • Considera usar Theme para padding consistentes

❌ Lo que NO debes hacer

  • No uses padding excesivo que rompa el diseño
  • No confundas padding con margin
  • Evita valores de padding muy pequeños en botones
  • No olvides el padding en dispositivos móviles

Tip Profesional

Usa EdgeInsets.symmetric() cuando necesites el mismo padding en lados opuestos. Es más legible que usar EdgeInsets.only() con los mismos valores para left/right o top/bottom.