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>
237 lines
6.5 KiB
Dart
237 lines
6.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
/// Svrnty Size System
|
|
/// Standard sizing constants for icons, buttons, containers, and other components
|
|
class AppSizes {
|
|
// Prevent instantiation
|
|
AppSizes._();
|
|
|
|
// ============================================
|
|
// ICON SIZES
|
|
// ============================================
|
|
|
|
/// Extra small icon (16px)
|
|
static const double iconXs = 16.0;
|
|
|
|
/// Small icon (20px)
|
|
static const double iconSm = 20.0;
|
|
|
|
/// Standard icon size (24px)
|
|
static const double iconMd = 24.0;
|
|
|
|
/// Large icon size (32px)
|
|
static const double iconLg = 32.0;
|
|
|
|
/// Extra large icon (40px)
|
|
static const double iconXl = 40.0;
|
|
|
|
/// Huge icon (48px)
|
|
static const double iconXxl = 48.0;
|
|
|
|
/// Extra huge icon (56px)
|
|
static const double iconXxxl = 56.0;
|
|
|
|
// ============================================
|
|
// BUTTON SIZES
|
|
// ============================================
|
|
|
|
/// Small button height (32px)
|
|
static const double buttonHeightSm = 32.0;
|
|
|
|
/// Medium button height (40px) - Default
|
|
static const double buttonHeightMd = 40.0;
|
|
|
|
/// Large button height (48px)
|
|
static const double buttonHeightLg = 48.0;
|
|
|
|
/// Extra large button height (56px)
|
|
static const double buttonHeightXl = 56.0;
|
|
|
|
// ============================================
|
|
// INPUT FIELD SIZES
|
|
// ============================================
|
|
|
|
/// Input field height
|
|
static const double inputHeight = 56.0;
|
|
|
|
/// Compact input field height (no vertical padding)
|
|
static const double inputHeightCompact = 40.0;
|
|
|
|
/// Input field min width
|
|
static const double inputMinWidth = 48.0;
|
|
|
|
// ============================================
|
|
// CONTAINER & LAYOUT SIZES
|
|
// ============================================
|
|
|
|
/// Standard card minimum height
|
|
static const double cardMinHeight = 80.0;
|
|
|
|
/// Standard dialog max width (mobile)
|
|
static const double dialogMaxWidthMobile = 280.0;
|
|
|
|
/// Standard dialog max width (tablet/desktop)
|
|
static const double dialogMaxWidthDesktop = 560.0;
|
|
|
|
/// Maximum content width for centered layouts
|
|
static const double maxContentWidth = 1200.0;
|
|
|
|
/// Compact content width (forms, focused layouts)
|
|
static const double compactContentWidth = 600.0;
|
|
|
|
/// Standard container max width
|
|
static const double containerMaxWidth = 900.0;
|
|
|
|
// ============================================
|
|
// APPBAR & HEADER SIZES
|
|
// ============================================
|
|
|
|
/// Standard app bar height
|
|
static const double appBarHeight = 56.0;
|
|
|
|
/// Large app bar height
|
|
static const double appBarHeightLarge = 72.0;
|
|
|
|
/// Compact app bar height
|
|
static const double appBarHeightCompact = 48.0;
|
|
|
|
// ============================================
|
|
// BOTTOM SHEET SIZES
|
|
// ============================================
|
|
|
|
/// Bottom sheet max width
|
|
static const double bottomSheetMaxWidth = 540.0;
|
|
|
|
/// Bottom sheet default height (auto)
|
|
static const double bottomSheetHeightAuto = 0.0;
|
|
|
|
/// Bottom sheet half screen height
|
|
static const double bottomSheetHeightHalf = 0.5;
|
|
|
|
/// Bottom sheet 3/4 screen height
|
|
static const double bottomSheetHeight3Quarter = 0.75;
|
|
|
|
// ============================================
|
|
// ELEVATION & Z-INDEX
|
|
// ============================================
|
|
|
|
/// Standard z-index for floating elements
|
|
static const int zIndexFloating = 100;
|
|
|
|
/// Z-index for modals/dialogs
|
|
static const int zIndexModal = 50;
|
|
|
|
/// Z-index for tooltips
|
|
static const int zIndexTooltip = 150;
|
|
|
|
// ============================================
|
|
// DIVIDER & LINE SIZES
|
|
// ============================================
|
|
|
|
/// Divider thickness
|
|
static const double dividerThickness = 1.0;
|
|
|
|
/// Thin divider thickness (0.5px)
|
|
static const double dividerThicknessThin = 0.5;
|
|
|
|
/// Thick divider thickness (2px)
|
|
static const double dividerThicknessThick = 2.0;
|
|
|
|
/// Horizontal divider height
|
|
static const double dividerHeightHorizontal = 1.0;
|
|
|
|
/// Vertical divider width
|
|
static const double dividerWidthVertical = 1.0;
|
|
|
|
// ============================================
|
|
// PROGRESS INDICATOR SIZES
|
|
// ============================================
|
|
|
|
/// Progress indicator thickness
|
|
static const double progressIndicatorThickness = 4.0;
|
|
|
|
/// Circular progress indicator size
|
|
static const double circularProgressSize = 48.0;
|
|
|
|
/// Linear progress indicator height (thin)
|
|
static const double linearProgressHeightThin = 2.0;
|
|
|
|
/// Linear progress indicator height (standard)
|
|
static const double linearProgressHeightStandard = 4.0;
|
|
|
|
/// Linear progress indicator height (thick)
|
|
static const double linearProgressHeightThick = 8.0;
|
|
|
|
// ============================================
|
|
// CHIP & BADGE SIZES
|
|
// ============================================
|
|
|
|
/// Chip height
|
|
static const double chipHeight = 32.0;
|
|
|
|
/// Small chip height
|
|
static const double chipHeightSm = 24.0;
|
|
|
|
/// Badge size (for counter badges)
|
|
static const double badgeSize = 24.0;
|
|
|
|
/// Badge size (small)
|
|
static const double badgeSizeSm = 16.0;
|
|
|
|
// ============================================
|
|
// AVATAR SIZES
|
|
// ============================================
|
|
|
|
/// Small avatar size
|
|
static const double avatarSizeSm = 32.0;
|
|
|
|
/// Medium avatar size
|
|
static const double avatarSizeMd = 48.0;
|
|
|
|
/// Large avatar size
|
|
static const double avatarSizeLg = 64.0;
|
|
|
|
/// Extra large avatar size
|
|
static const double avatarSizeXl = 80.0;
|
|
|
|
// ============================================
|
|
// RESPONSIVE SIZING
|
|
// ============================================
|
|
|
|
/// Minimum tap target size (Material guidelines - 48px)
|
|
static const double minTapTarget = 48.0;
|
|
|
|
/// Minimum tap target size for desktop (36px)
|
|
static const double minTapTargetDesktop = 36.0;
|
|
|
|
/// Standard element spacing
|
|
static const double elementSpacing = 8.0;
|
|
|
|
/// Large element spacing
|
|
static const double elementSpacingLarge = 16.0;
|
|
|
|
// ============================================
|
|
// UTILITY METHODS
|
|
// ============================================
|
|
|
|
/// Get responsive button height based on device type
|
|
static double getButtonHeight(bool isCompact) {
|
|
return isCompact ? buttonHeightMd : buttonHeightLg;
|
|
}
|
|
|
|
/// Get responsive dialog max width based on screen width
|
|
static double getDialogMaxWidth(double screenWidth) {
|
|
return screenWidth < 600 ? dialogMaxWidthMobile : dialogMaxWidthDesktop;
|
|
}
|
|
|
|
/// Get responsive icon size
|
|
static double getIconSize({
|
|
required bool isCompact,
|
|
required bool isLarge,
|
|
}) {
|
|
if (isLarge) return iconLg;
|
|
if (isCompact) return iconSm;
|
|
return iconMd;
|
|
}
|
|
}
|