ionic-planb-logistic-app-fl.../lib/theme/animation_system.dart
Jean-Philippe Brule 98ce195bbb Add delivery order badges and optimize list performance
Enhance delivery list UI with sequential order badges and improve scrolling
performance with faster animations for better user experience.

Delivery Order Badge:
- Add 60x60px status-colored square badge showing delivery sequence number
- Position badge to the left of vertical status bar for clear visual hierarchy
- White text (26px, bold) centered in badge
- Automatically displays deliveryIndex + 1 (first delivery = 1, second = 2, etc.)
- Status color matches delivery state (green for completed, gray for pending, etc.)
- 10px border radius for modern appearance

Layout Enhancements:
- Sidebar expanded from 360px to 420px to accommodate order badges
- Vertical centering of row elements for better visual balance
- Maintains optimized spacing: badge (60px) + gap (12px) + bar (6px) + gap (16px) + content
- Full list scrolling restored (removed 4-item limit)

Animation Performance:
- Stagger animation delay reduced by 90% (50ms to 5ms)
- Fast stagger: 30ms to 3ms for ultra-responsive scrolling
- Delivery items appear almost instantly when scrolling
- Total animation time for 20 items: 500ms to 100ms
- Maintains subtle stagger effect while feeling immediate

User Experience Improvements:
- Clear visual indication of delivery order in route
- Faster perceived loading when scrolling through deliveries
- Better readability with larger, prominent order numbers
- Consistent status color coding across badge and accent bar

Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 10:29:17 -05:00

273 lines
7.5 KiB
Dart

