AppUI class

Acceso rápido y conveniente a constantes UI comúnmente usadas

AppUI es una clase de conveniencia que proporciona acceso directo a valores frecuentemente utilizados de AppSizes, sin necesidad de recordar qué archivo importar. Todos los valores están delegados a AppSizes para mantener una única fuente de verdad en el sistema de diseño.

🎯 ¿Cuándo usar AppUI vs AppSizes?

Usa AppUI cuando:

Trabajas con elevaciones, opacidades, iconos o avatares
Necesitas breakpoints responsivos
Quieres acceso rápido sin pensar en imports
Estás escribiendo código de UI común

Usa AppSizes cuando:

Necesitas valores de la escala base (md, lg, xl, etc.)
Trabajas con dimensiones personalizadas
Necesitas acceso a aspect ratios

📦 Categorías Disponibles

Elevaciones - Profundidad de sombras (Material Design)
Opacidades - Niveles de transparencia (Material Design)
Tamaños de Iconos - Dimensiones estandarizadas
Tamaños de Avatares - Radios predefinidos
Breakpoints - Anchos máximos responsivos
Aspect Ratios - Proporciones comunes

🎨 Uso Básico

// ✅ Elevaciones - Profundidad de sombras
Card(
  elevation: AppUI.elevationMd,  // 4.0 - Estándar
  child: Content(),
)

// ✅ Opacidades - Estados y jerarquía
Opacity(
  opacity: AppUI.opacityDisabled,  // 0.38 - Deshabilitado
  child: Text('No disponible'),
)

// ✅ Iconos - Tamaños consistentes
Icon(
  Icons.home,
  size: AppUI.iconLg,  // 24.0 - Estándar Material
)

// ✅ Avatares - Radios predefinidos
CircleAvatar(
  radius: AppUI.avatarMd,  // 40.0 - Lista estándar
  child: Text('JD'),
)

// ✅ Breakpoints - Diseño responsive
final width = MediaQuery.of(context).size.width;
if (width < AppUI.maxMobileWidth) {
  return MobileLayout();
} else if (width < AppUI.maxTabletWidth) {
  return TabletLayout();
} else {
  return DesktopLayout();
}

// ✅ Aspect Ratios - Proporciones
AspectRatio(
  aspectRatio: AppUI.aspectRatioWide,  // 16:9
  child: Image.network('url'),
)

🎭 Elevaciones (Material Design)

Profundidad de sombras según contexto:

// Cards en reposo
Card(elevation: AppUI.elevationXs)  // 1.0

// Botones, chips
ElevatedButton(elevation: AppUI.elevationSm)  // 2.0

// Cards elevadas, app bar ⭐
Card(elevation: AppUI.elevationMd)  // 4.0

// Floating Action Button
FloatingActionButton(elevation: AppUI.elevationLg)  // 6.0

// Drawer, bottom sheet
Drawer(elevation: AppUI.elevationXl)  // 8.0

// Dialogs
Dialog(elevation: AppUI.elevationXxl)  // 12.0

// Navigation drawer
NavigationDrawer(elevation: AppUI.elevationHuge)  // 16.0

// Modal bottom sheet
showModalBottomSheet(elevation: AppUI.elevationMassive)  // 24.0

🌫️ Opacidades (Material Design)

Niveles de transparencia para estados y jerarquía:

// Hover/press effects
Color.withOpacity(AppUI.opacityHover)  // 0.12

// Elementos deshabilitados
Opacity(
  opacity: AppUI.opacityDisabled,  // 0.38
  child: DisabledButton(),
)

// Texto secundario, ayuda
Text(
  'Texto secundario',
  style: TextStyle(
    color: Colors.black.withOpacity(AppUI.opacityMedium),  // 0.54
  ),
)

// Elementos menos importantes
Icon(
  Icons.info,
  color: Colors.black.withOpacity(AppUI.opacityMediumHigh),  // 0.70
)

// Texto principal ⭐
Text(
  'Texto principal',
  style: TextStyle(
    color: Colors.black.withOpacity(AppUI.opacityHigh),  // 0.87
  ),
)

// Completamente opaco
Container(
  color: Colors.blue.withOpacity(AppUI.opacityFull),  // 1.0
)

📱 Tamaños de Iconos

Dimensiones estandarizadas según contexto:

// Badges, indicadores
Icon(Icons.circle, size: AppUI.iconXs)  // 12.0

// Inputs, campos de texto
Icon(Icons.search, size: AppUI.iconSm)  // 16.0

// Botones estándar
Icon(Icons.add, size: AppUI.iconMd)  // 20.0

