AppSizes class

Sistema de escalado base para toda la aplicación

AppSizes proporciona una escala de diseño unificada y consistente que sirve como base para todos los demás sistemas (spacing, radius, iconos, etc.). Usar estos valores garantiza coherencia visual en toda la aplicación.

📏 Escalas Disponibles

Escala Base (uso general):

  • none (0.0) → Sin tamaño
  • xxs (2.0) → Extra extra pequeño
  • 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
  • lgx (18.0) → Grande-extra
  • xl (20.0) → Extra grande
  • xxl (24.0) → Extra extra grande
  • xxxl (28.0) → Extra extra extra grande

Escala Extendida (elementos grandes):

  • huge (32.0) → Enorme
  • massive (40.0) → Masivo
  • giant (48.0) → Gigante
  • mega (56.0) → Mega
  • ultra (64.0) → Ultra
  • extreme (80.0) → Extremo
  • colossal (96.0) → Colosal

🎨 Uso Básico

// Tamaños base para dimensiones
Container(
  width: AppSizes.md,    // 12.0
  height: AppSizes.lg,   // 16.0
)

// Iconos con tamaños estandarizados
Icon(Icons.home, size: AppSizes.iconLg)  // 24.0

// Avatares con radio predefinido
CircleAvatar(radius: AppSizes.avatarMd)  // 40.0

// Elevaciones según Material Design
Card(elevation: AppSizes.elevationMd)  // 4.0

// Opacidades para estados
Opacity(
  opacity: AppSizes.opacityDisabled,  // 0.38
  child: Text('Deshabilitado'),
)

// Breakpoints responsivos
if (MediaQuery.of(context).size.width < AppSizes.maxMobileWidth) {
  // Layout móvil
}

📱 Tamaños de Iconos

Basados en Material Design:

  • iconXs (12.0) → Iconos muy pequeños (badges)
  • iconSm (16.0) → Iconos pequeños (inputs)
  • iconMd (20.0) → Iconos medianos (botones)
  • iconLg (24.0) → Estándar Material Design ⭐
  • iconXl (32.0) → Iconos grandes (headers)
  • iconXxl (40.0) → Iconos muy grandes (hero)
  • iconHuge (48.0) → Iconos enormes (splash)

👤 Tamaños de Avatares

Radio del CircleAvatar:

  • avatarXs (24.0) → Mini avatar (listas compactas)
  • avatarSm (32.0) → Avatar pequeño (chips)
  • avatarMd (40.0) → Avatar mediano (listas) ⭐
  • avatarLg (48.0) → Avatar grande (detalles)
  • avatarXl (64.0) → Avatar extra grande (perfiles)
  • avatarXxl (80.0) → Avatar muy grande
  • avatarHuge (96.0) → Avatar enorme
  • avatarMassive (128.0) → Avatar masivo (página perfil)

🎭 Elevaciones (Material Design)

Profundidad de sombras:

  • elevationNone (0.0) → Sin sombra
  • elevationXs (1.0) → Mínima (cards reposo)
  • elevationSm (2.0) → Baja (botones, chips)
  • elevationMd (4.0) → Estándar (cards, app bar) ⭐
  • elevationLg (6.0) → Media (FAB)
  • elevationXl (8.0) → Alta (drawer, bottom sheet)
  • elevationXxl (12.0) → Muy alta (dialogs)
  • elevationHuge (16.0) → Enorme (nav drawer)
  • elevationMassive (24.0) → Masiva (modal sheets)

🌫️ Opacidades (Material Design)

Niveles de transparencia:

  • opacityNone (0.0) → Transparente completo
  • opacityHover (0.12) → Hover/ripple effects
  • opacityDisabled (0.38) → Elementos deshabilitados
  • opacityMedium (0.54) → Texto secundario
  • opacityMediumHigh (0.70) → Elementos menos importantes
  • opacityHigh (0.87) → Texto principal
  • opacityFull (1.0) → Opaco completo

📐 Breakpoints Responsivos

Anchos máximos para diferentes dispositivos:

  • maxMobileWidth (600.0) → Teléfonos
  • maxTabletWidth (900.0) → Tablets
  • maxDesktopWidth (1200.0) → Escritorio
  • maxContentWidth (1536.0) → Contenido centrado máximo

📏 Aspect Ratios

Proporciones comunes:

  • aspectRatioSquare (1.0) → Cuadrado 1:1
  • aspectRatioStandard (1.33) → Estándar 4:3
  • aspectRatioPhoto (1.5) → Foto 3:2
  • aspectRatioWide (1.78) → Widescreen 16:9
  • aspectRatioCinematic (2.35) → Cinemático 21:9

