mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-15 19:28:16 +02:00
feat: Enhance Apple TV UI components with modern design elements
- Updated ChannelCard widget to include live indicator, favorite button, and EPG information with smooth animations and skeleton loading for images. - Introduced MobileTheme for touch-optimized layouts, adapting Apple TV design principles for mobile screens. - Added TvChannelGrid for responsive channel layouts with flexible column counts and smooth animations. - Created TvModernCard for displaying content with interactive hover states, progress indicators, and context menu support. - Implemented TvTopNavBar and TvSideNav for improved navigation with glassmorphism effects and user-friendly interactions. - Developed TvFloatingMenu for context-aware actions with smooth reveal animations.
This commit is contained in:
GitHub Copilot committed
1 parent
2c4572191d
commit
2ca0c8bf1a
14 files changed
+4578
-201
No files matched your search
+144
-53
@@ -1,98 +1,189 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// XtremFlow Apple TV Style Palette
|
||||
/// XtremFlow Apple TV Modern Palette (tvOS 18+ inspired)
|
||||
///
|
||||
/// Ultra minimalist, focus-driven palette.
|
||||
/// - Background: Pure Black (#000000)
|
||||
/// - Focus/Active: Pure White (#FFFFFF)
|
||||
/// - Inactive: Grey (#9E9E9E)
|
||||
/// - Glass: Heavy blur with low opacity
|
||||
/// Premium, sophisticated color system designed for immersive TV viewing.
|
||||
/// - Dark foundation with subtle greys
|
||||
/// - Vibrant accent colors for focus states
|
||||
/// - Rich glassmorphism effects
|
||||
/// - Category-specific semantic colors
|
||||
class AppColors {
|
||||
AppColors._();
|
||||
|
||||
// ============ BACKGROUNDS ============
|
||||
/// Pure black for that infinite depth look (OLED friendly)
|
||||
static const Color background = Color(0xFF0F1014); // Deepest Blue-Black
|
||||
/// Pure black background - OLED optimized
|
||||
static const Color background = Color(0xFF000000);
|
||||
|
||||
/// Very deep grey for surfaces that need to be distinct but subtle (Apple Dark Grey)
|
||||
static const Color surface = Color(0xFF181920);
|
||||
/// Primary dark surface for cards/containers
|
||||
static const Color surface = Color(0xFF1C1C1E);
|
||||
|
||||
/// Slightly lighter grey for secondary surfaces or hover states
|
||||
static const Color surfaceVariant = Color(0xFF1E2028);
|
||||
/// Secondary surface - slightly lighter for hierarchy
|
||||
static const Color surfaceVariant = Color(0xFF2A2A2E);
|
||||
|
||||
static const Color surfaceGlass =
|
||||
Color(0x1AFFFFFF); // 10% White for glass effect
|
||||
/// Tertiary surface - subtle depth
|
||||
static const Color surfaceTertiary = Color(0xFF383838);
|
||||
|
||||
/// Focused element background (often white in tvOS for text, or bright accent)
|
||||
static const Color focusColor = Color(0xFFFFFFFF);
|
||||
static const Color border = Color(0xFF1F1F1F);
|
||||
/// Glass effect overlay
|
||||
static const Color surfaceGlass = Color(0x0DFFFFFF);
|
||||
|
||||
/// Glass border subtle line
|
||||
static const Color border = Color(0xFF3A3A3C);
|
||||
static const Color borderLight = Color(0xFF5A5A5C);
|
||||
static const Color focusBorder = Color(0xFFFFFFFF);
|
||||
|
||||
// ============ ACCENTS ============
|
||||
static const Color primary = Color(0xFF6C63FF);
|
||||
static const Color secondary = Color(0xFF00B4D8);
|
||||
static const Color accent = Color(0xFF00B4D8);
|
||||
// ============ PRIMARY ACCENTS ============
|
||||
/// Main brand color - vibrant and attention-grabbing
|
||||
static const Color primary = Color(0xFF00D4FF); // Cyan/Sky Blue
|
||||
|
||||
/// Primary Gradient (Electric Violet to Cyan)
|
||||
/// Secondary accent for variety
|
||||
static const Color secondary = Color(0xFFFF6B6B); // Soft Red
|
||||
|
||||
/// Tertiary accent for highlights
|
||||
static const Color tertiary = Color(0xFF00E5BB); // Mint
|
||||
|
||||
/// Main accent for focused elements
|
||||
static const Color accent = Color(0xFF00D4FF);
|
||||
|
||||
/// Focus/interactive state - white
|
||||
static const Color focusColor = Color(0xFFFFFFFF);
|
||||
|
||||
// ============ GRADIENTS ============
|
||||
/// Primary action gradient
|
||||
static const LinearGradient primaryGradient = LinearGradient(
|
||||
colors: [Color(0xFF6C63FF), Color(0xFF00B4D8)],
|
||||
colors: [Color(0xFF00D4FF), Color(0xFF00E5BB)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
|
||||
/// Background subtle gradient
|
||||
static const LinearGradient backgroundGradient = LinearGradient(
|
||||
colors: [Color(0xFF0F1014), Color(0xFF131418)],
|
||||
colors: [Color(0xFF000000), Color(0xFF0A0A0A)],
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
);
|
||||
|
||||
// Status Colors
|
||||
static const Color success = Color(0xFF00E676);
|
||||
static const Color warning = Color(0xFFFFAB00);
|
||||
static const Color error = Color(0xFFFF5252);
|
||||
static const Color info = Color(0xFF2979FF);
|
||||
/// Success-to-info gradient
|
||||
static const LinearGradient successGradient = LinearGradient(
|
||||
colors: [Color(0xFF00E5BB), Color(0xFF00D4FF)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
|
||||
// Content Colors
|
||||
/// Premium gradient for hero elements
|
||||
static const LinearGradient premiumGradient = LinearGradient(
|
||||
colors: [Color(0xFFFF6B6B), Color(0xFFFFB347)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
|
||||
// ============ SEMANTIC COLORS ============
|
||||
/// Success state - green
|
||||
static const Color success = Color(0xFF34C759);
|
||||
|
||||
/// Warning state - orange/amber
|
||||
static const Color warning = Color(0xFFFF9500);
|
||||
|
||||
/// Error state - red
|
||||
static const Color error = Color(0xFFFF3B30);
|
||||
|
||||
/// Info state - blue
|
||||
static const Color info = Color(0xFF30B0C0);
|
||||
|
||||
/// Neutral/disabled state
|
||||
static const Color disabled = Color(0xFF8E8E93);
|
||||
|
||||
// ============ TEXT HIERARCHY ============
|
||||
/// Primary text - white
|
||||
static const Color textPrimary = Color(0xFFFFFFFF);
|
||||
static const Color textSecondary = Color(0xFFAAAAAA);
|
||||
|
||||
/// Secondary text - light grey (60%)
|
||||
static const Color textSecondary = Color(0xFF999999);
|
||||
|
||||
/// Tertiary text - medium grey (40%)
|
||||
static const Color textTertiary = Color(0xFF666666);
|
||||
|
||||
static const Color ratingGold = Color(0xFFFFD700);
|
||||
static const Color premiumGold = Color(0xFFFFA000);
|
||||
/// Quaternary text - dark grey (25%)
|
||||
static const Color textQuaternary = Color(0xFF404040);
|
||||
|
||||
// Category Colors
|
||||
static const Color live = Color(0xFFFF5252); // Red
|
||||
static const Color movies = Color(0xFF448AFF); // Blue
|
||||
static const Color series = Color(0xFF69F0AE); // Green
|
||||
// ============ CATEGORY COLORS ============
|
||||
/// Live content - bright red
|
||||
static const Color live = Color(0xFFFF3B30);
|
||||
|
||||
// ============ GLASSMORPHISM ============
|
||||
// Apple TV uses this heavily for headers/overlays
|
||||
static final Color glassBackground = const Color(0xFF1E1E1E).withOpacity(0.6);
|
||||
/// Movies content - electric blue
|
||||
static const Color movies = Color(0xFF00B4E8);
|
||||
|
||||
/// Series content - mint green
|
||||
static const Color series = Color(0xFF00E5BB);
|
||||
|
||||
/// Sports content - purple
|
||||
static const Color sports = Color(0xFFBF5AF0);
|
||||
|
||||
/// News content - yellow
|
||||
static const Color news = Color(0xFFFFC300);
|
||||
|
||||
/// Music content - pink
|
||||
static const Color music = Color(0xFFFF2D55);
|
||||
|
||||
// ============ RATINGS ============
|
||||
/// IMDb-style gold for ratings
|
||||
static const Color ratingGold = Color(0xFFFDB913);
|
||||
|
||||
/// Premium/VIP gold
|
||||
static const Color premiumGold = Color(0xFFFFD700);
|
||||
|
||||
/// Trending gradient
|
||||
static const LinearGradient trendingGradient = LinearGradient(
|
||||
colors: [Color(0xFFFF6B6B), Color(0xFFFF8E53)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
|
||||
// ============ GLASS EFFECTS ============
|
||||
/// Glass background - frozen white at 20% opacity
|
||||
static final Color glassBackground = const Color(0xFFFFFFFF).withOpacity(0.08);
|
||||
|
||||
/// Glass border - white line at 15% opacity
|
||||
static final Color glassBorder = const Color(0xFFFFFFFF).withOpacity(0.15);
|
||||
|
||||
/// Dark glass - for overlays
|
||||
static final Color glassBackgroundDark = const Color(0xFF000000).withOpacity(0.5);
|
||||
|
||||
/// Premium glass - stronger visibility
|
||||
static final Color glassPremium = const Color(0xFFFFFFFF).withOpacity(0.12);
|
||||
|
||||
// ============ OVERLAY COLORS ============
|
||||
/// Overlay for modals/dialogs
|
||||
static const Color overlay = Color(0x80000000);
|
||||
|
||||
/// Scrim color
|
||||
static final Color scrim = Colors.black.withOpacity(0.4);
|
||||
|
||||
/// Loading shimmer color
|
||||
static const Color shimmer = Color(0xFF2A2A2E);
|
||||
|
||||
// ============ THEME SCHEMES ============
|
||||
/// Dark mode color scheme (main)
|
||||
static ColorScheme get darkColorScheme => const ColorScheme.dark(
|
||||
primary: primary,
|
||||
secondary: accent,
|
||||
onPrimary: Color(0xFF000000),
|
||||
secondary: secondary,
|
||||
onSecondary: Color(0xFFFFFFFF),
|
||||
tertiary: tertiary,
|
||||
onTertiary: Color(0xFF000000),
|
||||
surface: surface,
|
||||
error: error,
|
||||
onPrimary: Colors
|
||||
.black, // White text on buttons -> Black text on White buttons
|
||||
onSecondary: Colors.black,
|
||||
onSurface: textPrimary,
|
||||
onError: Colors.white,
|
||||
error: error,
|
||||
onError: Color(0xFFFFFFFF),
|
||||
brightness: Brightness.dark,
|
||||
scrim: overlay,
|
||||
);
|
||||
|
||||
/// Light mode color scheme (fallback)
|
||||
static ColorScheme get lightColorScheme => const ColorScheme.light(
|
||||
primary: Colors.black,
|
||||
secondary: Colors.grey,
|
||||
surface: Color(0xFFF2F2F7),
|
||||
primary: Color(0xFF0084FF),
|
||||
secondary: Color(0xFFFF3B30),
|
||||
surface: Color(0xFFFAFAFA),
|
||||
error: error,
|
||||
onPrimary: Colors.white,
|
||||
onSecondary: Colors.white,
|
||||
onSurface: Colors.black,
|
||||
onError: Colors.white,
|
||||
brightness: Brightness.light,
|
||||
);
|
||||
}
|
||||
+379
-63
@@ -2,180 +2,496 @@ import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'app_colors.dart';
|
||||
|
||||
/// XtremFlow Apple TV Theme
|
||||
/// XtremFlow Apple TV Modern Theme
|
||||
///
|
||||
/// Focus-driven, immersive, minimal.
|
||||
/// Premium, immersive design system based on tvOS 18+
|
||||
/// - Focus-driven interactions
|
||||
/// - Sophisticated glassmorphism
|
||||
/// - Rich typography hierarchy
|
||||
/// - Cinematic animations
|
||||
class AppTheme {
|
||||
AppTheme._();
|
||||
|
||||
// ============ SPACING ============
|
||||
// ============ SPACING (8pt system) ============
|
||||
static const double spacing2 = 2.0;
|
||||
static const double spacing4 = 4.0;
|
||||
static const double spacing8 = 8.0;
|
||||
static const double spacing12 = 12.0;
|
||||
static const double spacing16 = 16.0;
|
||||
static const double spacing20 = 20.0;
|
||||
static const double spacing24 = 24.0;
|
||||
static const double spacing32 = 32.0;
|
||||
static const double spacing48 = 48.0; // Larger spacing for TV feel
|
||||
static const double spacing40 = 40.0;
|
||||
static const double spacing48 = 48.0;
|
||||
static const double spacing56 = 56.0;
|
||||
static const double spacing64 = 64.0;
|
||||
|
||||
// ============ RADIUS ============
|
||||
// ============ RADIUS ============
|
||||
// ============ RADIUS (modern, organic curves) ============
|
||||
static const double radiusXs = 4.0;
|
||||
static const double radiusSm = 8.0;
|
||||
static const double radiusMd = 12.0;
|
||||
static const double radiusLg = 20.0;
|
||||
static const double radiusXl = 32.0;
|
||||
static const double radiusLg = 16.0;
|
||||
static const double radiusXl = 24.0;
|
||||
static const double radiusXxl = 32.0;
|
||||
static const double radiusFull = 999.0;
|
||||
|
||||
// ============ ANIMATION ============
|
||||
static const Duration durationFast = Duration(milliseconds: 200);
|
||||
static const Duration durationNormal = Duration(milliseconds: 300);
|
||||
static const Curve curveDefault =
|
||||
Curves.fastOutSlowIn; // Apple-like snappy curve
|
||||
// ============ ELEVATION (Shadow system) ============
|
||||
static const double elevationXs = 2.0;
|
||||
static const double elevationSm = 4.0;
|
||||
static const double elevationMd = 8.0;
|
||||
static const double elevationLg = 16.0;
|
||||
static const double elevationXl = 24.0;
|
||||
|
||||
// ============ ANIMATION (cinematic timing) ============
|
||||
static const Duration durationXs = Duration(milliseconds: 100);
|
||||
static const Duration durationSm = Duration(milliseconds: 150);
|
||||
static const Duration durationBase = Duration(milliseconds: 200);
|
||||
static const Duration durationMd = Duration(milliseconds: 300);
|
||||
static const Duration durationLg = Duration(milliseconds: 400);
|
||||
static const Duration durationXl = Duration(milliseconds: 600);
|
||||
|
||||
// Curves
|
||||
static const Curve curveDefault = Curves.easeInOutCubic;
|
||||
static const Curve curveSnappy = Curves.fastOutSlowIn;
|
||||
static const Curve curveSmooth = Curves.easeOutCubic;
|
||||
static const Curve curveBouncy = Curves.elasticOut;
|
||||
|
||||
// ============ DARK THEME (TV Main) ============
|
||||
static ThemeData get darkTheme {
|
||||
final baseTheme = ThemeData.dark(useMaterial3: true);
|
||||
|
||||
return baseTheme.copyWith(
|
||||
useMaterial3: true,
|
||||
colorScheme: AppColors.darkColorScheme,
|
||||
scaffoldBackgroundColor: AppColors.background,
|
||||
canvasColor: AppColors.background,
|
||||
|
||||
// Typography: "Cinematic Modern" (Outfit for Headings, Inter for UI)
|
||||
// ============ TYPOGRAPHY ============
|
||||
// Premium font stack: SF Pro Display → Outfit → Inter
|
||||
textTheme: TextTheme(
|
||||
// Display - Hero/Large titles (cinema billboards)
|
||||
displayLarge: GoogleFonts.outfit(
|
||||
fontSize: 56,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -1.0,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -1.5,
|
||||
height: 1.1,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Display Medium - Section titles (featured content)
|
||||
displayMedium: GoogleFonts.outfit(
|
||||
fontSize: 48,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -0.5,
|
||||
letterSpacing: -1.0,
|
||||
height: 1.15,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Display Small - Sub-titles
|
||||
displaySmall: GoogleFonts.outfit(
|
||||
fontSize: 32,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 36,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -0.5,
|
||||
height: 1.2,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Headline Medium - Card titles, prominent labels
|
||||
headlineMedium: GoogleFonts.outfit(
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -0.3,
|
||||
height: 1.25,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Headline Small - Smaller headings
|
||||
headlineSmall: GoogleFonts.outfit(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.2,
|
||||
height: 1.3,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Title Large - Labels, emphasis text
|
||||
titleLarge: GoogleFonts.outfit(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.1,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Title Medium - UI elements
|
||||
titleMedium: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Title Small - Secondary labels
|
||||
titleSmall: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.1,
|
||||
height: 1.4,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
|
||||
// Body Large - Primary body text
|
||||
bodyLarge: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.2,
|
||||
height: 1.5,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
|
||||
// Body Medium - Standard body text
|
||||
bodyMedium: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.2,
|
||||
height: 1.5,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
|
||||
// Body Small - Secondary text
|
||||
bodySmall: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.3,
|
||||
height: 1.5,
|
||||
color: AppColors.textTertiary,
|
||||
),
|
||||
|
||||
// Label Large - Button text, prominent labels
|
||||
labelLarge: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 0.2,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Label Medium - Secondary buttons
|
||||
labelMedium: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.3,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Label Small - Badge/tags
|
||||
labelSmall: GoogleFonts.inter(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.5,
|
||||
height: 1.4,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
|
||||
// AppBar: Transparent / Glass
|
||||
// ============ APP BAR ============
|
||||
appBarTheme: AppBarTheme(
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: AppColors.textPrimary,
|
||||
elevation: 0,
|
||||
centerTitle: true,
|
||||
scrolledUnderElevation: 0,
|
||||
centerTitle: true,
|
||||
titleTextStyle: GoogleFonts.outfit(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
letterSpacing: -0.3,
|
||||
),
|
||||
),
|
||||
|
||||
// Inputs: Dark, minimal, no borders unless focused
|
||||
// ============ INPUTS (Search, filters, etc) ============
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
filled: true,
|
||||
fillColor: AppColors.surface,
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: spacing24,
|
||||
vertical: spacing16,
|
||||
),
|
||||
contentPadding:
|
||||
const EdgeInsets.symmetric(horizontal: spacing16, vertical: spacing14),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
borderSide: BorderSide.none,
|
||||
borderSide: const BorderSide(color: AppColors.border),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
borderSide: BorderSide.none,
|
||||
borderSide: const BorderSide(color: AppColors.border, width: 1.5),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
borderSide: const BorderSide(color: AppColors.focusColor, width: 2),
|
||||
borderSide:
|
||||
const BorderSide(color: AppColors.primary, width: 2.0),
|
||||
),
|
||||
hintStyle: GoogleFonts.inter(color: AppColors.textTertiary),
|
||||
hintStyle: GoogleFonts.inter(
|
||||
color: AppColors.textTertiary,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
prefixIconColor: AppColors.textSecondary,
|
||||
suffixIconColor: AppColors.textSecondary,
|
||||
),
|
||||
|
||||
// Buttons: White pill or minimal text
|
||||
// ============ BUTTONS ============
|
||||
filledButtonTheme: FilledButtonThemeData(
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: AppColors.focusColor, // White buttons
|
||||
foregroundColor: Colors.black, // Black text
|
||||
backgroundColor: AppColors.primary,
|
||||
foregroundColor: AppColors.textPrimary,
|
||||
disabledBackgroundColor: AppColors.disabled,
|
||||
disabledForegroundColor: AppColors.textTertiary,
|
||||
elevation: 0,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: spacing24, vertical: spacing12),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
),
|
||||
textStyle:
|
||||
GoogleFonts.inter(fontWeight: FontWeight.w600, fontSize: 16),
|
||||
textStyle: GoogleFonts.inter(
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 16,
|
||||
letterSpacing: 0.1,
|
||||
),
|
||||
).copyWith(
|
||||
overlayColor: WidgetStateProperty.resolveWith((states) {
|
||||
if (states.contains(WidgetState.hovered)) {
|
||||
return Colors.black.withOpacity(0.1);
|
||||
return AppColors.accent.withOpacity(0.2);
|
||||
}
|
||||
if (states.contains(WidgetState.pressed)) {
|
||||
return Colors.black.withOpacity(0.2);
|
||||
return AppColors.accent.withOpacity(0.4);
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
),
|
||||
),
|
||||
|
||||
// Cards: Transparent by default (content defines look)
|
||||
// cardTheme: const CardTheme(
|
||||
// color: AppColors.surface,
|
||||
// elevation: 0,
|
||||
// margin: EdgeInsets.zero,
|
||||
// shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(radiusMd))),
|
||||
// ),
|
||||
// Outline buttons
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: AppColors.primary,
|
||||
side: const BorderSide(color: AppColors.primary, width: 1.5),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
),
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: spacing20, vertical: spacing10),
|
||||
textStyle: GoogleFonts.inter(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Dialogs: Glass/Dark
|
||||
// dialogTheme: DialogTheme(
|
||||
// backgroundColor: const Color(0xFF1C1C1E), // Apple Dark Grey
|
||||
// elevation: 24,
|
||||
// shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(radiusLg)),
|
||||
// titleTextStyle: GoogleFonts.inter(fontSize: 20, fontWeight: FontWeight.bold, color: AppColors.textPrimary),
|
||||
// contentTextStyle: GoogleFonts.inter(fontSize: 16, color: AppColors.textSecondary),
|
||||
// ),
|
||||
// Text buttons
|
||||
textButtonTheme: TextButtonThemeData(
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: AppColors.primary,
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: spacing16, vertical: spacing8),
|
||||
textStyle: GoogleFonts.inter(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// ============ CARDS ============
|
||||
cardTheme: CardTheme(
|
||||
color: AppColors.surface,
|
||||
elevation: 0,
|
||||
margin: EdgeInsets.zero,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusLg),
|
||||
side: const BorderSide(color: AppColors.border, width: 1),
|
||||
),
|
||||
),
|
||||
|
||||
// ============ DIALOGS & BOTTOM SHEETS ============
|
||||
dialogTheme: DialogTheme(
|
||||
backgroundColor: AppColors.surface,
|
||||
elevation: elevationXl,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusXl),
|
||||
),
|
||||
titleTextStyle: GoogleFonts.outfit(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
contentTextStyle: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
|
||||
bottomSheetTheme: const BottomSheetThemeData(
|
||||
backgroundColor: AppColors.surface,
|
||||
elevation: elevationLg,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(radiusXl),
|
||||
topRight: Radius.circular(radiusXl),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// ============ CHIPS ============
|
||||
chipTheme: ChipThemeData(
|
||||
backgroundColor: AppColors.surfaceVariant,
|
||||
disabledColor: AppColors.surfaceTertiary,
|
||||
selectedColor: AppColors.primary,
|
||||
labelStyle: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
secondaryLabelStyle: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: spacing12, vertical: spacing8),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
side: const BorderSide(color: AppColors.border),
|
||||
),
|
||||
),
|
||||
|
||||
// ============ SNACKBAR ============
|
||||
snackBarTheme: SnackBarThemeData(
|
||||
backgroundColor: AppColors.surfaceTertiary,
|
||||
contentTextStyle: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
elevation: elevationMd,
|
||||
),
|
||||
|
||||
// ============ PROGRESS INDICATORS ============
|
||||
progressIndicatorTheme: const ProgressIndicatorThemeData(
|
||||
color: AppColors.primary,
|
||||
linearTrackColor: AppColors.surfaceVariant,
|
||||
circularTrackColor: AppColors.surfaceVariant,
|
||||
),
|
||||
|
||||
// ============ SLIDERS ============
|
||||
sliderTheme: const SliderThemeData(
|
||||
activeTrackColor: AppColors.primary,
|
||||
inactiveTrackColor: AppColors.surfaceVariant,
|
||||
trackHeight: 4.0,
|
||||
thumbColor: AppColors.primary,
|
||||
overlayColor: Color(0x2900D4FF),
|
||||
valueIndicatorColor: AppColors.surfaceTertiary,
|
||||
),
|
||||
|
||||
// ============ DIVIDER ============
|
||||
dividerTheme: const DividerThemeData(
|
||||
color: AppColors.border,
|
||||
thickness: 0.5,
|
||||
space: spacing16,
|
||||
),
|
||||
|
||||
// ============ NAVIGATION ============
|
||||
navigationRailTheme: NavigationRailThemeData(
|
||||
backgroundColor: AppColors.surface,
|
||||
elevation: 0,
|
||||
selectedIconTheme: const IconThemeData(color: AppColors.primary),
|
||||
unselectedIconTheme: const IconThemeData(color: AppColors.textSecondary),
|
||||
),
|
||||
|
||||
// ============ EXTENSIONS ============
|
||||
extensions: <ThemeExtension<dynamic>>[
|
||||
_AppThemeExtension.dark,
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
static const double radiusFull = 999.0;
|
||||
// Light theme (fallback)
|
||||
static ThemeData get lightTheme {
|
||||
final baseTheme = ThemeData.light(useMaterial3: true);
|
||||
|
||||
// Light theme stub
|
||||
static ThemeData get lightTheme =>
|
||||
ThemeData.light(useMaterial3: true).copyWith(
|
||||
colorScheme: AppColors.lightColorScheme,
|
||||
textTheme: GoogleFonts.interTextTheme(ThemeData.light().textTheme),
|
||||
);
|
||||
return baseTheme.copyWith(
|
||||
colorScheme: AppColors.lightColorScheme,
|
||||
scaffoldBackgroundColor: Colors.white,
|
||||
textTheme: GoogleFonts.interTextTheme(baseTheme.textTheme),
|
||||
);
|
||||
}
|
||||
|
||||
// ============ SPACING CONSTANTS (for convenience) ============
|
||||
static const double spacing14 = 14.0;
|
||||
|
||||
// ============ SIZE CONSTANTS ============
|
||||
static const double iconSizeXs = 16.0;
|
||||
static const double iconSizeSm = 20.0;
|
||||
static const double iconSizeMd = 24.0;
|
||||
static const double iconSizeLg = 32.0;
|
||||
static const double iconSizeXl = 48.0;
|
||||
|
||||
static const double buttonHeightSm = 36.0;
|
||||
static const double buttonHeightMd = 44.0;
|
||||
static const double buttonHeightLg = 52.0;
|
||||
|
||||
// ============ ASPECT RATIOS ============
|
||||
static const double posterAspectRatio = 2 / 3;
|
||||
static const double landscapeAspectRatio = 16 / 9;
|
||||
static const double squareAspectRatio = 1.0;
|
||||
}
|
||||
|
||||
/// Extension class for custom theme properties
|
||||
class _AppThemeExtension extends ThemeExtension<_AppThemeExtension> {
|
||||
const _AppThemeExtension({
|
||||
this.glassShadow,
|
||||
this.focusShadow,
|
||||
});
|
||||
|
||||
final List<BoxShadow>? glassShadow;
|
||||
final List<BoxShadow>? focusShadow;
|
||||
|
||||
static _AppThemeExtension get dark => _AppThemeExtension(
|
||||
glassShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.2),
|
||||
blurRadius: 20,
|
||||
spreadRadius: -5,
|
||||
),
|
||||
],
|
||||
focusShadow: [
|
||||
BoxShadow(
|
||||
color: AppColors.primary.withOpacity(0.4),
|
||||
blurRadius: 16,
|
||||
spreadRadius: 2,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
@override
|
||||
ThemeExtension<_AppThemeExtension> copyWith({
|
||||
List<BoxShadow>? glassShadow,
|
||||
List<BoxShadow>? focusShadow,
|
||||
}) {
|
||||
return _AppThemeExtension(
|
||||
glassShadow: glassShadow ?? this.glassShadow,
|
||||
focusShadow: focusShadow ?? this.focusShadow,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
ThemeExtension<_AppThemeExtension> lerp(
|
||||
covariant ThemeExtension<_AppThemeExtension>? other,
|
||||
double t,
|
||||
) {
|
||||
if (other is! _AppThemeExtension) return this;
|
||||
return this;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user