init cc
This commit is contained in:
229
lib/core/theme/app_spacing.dart
Normal file
229
lib/core/theme/app_spacing.dart
Normal file
@@ -0,0 +1,229 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Consistent spacing system following Material 3 guidelines
|
||||
class AppSpacing {
|
||||
// Prevent instantiation
|
||||
AppSpacing._();
|
||||
|
||||
/// Base spacing unit (4dp in Material Design)
|
||||
static const double base = 4.0;
|
||||
|
||||
/// Spacing scale based on Material 3 8dp grid system
|
||||
static const double xs = base; // 4dp
|
||||
static const double sm = base * 2; // 8dp
|
||||
static const double md = base * 3; // 12dp
|
||||
static const double lg = base * 4; // 16dp
|
||||
static const double xl = base * 5; // 20dp
|
||||
static const double xxl = base * 6; // 24dp
|
||||
static const double xxxl = base * 8; // 32dp
|
||||
|
||||
/// Semantic spacing values
|
||||
static const double tiny = xs; // 4dp
|
||||
static const double small = sm; // 8dp
|
||||
static const double medium = lg; // 16dp
|
||||
static const double large = xxl; // 24dp
|
||||
static const double huge = xxxl; // 32dp
|
||||
|
||||
/// Screen margins and padding
|
||||
static const double screenPadding = lg; // 16dp
|
||||
static const double screenPaddingLarge = xxl; // 24dp
|
||||
static const double screenMargin = lg; // 16dp
|
||||
static const double screenMarginLarge = xxl; // 24dp
|
||||
|
||||
/// Card and container spacing
|
||||
static const double cardPadding = lg; // 16dp
|
||||
static const double cardPaddingLarge = xxl; // 24dp
|
||||
static const double cardMargin = sm; // 8dp
|
||||
static const double cardBorderRadius = md; // 12dp
|
||||
static const double cardBorderRadiusLarge = lg; // 16dp
|
||||
|
||||
/// Button spacing
|
||||
static const double buttonPadding = lg; // 16dp
|
||||
static const double buttonPaddingVertical = md; // 12dp
|
||||
static const double buttonPaddingHorizontal = xxl; // 24dp
|
||||
static const double buttonSpacing = sm; // 8dp
|
||||
static const double buttonBorderRadius = md; // 12dp
|
||||
|
||||
/// Icon spacing
|
||||
static const double iconSpacing = sm; // 8dp
|
||||
static const double iconMargin = xs; // 4dp
|
||||
|
||||
/// List item spacing
|
||||
static const double listItemPadding = lg; // 16dp
|
||||
static const double listItemSpacing = sm; // 8dp
|
||||
static const double listItemMargin = xs; // 4dp
|
||||
|
||||
/// Form field spacing
|
||||
static const double fieldSpacing = lg; // 16dp
|
||||
static const double fieldPadding = lg; // 16dp
|
||||
static const double fieldBorderRadius = sm; // 8dp
|
||||
|
||||
/// Component spacing
|
||||
static const double componentSpacing = sm; // 8dp
|
||||
static const double componentMargin = xs; // 4dp
|
||||
static const double componentPadding = md; // 12dp
|
||||
|
||||
/// Divider and border spacing
|
||||
static const double dividerSpacing = lg; // 16dp
|
||||
static const double borderWidth = 1.0;
|
||||
static const double borderWidthThin = 0.5;
|
||||
static const double borderWidthThick = 2.0;
|
||||
|
||||
/// Common EdgeInsets presets
|
||||
static const EdgeInsets paddingXS = EdgeInsets.all(xs);
|
||||
static const EdgeInsets paddingSM = EdgeInsets.all(sm);
|
||||
static const EdgeInsets paddingMD = EdgeInsets.all(md);
|
||||
static const EdgeInsets paddingLG = EdgeInsets.all(lg);
|
||||
static const EdgeInsets paddingXL = EdgeInsets.all(xl);
|
||||
static const EdgeInsets paddingXXL = EdgeInsets.all(xxl);
|
||||
static const EdgeInsets paddingXXXL = EdgeInsets.all(xxxl);
|
||||
|
||||
/// Horizontal padding presets
|
||||
static const EdgeInsets horizontalXS = EdgeInsets.symmetric(horizontal: xs);
|
||||
static const EdgeInsets horizontalSM = EdgeInsets.symmetric(horizontal: sm);
|
||||
static const EdgeInsets horizontalMD = EdgeInsets.symmetric(horizontal: md);
|
||||
static const EdgeInsets horizontalLG = EdgeInsets.symmetric(horizontal: lg);
|
||||
static const EdgeInsets horizontalXL = EdgeInsets.symmetric(horizontal: xl);
|
||||
static const EdgeInsets horizontalXXL = EdgeInsets.symmetric(horizontal: xxl);
|
||||
|
||||
/// Vertical padding presets
|
||||
static const EdgeInsets verticalXS = EdgeInsets.symmetric(vertical: xs);
|
||||
static const EdgeInsets verticalSM = EdgeInsets.symmetric(vertical: sm);
|
||||
static const EdgeInsets verticalMD = EdgeInsets.symmetric(vertical: md);
|
||||
static const EdgeInsets verticalLG = EdgeInsets.symmetric(vertical: lg);
|
||||
static const EdgeInsets verticalXL = EdgeInsets.symmetric(vertical: xl);
|
||||
static const EdgeInsets verticalXXL = EdgeInsets.symmetric(vertical: xxl);
|
||||
|
||||
/// Screen padding presets
|
||||
static const EdgeInsets screenPaddingAll = EdgeInsets.all(screenPadding);
|
||||
static const EdgeInsets screenPaddingHorizontal = EdgeInsets.symmetric(horizontal: screenPadding);
|
||||
static const EdgeInsets screenPaddingVertical = EdgeInsets.symmetric(vertical: screenPadding);
|
||||
|
||||
/// Safe area padding that respects system UI
|
||||
static EdgeInsets safeAreaPadding(BuildContext context) {
|
||||
final mediaQuery = MediaQuery.of(context);
|
||||
return EdgeInsets.only(
|
||||
top: mediaQuery.padding.top + screenPadding,
|
||||
bottom: mediaQuery.padding.bottom + screenPadding,
|
||||
left: mediaQuery.padding.left + screenPadding,
|
||||
right: mediaQuery.padding.right + screenPadding,
|
||||
);
|
||||
}
|
||||
|
||||
/// Responsive padding based on screen size
|
||||
static EdgeInsets responsivePadding(BuildContext context) {
|
||||
final size = MediaQuery.of(context).size;
|
||||
if (size.width < 600) {
|
||||
return screenPaddingAll; // Phone
|
||||
} else if (size.width < 840) {
|
||||
return const EdgeInsets.all(screenPaddingLarge); // Large phone / Small tablet
|
||||
} else {
|
||||
return const EdgeInsets.all(xxxl); // Tablet and larger
|
||||
}
|
||||
}
|
||||
|
||||
/// Responsive horizontal padding
|
||||
static EdgeInsets responsiveHorizontalPadding(BuildContext context) {
|
||||
final size = MediaQuery.of(context).size;
|
||||
if (size.width < 600) {
|
||||
return screenPaddingHorizontal; // Phone
|
||||
} else if (size.width < 840) {
|
||||
return const EdgeInsets.symmetric(horizontal: screenPaddingLarge); // Large phone / Small tablet
|
||||
} else {
|
||||
return const EdgeInsets.symmetric(horizontal: xxxl); // Tablet and larger
|
||||
}
|
||||
}
|
||||
|
||||
/// Common SizedBox presets for spacing
|
||||
static const SizedBox spaceXS = SizedBox(height: xs, width: xs);
|
||||
static const SizedBox spaceSM = SizedBox(height: sm, width: sm);
|
||||
static const SizedBox spaceMD = SizedBox(height: md, width: md);
|
||||
static const SizedBox spaceLG = SizedBox(height: lg, width: lg);
|
||||
static const SizedBox spaceXL = SizedBox(height: xl, width: xl);
|
||||
static const SizedBox spaceXXL = SizedBox(height: xxl, width: xxl);
|
||||
static const SizedBox spaceXXXL = SizedBox(height: xxxl, width: xxxl);
|
||||
|
||||
/// Vertical spacing
|
||||
static const SizedBox verticalSpaceXS = SizedBox(height: xs);
|
||||
static const SizedBox verticalSpaceSM = SizedBox(height: sm);
|
||||
static const SizedBox verticalSpaceMD = SizedBox(height: md);
|
||||
static const SizedBox verticalSpaceLG = SizedBox(height: lg);
|
||||
static const SizedBox verticalSpaceXL = SizedBox(height: xl);
|
||||
static const SizedBox verticalSpaceXXL = SizedBox(height: xxl);
|
||||
static const SizedBox verticalSpaceXXXL = SizedBox(height: xxxl);
|
||||
|
||||
/// Horizontal spacing
|
||||
static const SizedBox horizontalSpaceXS = SizedBox(width: xs);
|
||||
static const SizedBox horizontalSpaceSM = SizedBox(width: sm);
|
||||
static const SizedBox horizontalSpaceMD = SizedBox(width: md);
|
||||
static const SizedBox horizontalSpaceLG = SizedBox(width: lg);
|
||||
static const SizedBox horizontalSpaceXL = SizedBox(width: xl);
|
||||
static const SizedBox horizontalSpaceXXL = SizedBox(width: xxl);
|
||||
static const SizedBox horizontalSpaceXXXL = SizedBox(width: xxxl);
|
||||
|
||||
/// Border radius presets
|
||||
static BorderRadius radiusXS = BorderRadius.circular(xs);
|
||||
static BorderRadius radiusSM = BorderRadius.circular(sm);
|
||||
static BorderRadius radiusMD = BorderRadius.circular(md);
|
||||
static BorderRadius radiusLG = BorderRadius.circular(lg);
|
||||
static BorderRadius radiusXL = BorderRadius.circular(xl);
|
||||
static BorderRadius radiusXXL = BorderRadius.circular(xxl);
|
||||
|
||||
/// Component-specific border radius
|
||||
static BorderRadius get cardRadius => radiusMD;
|
||||
static BorderRadius get buttonRadius => radiusMD;
|
||||
static BorderRadius get fieldRadius => radiusSM;
|
||||
static BorderRadius get dialogRadius => radiusLG;
|
||||
static BorderRadius get sheetRadius => radiusXL;
|
||||
|
||||
/// Animation durations following Material 3
|
||||
static const Duration animationFast = Duration(milliseconds: 100);
|
||||
static const Duration animationNormal = Duration(milliseconds: 200);
|
||||
static const Duration animationSlow = Duration(milliseconds: 300);
|
||||
static const Duration animationSlower = Duration(milliseconds: 500);
|
||||
|
||||
/// Elevation values for Material 3
|
||||
static const double elevationNone = 0;
|
||||
static const double elevationLow = 1;
|
||||
static const double elevationMedium = 3;
|
||||
static const double elevationHigh = 6;
|
||||
static const double elevationHigher = 12;
|
||||
static const double elevationHighest = 24;
|
||||
|
||||
/// Icon sizes
|
||||
static const double iconXS = 16;
|
||||
static const double iconSM = 20;
|
||||
static const double iconMD = 24;
|
||||
static const double iconLG = 32;
|
||||
static const double iconXL = 40;
|
||||
static const double iconXXL = 48;
|
||||
|
||||
/// Button heights following Material 3
|
||||
static const double buttonHeightSmall = 32;
|
||||
static const double buttonHeight = 40;
|
||||
static const double buttonHeightLarge = 56;
|
||||
|
||||
/// Minimum touch target size (accessibility)
|
||||
static const double minTouchTarget = 48;
|
||||
|
||||
/// Breakpoints for responsive design
|
||||
static const double mobileBreakpoint = 600;
|
||||
static const double tabletBreakpoint = 840;
|
||||
static const double desktopBreakpoint = 1200;
|
||||
|
||||
/// Check if screen is mobile
|
||||
static bool isMobile(BuildContext context) {
|
||||
return MediaQuery.of(context).size.width < mobileBreakpoint;
|
||||
}
|
||||
|
||||
/// Check if screen is tablet
|
||||
static bool isTablet(BuildContext context) {
|
||||
final width = MediaQuery.of(context).size.width;
|
||||
return width >= mobileBreakpoint && width < desktopBreakpoint;
|
||||
}
|
||||
|
||||
/// Check if screen is desktop
|
||||
static bool isDesktop(BuildContext context) {
|
||||
return MediaQuery.of(context).size.width >= desktopBreakpoint;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user