AppSpacing class

Sistema de espaciado para mantener consistencia visual en padding, margin y gaps

AppSpacing proporciona una escala unificada de espaciado basada en AppSizes, con helpers convenientes para EdgeInsets y SizedBox. Esto garantiza coherencia y facilita el diseño responsive.

📦 Componentes Disponibles

1. Valores base (double) - Para espaciado personalizado
2. EdgeInsets.all() - Padding uniforme en todos los lados
3. EdgeInsets.symmetric(horizontal) - Padding horizontal
4. EdgeInsets.symmetric(vertical) - Padding vertical
5. SizedBox(height) - Gaps verticales entre widgets
6. SizedBox(width) - Gaps horizontales entre widgets

📏 Escala de Espaciado

La escala completa (basada en AppSizes):

• none (0.0) → Sin espacio
• xxs (2.0) → Mínimo
• xs (4.0) → Extra pequeño
• sm (6.0) → Pequeño
• smd (8.0) → Pequeño-mediano
• mds (10.0) → Mediano-pequeño
• md (12.0) → Mediano ⭐ (más común)
• mdl (14.0) → Mediano-grande
• lg (16.0) → Grande (muy usado en screens)
• lgx (18.0) → Grande-extra
• xl (20.0) → Extra grande
• xxl (24.0) → Extra extra grande
• xxxl (28.0) → Triple extra grande
• huge (32.0) → Enorme
• massive (40.0) → Masivo
• giant (48.0) → Gigante
• mega (56.0) → Mega
• ultra (64.0) → Ultra

🎨 Uso Básico

// ✅ Valores base (double) - Para espaciado personalizado
SizedBox(height: AppSpacing.md)  // 12.0
Container(margin: EdgeInsets.all(AppSpacing.lg))  // 16.0

// ✅ Padding uniforme (EdgeInsets.all)
Padding(
  padding: AppSpacing.paddingMd,  // EdgeInsets.all(12.0)
  child: Text('Contenido con padding uniforme'),
)

// ✅ Padding horizontal (EdgeInsets.symmetric)
Container(
  padding: AppSpacing.horizontalLg,  // horizontal: 16.0
  child: Row(
    children: [
      Text('Contenido con margen lateral'),
    ],
  ),
)

// ✅ Padding vertical (EdgeInsets.symmetric)
Container(
  padding: AppSpacing.verticalMd,  // vertical: 12.0
  child: Column(
    children: [
      Text('Espaciado arriba y abajo'),
    ],
  ),
)

// ✅ Gaps verticales en Column
Column(
  children: [
    Text('Elemento 1'),
    AppSpacing.gapMd,      // SizedBox(height: 12.0)
    Text('Elemento 2'),
    AppSpacing.gapLg,      // SizedBox(height: 16.0)
    Text('Elemento 3'),
  ],
)

// ✅ Gaps horizontales en Row
Row(
  children: [
    Icon(Icons.star),
    AppSpacing.gapHorizontalSm,  // SizedBox(width: 6.0)
    Text('5.0'),
  ],
)

📱 Patrones Comunes por Dispositivo

Mobile:

// Padding de screen
Padding(padding: AppSpacing.paddingLg)  // 16.0

// Separación entre secciones
AppSpacing.gapXl  // 20.0

// Separación entre elementos
AppSpacing.gapMd  // 12.0

Tablet:

// Padding de screen
Padding(padding: AppSpacing.paddingXl)  // 20.0

// Separación entre secciones
AppSpacing.gapXxl  // 24.0

// Separación entre elementos
AppSpacing.gapLg  // 16.0

Desktop:

// Padding de screen
Padding(padding: AppSpacing.paddingXxl)  // 24.0

// Separación entre secciones
AppSpacing.gapHuge  // 32.0

// Separación entre elementos
AppSpacing.gapXl  // 20.0

🎯 Guía de Uso por Contexto

Cards y Containers:

Card(
  child: Padding(
    padding: AppSpacing.paddingMd,  // Padding interno estándar
    child: Column(
      children: [
        Text('Título'),
        AppSpacing.gapSm,  // Separación pequeña
        Text('Descripción'),
      ],
    ),
  ),
)

List Items:

ListTile(
  contentPadding: AppSpacing.horizontalLg,  // Padding lateral
  title: Text('Item'),
)

Forms:

Column(
  children: [
    TextField(),
    AppSpacing.gapMd,  // Separación entre campos
    TextField(),
    AppSpacing.gapXl,  // Separación antes del botón
    ElevatedButton(child: Text('Enviar')),
  ],
)

Sections:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Sección 1', style: headlineStyle),
    AppSpacing.gapMd,  // Separación título-contenido
    Text('Contenido...'),
    AppSpacing.gapXxl,  // Separación entre secciones
    Text('Sección 2', style: headlineStyle),
  ],
)

