runable
This commit is contained in:
Phuoc Nguyen
467
lib/core/constants/ui_constants.dart
Normal file
467
lib/core/constants/ui_constants.dart
Normal file
@@ -0,0 +1,467 @@
|
||||
/// 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.md;
|
||||
|
||||
/// Product grid main axis spacing
|
||||
static const double productGridMainSpacing = AppSpacing.md;
|
||||
|
||||
/// Quick action grid cross axis count
|
||||
static const int quickActionColumns = 3;
|
||||
|
||||
/// Quick action grid cross axis spacing
|
||||
static const double quickActionCrossSpacing = AppSpacing.md;
|
||||
|
||||
/// Quick action grid main axis spacing
|
||||
static const double quickActionMainSpacing = AppSpacing.md;
|
||||
}
|
||||
|
||||
/// 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;
|
||||
}
|
||||
Reference in New Issue
Block a user