// Estándar Material Design ⭐
Icon(Icons.home, size: AppUI.iconLg)  // 24.0

// Headers, títulos
Icon(Icons.star, size: AppUI.iconXl)  // 32.0

// Hero sections
Icon(Icons.favorite, size: AppUI.iconXxl)  // 40.0

// Splash screens
Icon(Icons.logo, size: AppUI.iconHuge)  // 48.0

👤 Tamaños de Avatares

Radios predefinidos para CircleAvatar:

// Listas compactas, chips
CircleAvatar(radius: AppUI.avatarXs)  // 24.0

// Chips, tags pequeños
CircleAvatar(radius: AppUI.avatarSm)  // 32.0

// Listas estándar ⭐
CircleAvatar(radius: AppUI.avatarMd)  // 40.0

// Detalles, cards
CircleAvatar(radius: AppUI.avatarLg)  // 48.0

// Perfiles, headers
CircleAvatar(radius: AppUI.avatarXl)  // 64.0

// Perfiles destacados
CircleAvatar(radius: AppUI.avatarXxl)  // 80.0

// Hero sections
CircleAvatar(radius: AppUI.avatarHuge)  // 96.0

// Página de perfil completa
CircleAvatar(radius: AppUI.avatarMassive)  // 128.0

📐 Breakpoints Responsivos

Anchos máximos para diferentes dispositivos:

// Ejemplo: Layout responsive completo
Widget build(BuildContext context) {
  final width = MediaQuery.of(context).size.width;

  // Mobile: < 600px
  if (width < AppUI.maxMobileWidth) {
    return MobileLayout(
      padding: AppSpacing.paddingLg,  // 16.0
      columns: 1,
    );
  }

  // Tablet: 600px - 900px
  if (width < AppUI.maxTabletWidth) {
    return TabletLayout(
      padding: AppSpacing.paddingXl,  // 20.0
      columns: 2,
    );
  }

  // Desktop: 900px - 1200px
  if (width < AppUI.maxDesktopWidth) {
    return DesktopLayout(
      padding: AppSpacing.paddingXxl,  // 24.0
      columns: 3,
    );
  }

  // Large Desktop: > 1200px
  return Container(
    constraints: BoxConstraints(
      maxWidth: AppUI.maxContentWidth,  // 1536.0 - Contenido centrado
    ),
    child: WideDesktopLayout(
      padding: AppSpacing.paddingHuge,  // 32.0
      columns: 4,
    ),
  );
}

// Ejemplo: Utility para obtener tipo de dispositivo
DeviceType getDeviceType(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width < AppUI.maxMobileWidth) return DeviceType.mobile;
  if (width < AppUI.maxTabletWidth) return DeviceType.tablet;
  return DeviceType.desktop;
}

📏 Aspect Ratios

Proporciones comunes para imágenes y media:

// Cuadrado - Posts de redes sociales
AspectRatio(
  aspectRatio: AppUI.aspectRatioSquare,  // 1:1
  child: Image.network('url'),
)

// Estándar - Fotografía tradicional
AspectRatio(
  aspectRatio: AppUI.aspectRatioStandard,  // 4:3
  child: Image.network('url'),
)

// Foto - Cámaras DSLR
AspectRatio(
  aspectRatio: AppUI.aspectRatioPhoto,  // 3:2
  child: Image.network('url'),
)

// Widescreen - Videos, pantallas ⭐
AspectRatio(
  aspectRatio: AppUI.aspectRatioWide,  // 16:9
  child: VideoPlayer(),
)

// Cinemático - Películas, ultra-wide
AspectRatio(
  aspectRatio: AppUI.aspectRatioCinematic,  // 21:9
  child: MovieClip(),
)

💡 Consejos de Uso

Import único: Solo necesitas import 'package:flutter_const/constants/app_ui.dart'
Elevaciones: Sigue Material Design para consistencia
Opacidades: Usa valores de texto para cumplir WCAG (accesibilidad)
Breakpoints: Considera orientación del dispositivo también
Aspect Ratios: Útil con FittedBox y Image.fit

✅ Ventajas

Conveniencia: Acceso rápido sin recordar qué importar
Descubribilidad: IDE autocomplete muestra todas las opciones
Consistencia: Valores estandarizados en toda la app
Accesibilidad: Valores optimizados para WCAG
Responsive: Breakpoints predefinidos

🔗 Ver también

AppSizes para todos los valores base y escalas completas
AppSpacing para padding, margin y gaps
AppRadius para border radius
AppFontSizes para tipografía

📚 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
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)
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
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
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