💡 Recomendaciones

1. Consistencia: Usa siempre la escala de AppSpacing, no valores arbitrarios
2. Jerarquía: Más espacio = más separación conceptual
3. Responsive: Ajusta el espaciado según el dispositivo
4. Gaps vs Padding:
   • Usa gap* para separar widgets en Column/Row
   • Usa padding* para espacio interno de containers
5. Valores comunes:
   • md (12.0) → Padding interno general
   • lg (16.0) → Padding de screens mobile
   • xl (20.0) → Separación entre secciones

❌ Evitar

// ❌ NO uses valores arbitrarios
Padding(padding: EdgeInsets.all(13.5))
SizedBox(height: 17.3)

// ✅ USA la escala predefinida
Padding(padding: AppSpacing.paddingMd)  // 12.0
AppSpacing.gapLg  // 16.0

🔗 Ver también

• AppSizes para la escala base de tamaños
• AppRadius para border radius consistente
• AppFontSizes para tipografía jerárquica

📚 Referencias

• Material Design - Spacing
• Material Design - Layout

Properties

hashCode → int

The hash code for this object.

no setter, inherited

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

Methods

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toString() → String

A string representation of this object.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited

Constants

gapGiant → const SizedBox

48.0 - Gap vertical gigante

gapHorizontalGiant → const SizedBox

48.0 - Gap horizontal gigante

gapHorizontalHuge → const SizedBox

32.0 - Gap horizontal enorme

gapHorizontalLg → const SizedBox

16.0 - Gap horizontal grande (común en Row)

gapHorizontalLgx → const SizedBox

18.0 - Gap horizontal grande-extra

gapHorizontalMassive → const SizedBox

40.0 - Gap horizontal masivo

gapHorizontalMd → const SizedBox

12.0 - Gap horizontal mediano

gapHorizontalMdl → const SizedBox

14.0 - Gap horizontal mediano-grande

gapHorizontalMds → const SizedBox

10.0 - Gap horizontal mediano-pequeño

gapHorizontalMega → const SizedBox

56.0 - Gap horizontal mega

gapHorizontalNone → const SizedBox

0.0 - Sin espacio horizontal

gapHorizontalSm → const SizedBox

6.0 - Gap horizontal pequeño

gapHorizontalSmd → const SizedBox

8.0 - Gap horizontal pequeño-mediano

gapHorizontalUltra → const SizedBox

64.0 - Gap horizontal ultra

gapHorizontalXl → const SizedBox

20.0 - Gap horizontal extra grande

gapHorizontalXs → const SizedBox

4.0 - Gap horizontal extra pequeño

gapHorizontalXxl → const SizedBox

24.0 - Gap horizontal extra extra grande

gapHorizontalXxs → const SizedBox

2.0 - Gap horizontal extra extra pequeño

gapHorizontalXxxl → const SizedBox

28.0 - Gap horizontal extra extra extra grande

gapHuge → const SizedBox

32.0 - Gap vertical enorme

gapLg → const SizedBox

16.0 - Gap vertical grande (común en Column)

gapLgx → const SizedBox

18.0 - Gap vertical grande-extra

gapMassive → const SizedBox

40.0 - Gap vertical masivo

gapMd → const SizedBox

12.0 - Gap vertical mediano

gapMdl → const SizedBox

14.0 - Gap vertical mediano-grande

gapMds → const SizedBox

10.0 - Gap vertical mediano-pequeño

gapMega → const SizedBox

56.0 - Gap vertical mega

gapNone → const SizedBox

0.0 - Sin espacio vertical

gapSm → const SizedBox

6.0 - Gap vertical pequeño

gapSmd → const SizedBox

8.0 - Gap vertical pequeño-mediano

gapUltra → const SizedBox

64.0 - Gap vertical ultra

gapXl → const SizedBox

20.0 - Gap vertical extra grande

gapXs → const SizedBox

4.0 - Gap vertical extra pequeño

gapXxl → const SizedBox

24.0 - Gap vertical extra extra grande

gapXxs → const SizedBox

2.0 - Gap vertical extra extra pequeño

gapXxxl → const SizedBox

28.0 - Gap vertical extra extra extra grande

giant → const double

48.0 - Gigante

horizontalGiant → const EdgeInsets

48.0 - Padding horizontal gigante

horizontalHuge → const EdgeInsets

32.0 - Padding horizontal enorme

horizontalLg → const EdgeInsets

16.0 - Padding horizontal grande (muy usado en screens)

horizontalLgx → const EdgeInsets

18.0 - Padding horizontal grande-extra

horizontalMassive → const EdgeInsets

40.0 - Padding horizontal masivo

horizontalMd → const EdgeInsets

