468 lines
10 KiB
Dart
468 lines
10 KiB
Dart
/// UI Constants for the Worker App
|
|
///
|
|
/// Contains spacing, sizes, border radius, elevation values, and other
|
|
/// UI-related constants used throughout the app.
|
|
library;
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
/// Spacing constants following Material Design 8dp grid system
|
|
class AppSpacing {
|
|
AppSpacing._();
|
|
|
|
/// Extra small spacing: 4dp
|
|
static const double xs = 4.0;
|
|
|
|
/// Small spacing: 8dp
|
|
static const double sm = 8.0;
|
|
|
|
/// Medium spacing: 16dp
|
|
static const double md = 16.0;
|
|
|
|
/// Large spacing: 24dp
|
|
static const double lg = 24.0;
|
|
|
|
/// Extra large spacing: 32dp
|
|
static const double xl = 32.0;
|
|
|
|
/// Extra extra large spacing: 48dp
|
|
static const double xxl = 48.0;
|
|
}
|
|
|
|
/// Border radius constants
|
|
class AppRadius {
|
|
AppRadius._();
|
|
|
|
/// Small radius: 4dp
|
|
static const double sm = 4.0;
|
|
|
|
/// Medium radius: 8dp
|
|
static const double md = 8.0;
|
|
|
|
/// Large radius: 12dp
|
|
static const double lg = 12.0;
|
|
|
|
/// Extra large radius: 16dp
|
|
static const double xl = 16.0;
|
|
|
|
/// Card radius: 12dp
|
|
static const double card = 12.0;
|
|
|
|
/// Button radius: 8dp
|
|
static const double button = 8.0;
|
|
|
|
/// Input field radius: 8dp
|
|
static const double input = 8.0;
|
|
|
|
/// Member card radius: 16dp
|
|
static const double memberCard = 16.0;
|
|
|
|
/// Circular radius for avatars and badges
|
|
static const double circular = 9999.0;
|
|
}
|
|
|
|
/// Elevation constants for Material Design
|
|
class AppElevation {
|
|
AppElevation._();
|
|
|
|
/// No elevation
|
|
static const double none = 0.0;
|
|
|
|
/// Low elevation: 2dp
|
|
static const double low = 2.0;
|
|
|
|
/// Medium elevation: 4dp
|
|
static const double medium = 4.0;
|
|
|
|
/// High elevation: 8dp
|
|
static const double high = 8.0;
|
|
|
|
/// Card elevation: 2dp
|
|
static const double card = 2.0;
|
|
|
|
/// Button elevation: 2dp
|
|
static const double button = 2.0;
|
|
|
|
/// FAB elevation: 6dp
|
|
static const double fab = 6.0;
|
|
|
|
/// Member card elevation: 8dp
|
|
static const double memberCard = 8.0;
|
|
}
|
|
|
|
/// Icon size constants
|
|
class AppIconSize {
|
|
AppIconSize._();
|
|
|
|
/// Extra small icon: 16dp
|
|
static const double xs = 16.0;
|
|
|
|
/// Small icon: 20dp
|
|
static const double sm = 20.0;
|
|
|
|
/// Medium icon: 24dp
|
|
static const double md = 24.0;
|
|
|
|
/// Large icon: 32dp
|
|
static const double lg = 32.0;
|
|
|
|
/// Extra large icon: 48dp
|
|
static const double xl = 48.0;
|
|
}
|
|
|
|
/// App bar specifications
|
|
class AppBarSpecs {
|
|
AppBarSpecs._();
|
|
|
|
/// Standard app bar height
|
|
static const double height = 56.0;
|
|
|
|
/// App bar elevation
|
|
static const double elevation = 0.0;
|
|
|
|
/// App bar icon size
|
|
static const double iconSize = AppIconSize.md;
|
|
}
|
|
|
|
/// Bottom navigation bar specifications
|
|
class BottomNavSpecs {
|
|
BottomNavSpecs._();
|
|
|
|
/// Bottom nav bar height
|
|
static const double height = 72.0;
|
|
|
|
/// Icon size for unselected state
|
|
static const double iconSize = 24.0;
|
|
|
|
/// Icon size for selected state
|
|
static const double selectedIconSize = 28.0;
|
|
|
|
/// Label font size
|
|
static const double labelFontSize = 12.0;
|
|
|
|
/// Bottom nav bar elevation
|
|
static const double elevation = 8.0;
|
|
}
|
|
|
|
/// Floating Action Button specifications
|
|
class FABSpecs {
|
|
FABSpecs._();
|
|
|
|
/// FAB size
|
|
static const double size = 56.0;
|
|
|
|
/// FAB elevation
|
|
static const double elevation = 6.0;
|
|
|
|
/// FAB icon size
|
|
static const double iconSize = 24.0;
|
|
|
|
/// FAB position from bottom-right
|
|
static const Offset position = Offset(16, 16);
|
|
}
|
|
|
|
/// Member card specifications
|
|
class MemberCardSpecs {
|
|
MemberCardSpecs._();
|
|
|
|
/// Card width (full width)
|
|
static const double width = double.infinity;
|
|
|
|
/// Card height
|
|
static const double height = 200.0;
|
|
|
|
/// Border radius
|
|
static const double borderRadius = AppRadius.memberCard;
|
|
|
|
/// Card elevation
|
|
static const double elevation = AppElevation.memberCard;
|
|
|
|
/// Card padding
|
|
static const EdgeInsets padding = EdgeInsets.all(20.0);
|
|
|
|
/// QR code size
|
|
static const double qrSize = 80.0;
|
|
|
|
/// QR code background size
|
|
static const double qrBackgroundSize = 90.0;
|
|
|
|
/// Points display font size
|
|
static const double pointsFontSize = 28.0;
|
|
|
|
/// Points display font weight
|
|
static const FontWeight pointsFontWeight = FontWeight.bold;
|
|
|
|
/// Member ID font size
|
|
static const double memberIdFontSize = 14.0;
|
|
|
|
/// Member name font size
|
|
static const double memberNameFontSize = 18.0;
|
|
}
|
|
|
|
/// Button specifications
|
|
class ButtonSpecs {
|
|
ButtonSpecs._();
|
|
|
|
/// Button height
|
|
static const double height = 48.0;
|
|
|
|
/// Button minimum width
|
|
static const double minWidth = 120.0;
|
|
|
|
/// Button border radius
|
|
static const double borderRadius = AppRadius.button;
|
|
|
|
/// Button elevation
|
|
static const double elevation = AppElevation.button;
|
|
|
|
/// Button padding
|
|
static const EdgeInsets padding = EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.lg,
|
|
vertical: AppSpacing.md,
|
|
);
|
|
|
|
/// Button font size
|
|
static const double fontSize = 16.0;
|
|
|
|
/// Button font weight
|
|
static const FontWeight fontWeight = FontWeight.w600;
|
|
}
|
|
|
|
/// Input field specifications
|
|
class InputFieldSpecs {
|
|
InputFieldSpecs._();
|
|
|
|
/// Input field height
|
|
static const double height = 56.0;
|
|
|
|
/// Input field border radius
|
|
static const double borderRadius = AppRadius.input;
|
|
|
|
/// Input field content padding
|
|
static const EdgeInsets contentPadding = EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.md,
|
|
vertical: AppSpacing.md,
|
|
);
|
|
|
|
/// Input field font size
|
|
static const double fontSize = 16.0;
|
|
|
|
/// Label font size
|
|
static const double labelFontSize = 14.0;
|
|
|
|
/// Hint font size
|
|
static const double hintFontSize = 14.0;
|
|
}
|
|
|
|
/// Card specifications
|
|
class CardSpecs {
|
|
CardSpecs._();
|
|
|
|
/// Card border radius
|
|
static const double borderRadius = AppRadius.card;
|
|
|
|
/// Card elevation
|
|
static const double elevation = AppElevation.card;
|
|
|
|
/// Card padding
|
|
static const EdgeInsets padding = EdgeInsets.all(AppSpacing.md);
|
|
|
|
/// Card margin
|
|
static const EdgeInsets margin = EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.md,
|
|
vertical: AppSpacing.sm,
|
|
);
|
|
}
|
|
|
|
/// Product card specifications
|
|
class ProductCardSpecs {
|
|
ProductCardSpecs._();
|
|
|
|
/// Product image aspect ratio (width / height)
|
|
static const double imageAspectRatio = 1.0;
|
|
|
|
/// Product card border radius
|
|
static const double borderRadius = AppRadius.card;
|
|
|
|
/// Product card elevation
|
|
static const double elevation = AppElevation.card;
|
|
|
|
/// Product card padding
|
|
static const EdgeInsets padding = EdgeInsets.all(AppSpacing.sm);
|
|
|
|
/// Product name max lines
|
|
static const int nameMaxLines = 2;
|
|
|
|
/// Product name font size
|
|
static const double nameFontSize = 14.0;
|
|
|
|
/// Product price font size
|
|
static const double priceFontSize = 16.0;
|
|
|
|
/// Product price font weight
|
|
static const FontWeight priceFontWeight = FontWeight.bold;
|
|
}
|
|
|
|
/// Order card specifications
|
|
class OrderCardSpecs {
|
|
OrderCardSpecs._();
|
|
|
|
/// Order number font size
|
|
static const double orderNumberFontSize = 16.0;
|
|
|
|
/// Order number font weight
|
|
static const FontWeight orderNumberFontWeight = FontWeight.w600;
|
|
|
|
/// Order date font size
|
|
static const double dateFontSize = 12.0;
|
|
|
|
/// Order total font size
|
|
static const double totalFontSize = 18.0;
|
|
|
|
/// Order total font weight
|
|
static const FontWeight totalFontWeight = FontWeight.bold;
|
|
}
|
|
|
|
/// Status badge specifications
|
|
class StatusBadgeSpecs {
|
|
StatusBadgeSpecs._();
|
|
|
|
/// Badge height
|
|
static const double height = 24.0;
|
|
|
|
/// Badge border radius
|
|
static const double borderRadius = 12.0;
|
|
|
|
/// Badge padding
|
|
static const EdgeInsets padding = EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.sm,
|
|
vertical: 2.0,
|
|
);
|
|
|
|
/// Badge font size
|
|
static const double fontSize = 11.0;
|
|
|
|
/// Badge font weight
|
|
static const FontWeight fontWeight = FontWeight.w600;
|
|
}
|
|
|
|
/// Avatar specifications
|
|
class AvatarSpecs {
|
|
AvatarSpecs._();
|
|
|
|
/// Small avatar size
|
|
static const double sm = 32.0;
|
|
|
|
/// Medium avatar size
|
|
static const double md = 48.0;
|
|
|
|
/// Large avatar size
|
|
static const double lg = 64.0;
|
|
|
|
/// Extra large avatar size
|
|
static const double xl = 96.0;
|
|
}
|
|
|
|
/// Animation durations
|
|
class AppDuration {
|
|
AppDuration._();
|
|
|
|
/// Short animation: 200ms
|
|
static const Duration short = Duration(milliseconds: 200);
|
|
|
|
/// Medium animation: 300ms
|
|
static const Duration medium = Duration(milliseconds: 300);
|
|
|
|
/// Long animation: 500ms
|
|
static const Duration long = Duration(milliseconds: 500);
|
|
|
|
/// Page transition duration
|
|
static const Duration pageTransition = medium;
|
|
|
|
/// Fade in duration
|
|
static const Duration fadeIn = medium;
|
|
|
|
/// Shimmer animation duration
|
|
static const Duration shimmer = Duration(milliseconds: 1500);
|
|
}
|
|
|
|
/// Grid specifications
|
|
class GridSpecs {
|
|
GridSpecs._();
|
|
|
|
/// Product grid cross axis count (columns)
|
|
static const int productGridColumns = 2;
|
|
|
|
/// Product grid cross axis spacing
|
|
static const double productGridCrossSpacing = AppSpacing.xs;
|
|
|
|
/// Product grid main axis spacing
|
|
static const double productGridMainSpacing = AppSpacing.xs;
|
|
|
|
/// Quick action grid cross axis count
|
|
static const int quickActionColumns = 3;
|
|
|
|
/// Quick action grid cross axis spacing
|
|
static const double quickActionCrossSpacing = AppSpacing.sm;
|
|
|
|
/// Quick action grid main axis spacing
|
|
static const double quickActionMainSpacing = AppSpacing.sm;
|
|
}
|
|
|
|
/// List specifications
|
|
class ListSpecs {
|
|
ListSpecs._();
|
|
|
|
/// List item padding
|
|
static const EdgeInsets itemPadding = EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.md,
|
|
vertical: AppSpacing.sm,
|
|
);
|
|
|
|
/// List item divider height
|
|
static const double dividerHeight = 1.0;
|
|
|
|
/// List item divider indent
|
|
static const double dividerIndent = AppSpacing.md;
|
|
}
|
|
|
|
/// Image specifications
|
|
class ImageSpecs {
|
|
ImageSpecs._();
|
|
|
|
/// Product image cache width
|
|
static const int productImageCacheWidth = 400;
|
|
|
|
/// Product image cache height
|
|
static const int productImageCacheHeight = 400;
|
|
|
|
/// Avatar image cache width
|
|
static const int avatarImageCacheWidth = 200;
|
|
|
|
/// Avatar image cache height
|
|
static const int avatarImageCacheHeight = 200;
|
|
|
|
/// Banner image cache width
|
|
static const int bannerImageCacheWidth = 800;
|
|
|
|
/// Banner image cache height
|
|
static const int bannerImageCacheHeight = 400;
|
|
}
|
|
|
|
/// Screen breakpoints for responsive design
|
|
class Breakpoints {
|
|
Breakpoints._();
|
|
|
|
/// Small screen (phone)
|
|
static const double sm = 600.0;
|
|
|
|
/// Medium screen (tablet)
|
|
static const double md = 960.0;
|
|
|
|
/// Large screen (desktop)
|
|
static const double lg = 1280.0;
|
|
|
|
/// Extra large screen
|
|
static const double xl = 1920.0;
|
|
}
|