ionic-planb-logistic-app-fl.../lib/theme/size_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

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