Add three major UI components with animations and dark mode support: - PremiumRouteCard: Enhanced route cards with left accent bar, delivery count badge, animated hover effects (1.02x scale), and dynamic shadow elevation - DarkModeMapComponent: Google Maps integration with dark theme styling, custom info panels, navigation buttons, and delivery status indicators - DeliveryListItem: Animated list items with staggered entrance animations, status badges with icons, contact indicators, and hover states Updates: - RoutesPage: Now uses PremiumRouteCard with improved visual hierarchy - DeliveriesPage: Integrated DarkModeMapComponent and DeliveryListItem with proper theme awareness - Animation system: Leverages existing AppAnimations constants for 200ms fast interactions and easeOut curves Design philosophy: - Element separation through left accent bars (status-coded) - Elevation and shadow for depth (0.1-0.3 opacity) - Staggered animations for list items (50ms delays) - Dark mode optimized for evening use (reduced brightness) - Responsive hover states with tactile feedback Co-Authored-By: Claude <noreply@anthropic.com>
333 lines
8.7 KiB
Dart
333 lines
8.7 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'color_system.dart';
|
|
|
|
/// Svrnty Gradient System
|
|
/// Predefined gradients for status bars, progress indicators, and backgrounds
|
|
class AppGradients {
|
|
// Prevent instantiation
|
|
AppGradients._();
|
|
|
|
// ============================================
|
|
// DELIVERY STATUS GRADIENTS
|
|
// ============================================
|
|
|
|
/// Pending status gradient (Slate Gray)
|
|
static const LinearGradient gradientStatusPending = LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
SvrntyColors.statusPending,
|
|
Color(0x506576), // Slightly different shade for gradient effect
|
|
],
|
|
);
|
|
|
|
/// In Progress status gradient (Blue/Info)
|
|
static const LinearGradient gradientStatusInProgress = LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
SvrntyColors.statusInProgress,
|
|
Color(0x5B9BFF), // Lighter blue for gradient
|
|
],
|
|
);
|
|
|
|
/// Completed status gradient (Green/Success)
|
|
static const LinearGradient gradientStatusCompleted = LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
SvrntyColors.statusCompleted,
|
|
Color(0x4ADE80), // Lighter green for gradient
|
|
],
|
|
);
|
|
|
|
/// Skipped status gradient (Amber/Warning)
|
|
static const LinearGradient gradientStatusSkipped = LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
SvrntyColors.statusSkipped,
|
|
Color(0xFBBF24), // Lighter amber for gradient
|
|
],
|
|
);
|
|
|
|
/// Failed status gradient (Red/Error)
|
|
static const LinearGradient gradientStatusFailed = LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
SvrntyColors.statusFailed,
|
|
Color(0xFF7D7D), // Lighter red for gradient
|
|
],
|
|
);
|
|
|
|
// ============================================
|
|
// PROGRESS INDICATOR GRADIENTS
|
|
// ============================================
|
|
|
|
/// Progress bar gradient (Blue to transparent)
|
|
static LinearGradient gradientProgress({
|
|
required Color color,
|
|
bool horizontal = true,
|
|
}) {
|
|
return LinearGradient(
|
|
begin: horizontal ? Alignment.centerLeft : Alignment.topCenter,
|
|
end: horizontal ? Alignment.centerRight : Alignment.bottomCenter,
|
|
colors: [
|
|
color,
|
|
color.withOpacity(0.8),
|
|
],
|
|
);
|
|
}
|
|
|
|
/// Success progress gradient
|
|
static const LinearGradient gradientProgressSuccess = LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
SvrntyColors.success,
|
|
Color(0x4ADE80), // Lighter green
|
|
],
|
|
);
|
|
|
|
/// Warning progress gradient
|
|
static const LinearGradient gradientProgressWarning = LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
SvrntyColors.warning,
|
|
Color(0xFBBF24), // Lighter amber
|
|
],
|
|
);
|
|
|
|
/// Error progress gradient
|
|
static const LinearGradient gradientProgressError = LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
SvrntyColors.error,
|
|
Color(0xFF7D7D), // Lighter red
|
|
],
|
|
);
|
|
|
|
/// Info progress gradient
|
|
static const LinearGradient gradientProgressInfo = LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
SvrntyColors.info,
|
|
Color(0x5B9BFF), // Lighter blue
|
|
],
|
|
);
|
|
|
|
// ============================================
|
|
// BRAND GRADIENTS
|
|
// ============================================
|
|
|
|
/// Primary brand gradient (Crimson Red)
|
|
static const LinearGradient gradientPrimary = LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [
|
|
SvrntyColors.crimsonRed,
|
|
Color(0xC44D58), // Slightly darker shade
|
|
],
|
|
);
|
|
|
|
/// Secondary brand gradient (Slate Blue)
|
|
static const LinearGradient gradientSecondary = LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [
|
|
SvrntyColors.darkSlate,
|
|
SvrntyColors.slateGray,
|
|
],
|
|
);
|
|
|
|
/// Accent gradient (Crimson to Slate)
|
|
static const LinearGradient gradientAccent = LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [
|
|
SvrntyColors.crimsonRed,
|
|
SvrntyColors.darkSlate,
|
|
],
|
|
);
|
|
|
|
// ============================================
|
|
// BACKGROUND GRADIENTS
|
|
// ============================================
|
|
|
|
/// Light background gradient
|
|
static const LinearGradient gradientBackgroundLight = LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [
|
|
Color(0xFAFAFC),
|
|
Color(0xF5F7FA),
|
|
],
|
|
);
|
|
|
|
/// Dark background gradient
|
|
static const LinearGradient gradientBackgroundDark = LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
colors: [
|
|
Color(0x1A1C1E),
|
|
Color(0x2A2D34),
|
|
],
|
|
);
|
|
|
|
/// Elevated surface gradient (light)
|
|
static const LinearGradient gradientElevatedLight = LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
Color(0xFFFFFF),
|
|
Color(0xF5F7FA),
|
|
],
|
|
);
|
|
|
|
/// Elevated surface gradient (dark)
|
|
static const LinearGradient gradientElevatedDark = LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
Color(0x2A2D34),
|
|
Color(0x1F2123),
|
|
],
|
|
);
|
|
|
|
// ============================================
|
|
// OVERLAY GRADIENTS
|
|
// ============================================
|
|
|
|
/// Dark overlay gradient (for images)
|
|
static const LinearGradient gradientOverlayDark = LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
Color(0x00000000), // Transparent at top
|
|
Color(0x4D000000), // Dark at bottom
|
|
],
|
|
);
|
|
|
|
/// Light overlay gradient
|
|
static const LinearGradient gradientOverlayLight = LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
Color(0x00FFFFFF), // Transparent at top
|
|
Color(0x4DFFFFFF), // Light at bottom
|
|
],
|
|
);
|
|
|
|
/// Vignette gradient (darkened edges)
|
|
static const RadialGradient gradientVignette = RadialGradient(
|
|
center: Alignment.center,
|
|
radius: 1.2,
|
|
colors: [
|
|
Color(0x00000000),
|
|
Color(0x80000000),
|
|
],
|
|
);
|
|
|
|
// ============================================
|
|
// SHIMMER GRADIENTS (for loading states)
|
|
// ============================================
|
|
|
|
/// Shimmer gradient light theme
|
|
static const LinearGradient gradientShimmerLight = LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
Color(0xFFFFFFFF),
|
|
Color(0x80F0F0F0),
|
|
Color(0xFFFFFFFF),
|
|
],
|
|
stops: [0.1, 0.5, 0.9],
|
|
);
|
|
|
|
/// Shimmer gradient dark theme
|
|
static const LinearGradient gradientShimmerDark = LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
Color(0xFF2A2D34),
|
|
Color(0x80383940),
|
|
Color(0xFF2A2D34),
|
|
],
|
|
stops: [0.1, 0.5, 0.9],
|
|
);
|
|
|
|
// ============================================
|
|
// UTILITY METHODS
|
|
// ============================================
|
|
|
|
/// Get status gradient based on delivery status
|
|
static LinearGradient getStatusGradient(String status) {
|
|
switch (status.toLowerCase()) {
|
|
case 'pending':
|
|
return gradientStatusPending;
|
|
case 'in_progress':
|
|
case 'inprogress':
|
|
return gradientStatusInProgress;
|
|
case 'completed':
|
|
case 'done':
|
|
return gradientStatusCompleted;
|
|
case 'skipped':
|
|
return gradientStatusSkipped;
|
|
case 'failed':
|
|
return gradientStatusFailed;
|
|
default:
|
|
return gradientStatusPending;
|
|
}
|
|
}
|
|
|
|
/// Get progress gradient based on status
|
|
static LinearGradient getProgressGradient(String status) {
|
|
switch (status.toLowerCase()) {
|
|
case 'success':
|
|
return gradientProgressSuccess;
|
|
case 'warning':
|
|
return gradientProgressWarning;
|
|
case 'error':
|
|
return gradientProgressError;
|
|
case 'info':
|
|
return gradientProgressInfo;
|
|
default:
|
|
return gradientProgressSuccess;
|
|
}
|
|
}
|
|
|
|
/// Create a custom gradient with opacity
|
|
static LinearGradient withOpacity(
|
|
LinearGradient gradient,
|
|
double opacity,
|
|
) {
|
|
return LinearGradient(
|
|
begin: gradient.begin,
|
|
end: gradient.end,
|
|
colors: gradient.colors
|
|
.map((color) => color.withOpacity(opacity))
|
|
.toList(),
|
|
stops: gradient.stops,
|
|
);
|
|
}
|
|
|
|
/// Create a directional gradient
|
|
static LinearGradient directional({
|
|
required List<Color> colors,
|
|
required Alignment begin,
|
|
required Alignment end,
|
|
List<double>? stops,
|
|
}) {
|
|
return LinearGradient(
|
|
begin: begin,
|
|
end: end,
|
|
colors: colors,
|
|
stops: stops,
|
|
);
|
|
}
|
|
}
|