AppDurations class

Sistema de duraciones para animaciones, transiciones y delays

AppDurations proporciona duraciones estandarizadas siguiendo las mejores prácticas de UX y Material Design Motion. Usar estas duraciones garantiza que las animaciones sean fluidas, naturales y consistentes en toda la app.

⏱️ Filosofía de Timing

Las duraciones siguen principios de diseño de movimiento:

Rápidas (50-150ms): Feedback inmediato, sin bloquear la UI
Estándar (200-400ms): Balance perfecto entre velocidad y claridad
Lentas (500-800ms): Transiciones complejas o estados importantes
Largas (1000ms+): Loading states, notificaciones, efectos especiales

📏 Escala de Duraciones

Duraciones Base:

xxs (50ms) → Ultra rápido (hover, ripples instantáneos)
xs (100ms) → Extra rápido (cambios de estado)
sm (150ms) → Muy rápido (micro-interacciones)
smd (200ms) → Rápido ⭐ (feedback inmediato)
mds (250ms) → Mediano rápido (transiciones suaves)
md (300ms) → Mediano ⭐ (animaciones estándar)
mdl (350ms) → Mediano lento
lg (400ms) → Lento (animaciones deliberadas)
xl (500ms) → Extra lento (transiciones importantes)
xxl (600ms) → Extra extra lento
xxxl (800ms) → Muy lento (animaciones complejas)

Duraciones Extendidas:

huge (1000ms / 1s) → Loading states, progress
massive (1500ms / 1.5s) → Animaciones largas, shimmer
giant (2000ms / 2s) → Notificaciones, toasts
mega (3000ms / 3s) → Mensajes importantes

🎨 Uso Básico

// ✅ AnimatedContainer - Transiciones de propiedades
AnimatedContainer(
  duration: AppDurations.md,  // 300ms - Estándar
  curve: Curves.easeInOut,
  width: isExpanded ? 200 : 100,
  color: isActive ? Colors.blue : Colors.grey,
)

// ✅ AnimatedOpacity - Fade in/out
AnimatedOpacity(
  duration: AppDurations.smd,  // 200ms - Rápido
  opacity: isVisible ? 1.0 : 0.0,
  child: Widget(),
)

// ✅ PageRouteBuilder - Transiciones de página
PageRouteBuilder(
  transitionDuration: AppDurations.pageTransition,  // 150ms
  pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
)

// ✅ Hover effects - Feedback inmediato
MouseRegion(
  onEnter: (_) => setState(() => isHovered = true),
  child: AnimatedContainer(
    duration: AppDurations.hoverEffect,  // 100ms - Instantáneo
    color: isHovered ? Colors.blue : Colors.grey,
  ),
)

// ✅ Debouncing - Evitar llamadas excesivas
Timer _debounce;
void onSearchChanged(String query) {
  _debounce?.cancel();
  _debounce = Timer(AppDurations.searchDebounce, () {  // 300ms
    performSearch(query);
  });
}

// ✅ Snackbars - Notificaciones temporales
ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Operación exitosa'),
    duration: AppDurations.snackbarDuration,  // 2000ms
  ),
)

// ✅ Tooltips - Delay antes de mostrar
Tooltip(
  waitDuration: AppDurations.tooltipDelay,  // 500ms
  message: 'Información útil',
)

📱 Duraciones por Tipo de Animación

Micro-interacciones (instantáneas):

// Hover effects
duration: AppDurations.hoverEffect  // 100ms

// Ripple effects
duration: AppDurations.rippleEffect  // 200ms

// Toggle switches
duration: AppDurations.smd  // 200ms

Transiciones de UI (balance velocidad/claridad):

// Cambios de color, tamaño, posición
duration: AppDurations.md  // 300ms ⭐ (recomendado)

// Fade in/out
duration: AppDurations.smd  // 200ms

// Expansión/colapso
duration: AppDurations.lg  // 400ms

Transiciones de página (rápidas, no bloquear):

// Navegación entre screens
duration: AppDurations.pageTransition  // 150ms

// Modals, dialogs
duration: AppDurations.sm  // 150ms

// Bottom sheets
duration: AppDurations.smd  // 200ms

Estados de carga (informar espera):

// Skeleton screens, shimmer
duration: AppDurations.shimmerAnimation  // 1500ms

// Progress indicators
duration: AppDurations.huge  // 1000ms

// API simulation (desarrollo)
await Future.delayed(AppDurations.apiSimulatedDelay)  // 1500ms

🎯 Duraciones Especializadas

Estas constantes están optimizadas para casos de uso específicos:

// Debouncing de búsqueda
AppDurations.searchDebounce       // 300ms - Balance precisión/respuesta

// Debouncing de filtros
AppDurations.filterDebounce       // 400ms - Menos sensible

// Debouncing rápido (validación)
AppDurations.quickDebounce        // 200ms - Feedback rápido

// Delay de tooltips
AppDurations.tooltipDelay         // 500ms - No molesto

// Duración de snackbars
AppDurations.snackbarDuration     // 2000ms - Tiempo de lectura

// Transiciones de página
AppDurations.pageTransition       // 150ms - Rápido, no bloquea

// Hover effects
AppDurations.hoverEffect          // 100ms - Instantáneo

// Ripple effects (Material)
AppDurations.rippleEffect         // 200ms - Estándar Material

