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>
273 lines
7.5 KiB
Dart
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,
|
|
}
|