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>
209 lines
5.5 KiB
Dart
209 lines
5.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
/// Svrnty Shadow & Elevation System
|
|
/// Comprehensive shadow and elevation definitions for light and dark themes
|
|
class AppShadow {
|
|
// Prevent instantiation
|
|
AppShadow._();
|
|
|
|
// ============================================
|
|
// ELEVATION CONSTANTS
|
|
// ============================================
|
|
|
|
/// No elevation/shadow
|
|
static const double elevationNone = 0.0;
|
|
|
|
/// Minimal depth elevation
|
|
static const double elevationXs = 1.0;
|
|
|
|
/// Small shadow elevation (default for cards)
|
|
static const double elevationSm = 2.0;
|
|
|
|
/// Medium shadow elevation (hover states)
|
|
static const double elevationMd = 4.0;
|
|
|
|
/// Large shadow elevation
|
|
static const double elevationLg = 8.0;
|
|
|
|
/// Extra large shadow elevation (dialogs, prominent surfaces)
|
|
static const double elevationXl = 16.0;
|
|
|
|
// ============================================
|
|
// SHADOW DEFINITIONS - LIGHT THEME
|
|
// ============================================
|
|
|
|
/// Light theme shadow color (10% opacity black)
|
|
static const Color _shadowColorLight = Color(0x1A000000);
|
|
|
|
/// No shadow for light theme
|
|
static const List<BoxShadow> shadowNoneLight = [];
|
|
|
|
/// Minimal shadow for light theme
|
|
static const List<BoxShadow> shadowXsLight = [
|
|
BoxShadow(
|
|
color: _shadowColorLight,
|
|
blurRadius: 1,
|
|
offset: Offset(0, 1),
|
|
),
|
|
];
|
|
|
|
/// Small shadow for light theme (default for cards)
|
|
static const List<BoxShadow> shadowSmLight = [
|
|
BoxShadow(
|
|
color: _shadowColorLight,
|
|
blurRadius: 2,
|
|
offset: Offset(0, 1),
|
|
),
|
|
];
|
|
|
|
/// Medium shadow for light theme (hover states)
|
|
static const List<BoxShadow> shadowMdLight = [
|
|
BoxShadow(
|
|
color: _shadowColorLight,
|
|
blurRadius: 4,
|
|
offset: Offset(0, 2),
|
|
),
|
|
];
|
|
|
|
/// Large shadow for light theme
|
|
static const List<BoxShadow> shadowLgLight = [
|
|
BoxShadow(
|
|
color: _shadowColorLight,
|
|
blurRadius: 8,
|
|
offset: Offset(0, 4),
|
|
),
|
|
];
|
|
|
|
/// Extra large shadow for light theme (dialogs)
|
|
static const List<BoxShadow> shadowXlLight = [
|
|
BoxShadow(
|
|
color: _shadowColorLight,
|
|
blurRadius: 16,
|
|
offset: Offset(0, 8),
|
|
),
|
|
];
|
|
|
|
// ============================================
|
|
// SHADOW DEFINITIONS - DARK THEME
|
|
// ============================================
|
|
|
|
/// Dark theme shadow color (pure black)
|
|
static const Color _shadowColorDark = Color(0x4D000000);
|
|
|
|
/// No shadow for dark theme
|
|
static const List<BoxShadow> shadowNoneDark = [];
|
|
|
|
/// Minimal shadow for dark theme
|
|
static const List<BoxShadow> shadowXsDark = [
|
|
BoxShadow(
|
|
color: _shadowColorDark,
|
|
blurRadius: 1,
|
|
offset: Offset(0, 1),
|
|
),
|
|
];
|
|
|
|
/// Small shadow for dark theme (default for cards)
|
|
static const List<BoxShadow> shadowSmDark = [
|
|
BoxShadow(
|
|
color: _shadowColorDark,
|
|
blurRadius: 2,
|
|
offset: Offset(0, 1),
|
|
),
|
|
];
|
|
|
|
/// Medium shadow for dark theme (hover states)
|
|
static const List<BoxShadow> shadowMdDark = [
|
|
BoxShadow(
|
|
color: _shadowColorDark,
|
|
blurRadius: 4,
|
|
offset: Offset(0, 2),
|
|
),
|
|
];
|
|
|
|
/// Large shadow for dark theme
|
|
static const List<BoxShadow> shadowLgDark = [
|
|
BoxShadow(
|
|
color: _shadowColorDark,
|
|
blurRadius: 8,
|
|
offset: Offset(0, 4),
|
|
),
|
|
];
|
|
|
|
/// Extra large shadow for dark theme (dialogs)
|
|
static const List<BoxShadow> shadowXlDark = [
|
|
BoxShadow(
|
|
color: _shadowColorDark,
|
|
blurRadius: 16,
|
|
offset: Offset(0, 8),
|
|
),
|
|
];
|
|
|
|
// ============================================
|
|
// SHADOW UTILITY METHODS
|
|
// ============================================
|
|
|
|
/// Get shadow list based on brightness and elevation level
|
|
static List<BoxShadow> getShadow(
|
|
Brightness brightness,
|
|
double elevation,
|
|
) {
|
|
final isDark = brightness == Brightness.dark;
|
|
|
|
switch (elevation) {
|
|
case elevationNone:
|
|
return isDark ? shadowNoneDark : shadowNoneLight;
|
|
case elevationXs:
|
|
return isDark ? shadowXsDark : shadowXsLight;
|
|
case elevationSm:
|
|
return isDark ? shadowSmDark : shadowSmLight;
|
|
case elevationMd:
|
|
return isDark ? shadowMdDark : shadowMdLight;
|
|
case elevationLg:
|
|
return isDark ? shadowLgDark : shadowLgLight;
|
|
case elevationXl:
|
|
return isDark ? shadowXlDark : shadowXlLight;
|
|
default:
|
|
return isDark ? shadowSmDark : shadowSmLight;
|
|
}
|
|
}
|
|
|
|
/// Get shadow color based on brightness
|
|
static Color getShadowColor(Brightness brightness) {
|
|
return brightness == Brightness.dark ? _shadowColorDark : _shadowColorLight;
|
|
}
|
|
|
|
// ============================================
|
|
// COMPONENT ELEVATION MAPPING
|
|
// ============================================
|
|
|
|
/// Card elevation (2)
|
|
static const double cardElevation = elevationSm;
|
|
|
|
/// Card hover elevation (4)
|
|
static const double cardHoverElevation = elevationMd;
|
|
|
|
/// AppBar elevation (0 - flat design)
|
|
static const double appBarElevation = elevationNone;
|
|
|
|
/// Dialog elevation (8)
|
|
static const double dialogElevation = elevationLg;
|
|
|
|
/// FAB elevation (8)
|
|
static const double fabElevation = elevationLg;
|
|
|
|
/// FAB hover elevation (16)
|
|
static const double fabHoverElevation = elevationXl;
|
|
|
|
/// Bottom sheet elevation (8)
|
|
static const double bottomSheetElevation = elevationLg;
|
|
|
|
/// Floating action button pressed elevation (12)
|
|
static const double fabPressedElevation = elevationXl;
|
|
|
|
/// Menu/Dropdown elevation (8)
|
|
static const double menuElevation = elevationLg;
|
|
|
|
/// Tooltip elevation (16)
|
|
static const double tooltipElevation = elevationXl;
|
|
}
|