12.0 - Padding horizontal mediano

horizontalMdl → const EdgeInsets

14.0 - Padding horizontal mediano-grande

horizontalMds → const EdgeInsets

10.0 - Padding horizontal mediano-pequeño

horizontalMega → const EdgeInsets

56.0 - Padding horizontal mega

horizontalNone → const EdgeInsets

0.0 - Sin padding horizontal

horizontalSm → const EdgeInsets

6.0 - Padding horizontal pequeño

horizontalSmd → const EdgeInsets

8.0 - Padding horizontal pequeño-mediano

horizontalUltra → const EdgeInsets

64.0 - Padding horizontal ultra

horizontalXl → const EdgeInsets

20.0 - Padding horizontal extra grande

horizontalXs → const EdgeInsets

4.0 - Padding horizontal extra pequeño

horizontalXxl → const EdgeInsets

24.0 - Padding horizontal extra extra grande

horizontalXxs → const EdgeInsets

2.0 - Padding horizontal extra extra pequeño

horizontalXxxl → const EdgeInsets

28.0 - Padding horizontal extra extra extra grande

huge → const double

32.0 - Enorme

lg → const double

16.0 - Grande (muy usado en layouts)

lgx → const double

18.0 - Grande-extra

massive → const double

40.0 - Masivo

md → const double

12.0 - Mediano (uso común)

mdl → const double

14.0 - Mediano-grande

mds → const double

10.0 - Mediano-pequeño

mega → const double

56.0 - Mega

none → const double

0.0 - Sin espaciado

paddingGiant → const EdgeInsets

48.0 - Padding gigante

paddingHuge → const EdgeInsets

32.0 - Padding enorme

paddingLg → const EdgeInsets

16.0 - Padding grande (muy usado)

paddingLgx → const EdgeInsets

18.0 - Padding grande-extra

paddingMassive → const EdgeInsets

40.0 - Padding masivo

paddingMd → const EdgeInsets

12.0 - Padding mediano (uso común)

paddingMdl → const EdgeInsets

14.0 - Padding mediano-grande

paddingMds → const EdgeInsets

10.0 - Padding mediano-pequeño

paddingMega → const EdgeInsets

56.0 - Padding mega

paddingNone → const EdgeInsets

0.0 - Sin padding

paddingSm → const EdgeInsets

6.0 - Padding pequeño

paddingSmd → const EdgeInsets

8.0 - Padding pequeño-mediano

paddingUltra → const EdgeInsets

64.0 - Padding ultra

paddingXl → const EdgeInsets

20.0 - Padding extra grande

paddingXs → const EdgeInsets

4.0 - Padding extra pequeño

paddingXxl → const EdgeInsets

24.0 - Padding extra extra grande

paddingXxs → const EdgeInsets

2.0 - Padding extra extra pequeño

paddingXxxl → const EdgeInsets

28.0 - Padding extra extra extra grande

sm → const double

6.0 - Pequeño

smd → const double

8.0 - Pequeño-mediano

ultra → const double

64.0 - Ultra

verticalGiant → const EdgeInsets

48.0 - Padding vertical gigante

verticalHuge → const EdgeInsets

32.0 - Padding vertical enorme

verticalLg → const EdgeInsets

16.0 - Padding vertical grande

verticalLgx → const EdgeInsets

18.0 - Padding vertical grande-extra

verticalMassive → const EdgeInsets

40.0 - Padding vertical masivo

verticalMd → const EdgeInsets

12.0 - Padding vertical mediano

verticalMdl → const EdgeInsets

14.0 - Padding vertical mediano-grande

verticalMds → const EdgeInsets

10.0 - Padding vertical mediano-pequeño

verticalMega → const EdgeInsets

56.0 - Padding vertical mega

verticalNone → const EdgeInsets

0.0 - Sin padding vertical

verticalSm → const EdgeInsets

6.0 - Padding vertical pequeño

verticalSmd → const EdgeInsets

8.0 - Padding vertical pequeño-mediano

verticalUltra → const EdgeInsets

64.0 - Padding vertical ultra

verticalXl → const EdgeInsets

20.0 - Padding vertical extra grande

verticalXs → const EdgeInsets

4.0 - Padding vertical extra pequeño

verticalXxl → const EdgeInsets

24.0 - Padding vertical extra extra grande

verticalXxs → const EdgeInsets

2.0 - Padding vertical extra extra pequeño

verticalXxxl → const EdgeInsets

28.0 - Padding vertical extra extra extra grande

xl → const double

20.0 - Extra grande

xs → const double

4.0 - Extra pequeño

xxl → const double

24.0 - Extra extra grande

xxs → const double

2.0 - Extra extra pequeño

xxxl → const double

28.0 - Extra extra extra grande