💡 Recomendaciones

  1. Consistencia: Usa siempre estos valores en lugar de números arbitrarios
  2. Semántica: Elige el nombre que mejor describa el propósito
  3. Escalabilidad: Los tamaños siguen una progresión geométrica coherente
  4. Material Design: Los valores de elevación y opacidad siguen las guías oficiales
  5. Responsive: Usa los breakpoints para adaptar layouts

🔗 Ver también

  • AppSpacing para espaciado y padding basado en estas escalas
  • AppRadius para border radius consistente
  • AppUI para acceso rápido a constantes UI comunes

📚 Referencias

Properties

hashCode → int
The hash code for this object.
no setterinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

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

aspectRatioCinematic → const double
2.35 - Cinemático (21:9) - Películas y ultra-wide
aspectRatioPhoto → const double
1.5 - Formato foto (3:2) - Cámaras DSLR
aspectRatioSquare → const double
1.0 - Cuadrado perfecto (1:1)
aspectRatioStandard → const double
1.33 - Formato estándar (4:3) - Común en fotografía tradicional
aspectRatioWide → const double
1.78 - Widescreen (16:9) - Videos y pantallas modernas
avatarHuge → const double
96.0 - Avatar enorme
avatarLg → const double
48.0 - Avatar grande
avatarMassive → const double
128.0 - Avatar masivo (para perfiles)
avatarMd → const double
40.0 - Avatar mediano (uso común en listas)
avatarSm → const double
32.0 - Avatar pequeño
avatarXl → const double
64.0 - Avatar extra grande
avatarXs → const double
24.0 - Avatar extra pequeño
avatarXxl → const double
80.0 - Avatar muy grande
colossal → const double
96.0 - Colosal
elevationHuge → const double
16.0 - Elevación enorme (navigation drawer)
elevationLg → const double
6.0 - Elevación media (floating action button)
elevationMassive → const double
24.0 - Elevación masiva (modal bottom sheet)
elevationMd → const double
4.0 - Elevación estándar (cards elevadas, app bar)
elevationNone → const double
0.0 - Sin elevación
elevationSm → const double
2.0 - Elevación baja (botones, chips)
elevationXl → const double
8.0 - Elevación alta (drawer, bottom sheet)
elevationXs → const double
1.0 - Elevación mínima (cards en reposo)
elevationXxl → const double
12.0 - Elevación muy alta (dialogs)
extreme → const double
80.0 - Extremo
giant → const double
48.0 - Gigante
huge → const double
32.0 - Enorme
iconHuge → const double
48.0 - Ícono enorme
iconLg → const double
24.0 - Tamaño estándar de Material Design
iconMd → const double
20.0 - Ícono mediano
iconSm → const double
16.0 - Ícono pequeño
iconXl → const double
32.0 - Ícono extra grande
iconXs → const double
12.0 - Ícono extra pequeño
iconXxl → const double
40.0 - Ícono muy grande
lg → const double
16.0 - Largo
lgx → const double
18.0 - Largo a extra largo
massive → const double
40.0 - Masivo
maxContentWidth → const double
1536.0 - Ancho máximo para contenido centrado
maxDesktopWidth → const double
1200.0 - Ancho máximo para desktop
maxMobileWidth → const double
600.0 - Ancho máximo para dispositivos móviles
maxTabletWidth → const double
900.0 - Ancho máximo para tablets
md → const double
12.0 - Mediano
mdl → const double
14.0 - Mediano a largo
mds → const double
10.0 - Mediano pequeño
mega → const double
56.0 - Mega
none → const double
0.0 - Sin tamaño
opacityDisabled → const double
0.38 - Estado deshabilitado (texto e iconos)
opacityFull → const double
1.0 - Completamente opaco
opacityHigh → const double
0.87 - Texto activo y primario
opacityHover → const double
0.12 - Hover/Press sobre superficie (ripple effects)
opacityMedium → const double
0.54 - Texto secundario y ayuda
opacityMediumHigh → const double
0.70 - Nivel medio-alto (elementos menos importantes)
opacityNone → const double
0.0 - Completamente transparente
sm → const double
6.0 - Muy pequeño
smd → const double
8.0 - Pequeño a mediano
ultra → const double
64.0 - Ultra
xl → const double
20.0 - Extra largo
xs → const double
4.0 - Extra pequeño
xxl → const double
24.0 - Extra extra largo
xxs → const double
2.0 - Extra extra pequeño
xxxl → const double
28.0 - Extra extra extra largo