import 'package:flutter/material.dart';
/// Svrnty Animation System
/// Complete animation configuration with durations, curves, and stagger delays
class AppAnimations {
// Prevent instantiation
AppAnimations._();
// ============================================
// ANIMATION DURATION CONSTANTS
// ============================================
/// Fast animation duration (200ms) - Button press, hover, quick interactions
static const Duration durationFast = Duration(milliseconds: 200);
/// Normal animation duration (300ms) - Default animations, fade, slide
static const Duration durationNormal = Duration(milliseconds: 300);
/// Slow animation duration (500ms) - Prominent animations, entrance, transitions
static const Duration durationSlow = Duration(milliseconds: 500);
/// Extra slow animation duration (800ms) - Slow, attention-grabbing animations
static const Duration durationXSlow = Duration(milliseconds: 800);
// ============================================
// ANIMATION DURATION IN MILLISECONDS
// ============================================
/// Fast animation milliseconds (200ms)
static const int durationFastMs = 200;
/// Normal animation milliseconds (300ms)
static const int durationNormalMs = 300;
/// Slow animation milliseconds (500ms)
static const int durationSlowMs = 500;
/// Extra slow animation milliseconds (800ms)
static const int durationXSlowMs = 800;
// ============================================
// ANIMATION CURVES
// ============================================
/// Ease In - Slow start, fast end (decelerate)
static const Curve curveEaseIn = Curves.easeIn;
/// Ease Out - Fast start, slow end (decelerate)
static const Curve curveEaseOut = Curves.easeOut;
/// Ease In Out - Smooth both ends (decelerate at start and end)
static const Curve curveEaseInOut = Curves.easeInOut;
/// Ease In Back - Back in, bounce effect
static const Curve curveEaseInBack = Curves.easeInBack;
/// Ease Out Back - Back out, bounce effect
static const Curve curveEaseOutBack = Curves.easeOutBack;
/// Elastic/Bouncy effect
static const Curve curveElastic = Curves.elasticOut;
/// Bouncing motion
static const Curve curveBounce = Curves.bounceOut;
/// Fast Out Slow In - Material standard curve
static const Curve curveFastOutSlowIn = Curves.fastOutSlowIn;
/// Deceleration curve (accelerate)
static const Curve curveAccelerate = Curves.decelerate;
/// Linear curve (no acceleration/deceleration)
static const Curve curveLinear = Curves.linear;
// ============================================
// STAGGER DELAYS (FOR LIST ANIMATIONS)
// ============================================
/// Default stagger delay for list items (5ms) - Reduced by 90% for instant loading
static const Duration staggerDelay = Duration(milliseconds: 5);
/// Quick stagger delay (3ms)
static const Duration staggerDelayFast = Duration(milliseconds: 3);
/// Slow stagger delay (10ms)
static const Duration staggerDelaySlow = Duration(milliseconds: 10);
/// Stagger delay in milliseconds
static const int staggerDelayMs = 5;
// ============================================
// SCALE ANIMATION CONSTANTS
// ============================================
/// Normal scale (1.0)
static const double scaleNormal = 1.0;
/// Hover/Light scale (1.02)
static const double scaleHover = 1.02;
/// Pressed/Active scale (0.98)
static const double scalePressed = 0.98;
/// Animation scale (0.9)
static const double scaleAnimation = 0.9;
// ============================================
// OFFSET ANIMATION CONSTANTS
// ============================================
/// Slide offset - Small (8px)
static const Offset offsetSm = Offset(0, 8);
/// Slide offset - Medium (16px)
static const Offset offsetMd = Offset(0, 16);
/// Slide offset - Large (20px)
static const Offset offsetLg = Offset(0, 20);
/// Slide offset - Extra large (32px)
static const Offset offsetXl = Offset(0, 32);
/// Floating offset - Up (10px)
static const Offset offsetFloating = Offset(0, -10);
// ============================================
// OPACITY ANIMATION CONSTANTS
// ============================================
/// Full opacity
static const double opacityFull = 1.0;
/// Half opacity
static const double opacityHalf = 0.5;
/// Subtle opacity (70%)
static const double opacitySubtle = 0.7;
/// Dim opacity (50%)
static const double opacityDim = 0.5;
/// Fade out opacity (30%)
static const double opacityFadeOut = 0.3;
/// Invisible opacity (0%)
static const double opacityInvisible = 0.0;
// ============================================
// ANIMATION PRESETS
// ============================================
/// Scale animation preset (button press) - note: CurvedAnimation cannot be const
// Use this pattern in your widgets instead:
// CurvedAnimation(parent: controller, curve: Curves.easeInOut)
// ============================================
// ROTATION ANIMATION CONSTANTS
// ============================================
/// Full rotation (360 degrees)
static const double rotationFull = 1.0;
/// Half rotation (180 degrees)
static const double rotationHalf = 0.5;
/// Quarter rotation (90 degrees)
static const double rotationQuarter = 0.25;
// ============================================
// UTILITY METHODS
// ============================================
/// Get duration based on animation intensity
static Duration getDuration(AnimationIntensity intensity) {
switch (intensity) {
case AnimationIntensity.fast:
return durationFast;
case AnimationIntensity.normal:
return durationNormal;
case AnimationIntensity.slow:
return durationSlow;
case AnimationIntensity.xSlow:
return durationXSlow;
}
}
/// Get curve based on animation type
static Curve getCurve(AnimationType type) {
switch (type) {
case AnimationType.easeIn:
return curveEaseIn;
case AnimationType.easeOut:
return curveEaseOut;
case AnimationType.easeInOut:
return curveEaseInOut;
case AnimationType.elastic:
return curveElastic;
case AnimationType.bounce:
return curveBounce;
case AnimationType.linear:
return curveLinear;
}
}
/// Get stagger delay for list index
static Duration getStaggerDelay(int index, {bool fast = false}) {
final baseDelay = fast ? staggerDelayFast : staggerDelay;
return Duration(
milliseconds: baseDelay.inMilliseconds * index,
);
}
/// Get scale value based on interaction state
static double getScale(InteractionState state) {
switch (state) {
case InteractionState.normal:
return scaleNormal;
case InteractionState.hover:
return scaleHover;
case InteractionState.pressed:
return scalePressed;
}
}
}
/// Animation intensity levels
enum AnimationIntensity {
/// 200ms - Quick interactions
fast,
/// 300ms - Standard animations
normal,
/// 500ms - Prominent animations
slow,
/// 800ms - Slow, attention-grabbing animations
xSlow,
}
/// Animation types/curves
enum AnimationType {
/// Ease In curve
easeIn,
/// Ease Out curve
easeOut,
/// Ease In Out curve
easeInOut,
/// Elastic/bouncy curve
elastic,
/// Bounce curve
bounce,
/// Linear curve
linear,
}
/// Interaction states for animation
enum InteractionState {
/// Normal/default state
normal,
/// Hover state
hover,
/// Pressed/active state
pressed,
}