ionic-planb-logistic-app-fl.../lib/theme/gradient_system.dart
Jean-Philippe Brule 3f31a509e0 Implement premium UI/UX refinements for Apple-like polish
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>
2025-11-15 14:41:32 -05:00

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,
);
}
}