// Shimmer loading
AppDurations.shimmerAnimation     // 1500ms - Ciclo completo

// API simulation (mock)
AppDurations.apiSimulatedDelay    // 1500ms - Simular latencia

💡 Guía de Selección

Por Distancia Visual:

Cambios pequeños (< 20px) → smd a md (200-300ms)
Cambios medianos (20-100px) → md a lg (300-400ms)
Cambios grandes (> 100px) → lg a xl (400-500ms)

Por Complejidad:

Una propiedad → smd (200ms)
2-3 propiedades → md (300ms) ⭐
4+ propiedades → lg (400ms)

Por Importancia:

Feedback sutil → xs a sm (100-150ms)
Acción estándar → smd a md (200-300ms) ⭐
Acción importante → lg a xl (400-500ms)

🎬 Combinación con Curves

Las duraciones funcionan mejor con las curvas apropiadas:

// Entrada (elemento aparece)
AnimatedContainer(
  duration: AppDurations.md,
  curve: Curves.easeOut,  // Desacelera al final
)

// Salida (elemento desaparece)
AnimatedContainer(
  duration: AppDurations.smd,  // Más rápido
  curve: Curves.easeIn,  // Acelera al final
)

// Bidireccional (va y viene)
AnimatedContainer(
  duration: AppDurations.md,
  curve: Curves.easeInOut,  // Suave en ambos extremos
)

// Bounce effects
AnimatedContainer(
  duration: AppDurations.lg,
  curve: Curves.elasticOut,  // Rebote natural
)

🚀 Recomendaciones de Performance

Prioriza animaciones cortas (< 300ms) para UI responsive
Evita duraciones > 500ms para interacciones frecuentes
Usa duraciones consistentes para componentes similares
Reduce duraciones en dispositivos de gama baja
Respeta preferencias de accesibilidad (reduce motion)

// Ejemplo: Respetar preferencias de accesibilidad
Duration getAnimationDuration(BuildContext context) {
  final reduceMotion = MediaQuery.of(context).disableAnimations;
  return reduceMotion ? Duration.zero : AppDurations.md;
}

❌ Evitar

// ❌ NO uses duraciones arbitrarias
AnimatedContainer(duration: Duration(milliseconds: 273))
Timer(Duration(milliseconds: 427), callback)

// ✅ USA duraciones predefinidas
AnimatedContainer(duration: AppDurations.md)  // 300ms
Timer(AppDurations.searchDebounce, callback)  // 300ms

// ❌ NO uses animaciones muy lentas para UI frecuente
AnimatedOpacity(duration: Duration(seconds: 2))  // Demasiado lento

// ✅ USA duraciones apropiadas al contexto
AnimatedOpacity(duration: AppDurations.smd)  // 200ms - Rápido

🔗 Ver también

AppSizes para dimensiones consistentes
Material Motion System
Flutter Curves

📚 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

apiSimulatedDelay → const Duration: 1500ms - Delay simulado para llamadas API en modo mock/desarrollo
fast → const Duration: @deprecated Use smd instead
filterDebounce → const Duration: 400ms - Debounce para filtros (tiempo entre cambios de filtro)
giant → const Duration: 2000ms (2 segundos) - Gigante (notificaciones, toasts)
hoverEffect → const Duration: 100ms - Duración de hover effects (cambio visual al pasar el cursor)
huge → const Duration: 1000ms (1 segundo) - Enorme (loading states, progress)
lg → const Duration: 400ms - Lento (animaciones deliberadas)
massive → const Duration: 1500ms (1.5 segundos) - Masivo (animaciones largas)
md → const Duration: 300ms - Mediano (ideal para la mayoría de animaciones estándar)
mdl → const Duration: 350ms - Mediano lento (transiciones más perceptibles)
mds → const Duration: 250ms - Mediano rápido (transiciones suaves)
medium → const Duration: @deprecated Use md instead
mega → const Duration: 3000ms (3 segundos) - Mega (mensajes importantes)
pageTransition → const Duration: 150ms - Duración de transición entre páginas/rutas
quickDebounce → const Duration: 200ms - Debounce rápido para inputs simples (validación en tiempo real)
rippleEffect → const Duration: 200ms - Duración de ripple effects (Material Design)
searchDebounce → const Duration: 300ms - Debounce para búsqueda (evita llamadas API excesivas al escribir)
shimmerAnimation → const Duration: 1500ms - Duración de la animación shimmer de carga (skeleton screens)
slow → const Duration: @deprecated Use lg instead
sm → const Duration: 150ms - Muy rápido (micro-interacciones)
smd → const Duration: 200ms - Rápido (ideal para micro-interacciones y feedback inmediato)
snackbarDuration → const Duration: 2000ms - Duración para mostrar snackbars/toasts (tiempo visible)
tooltipDelay → const Duration: 500ms - Timeout para mostrar tooltips (hover delay)
ultraFast → const Duration: @deprecated Use xs instead
verySlow → const Duration: @deprecated Use xxxl instead
xl → const Duration: 500ms - Extra lento (transiciones importantes)
xs → const Duration: 100ms - Extra rápido (cambios de estado rápidos)
xxl → const Duration: 600ms - Extra extra lento (animaciones destacadas)
xxs → const Duration: 50ms - Ultra rápido (hover effects, ripples instantáneos)
xxxl → const Duration: 800ms - Muy lento (animaciones complejas)