mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-11 17:30:00 +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;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,19 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
|
||||
/// Modern Apple TV Glass Container
|
||||
///
|
||||
/// Sophisticated glassmorphism with premium blur effects,
|
||||
/// configurable transparency, and elegant borders.
|
||||
///
|
||||
/// Features:
|
||||
/// - Backdrop blur (iOS-style glass effect)
|
||||
/// - Subtle gradient overlay
|
||||
/// - Premium border styling
|
||||
/// - Shadow system
|
||||
/// - Smooth animations
|
||||
class GlassContainer extends StatelessWidget {
|
||||
final Widget child;
|
||||
final double? width;
|
||||
@@ -9,9 +21,14 @@ class GlassContainer extends StatelessWidget {
|
||||
final EdgeInsetsGeometry padding;
|
||||
final EdgeInsetsGeometry? margin;
|
||||
final double borderRadius;
|
||||
final double opacity;
|
||||
final double? opacity;
|
||||
final Color? backgroundColor;
|
||||
final Color? borderColor;
|
||||
final bool border;
|
||||
final bool hasBorder;
|
||||
final double borderWidth;
|
||||
final bool showShadow;
|
||||
final double blur;
|
||||
final bool showGradient;
|
||||
|
||||
const GlassContainer({
|
||||
super.key,
|
||||
@@ -21,13 +38,23 @@ class GlassContainer extends StatelessWidget {
|
||||
this.padding = const EdgeInsets.all(16),
|
||||
this.margin,
|
||||
this.borderRadius = 16.0,
|
||||
this.opacity = 0.6,
|
||||
this.opacity,
|
||||
this.backgroundColor,
|
||||
this.borderColor,
|
||||
this.border = true,
|
||||
this.hasBorder = true,
|
||||
this.borderWidth = 1.0,
|
||||
this.showShadow = true,
|
||||
this.blur = 15.0,
|
||||
this.showGradient = true,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final finalOpacity = opacity ?? 0.08;
|
||||
final finalBgColor = backgroundColor ?? AppColors.glassBackground;
|
||||
final finalBorderColor = borderColor ?? AppColors.glassBorder;
|
||||
|
||||
return Container(
|
||||
width: width,
|
||||
height: height,
|
||||
@@ -35,32 +62,45 @@ class GlassContainer extends StatelessWidget {
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
|
||||
filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
|
||||
child: Container(
|
||||
padding: padding,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
border: border
|
||||
? Border.all(
|
||||
color: borderColor ?? Colors.white.withOpacity(0.1),
|
||||
width: 1,
|
||||
// Subtle gradient overlay for depth
|
||||
gradient: showGradient
|
||||
? LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
finalBgColor.withOpacity(finalOpacity * 1.2),
|
||||
finalBgColor.withOpacity(finalOpacity * 0.6),
|
||||
],
|
||||
)
|
||||
: null,
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
AppColors.surface.withOpacity(opacity),
|
||||
AppColors.surface.withOpacity(opacity * 0.5),
|
||||
],
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.2),
|
||||
blurRadius: 20,
|
||||
spreadRadius: -5,
|
||||
),
|
||||
],
|
||||
border: hasBorder
|
||||
? Border.all(
|
||||
color: finalBorderColor,
|
||||
width: borderWidth,
|
||||
)
|
||||
: null,
|
||||
// Premium shadow
|
||||
boxShadow: showShadow
|
||||
? [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.15),
|
||||
blurRadius: 24,
|
||||
spreadRadius: -6,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.08),
|
||||
blurRadius: 12,
|
||||
spreadRadius: -3,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
]
|
||||
: [],
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
@@ -69,3 +109,122 @@ class GlassContainer extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Premium Glass Card - Full-featured variant
|
||||
class GlassCard extends StatefulWidget {
|
||||
final Widget child;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onLongPress;
|
||||
final EdgeInsetsGeometry padding;
|
||||
final EdgeInsetsGeometry? margin;
|
||||
final double borderRadius;
|
||||
final bool interactive;
|
||||
final bool isLoading;
|
||||
|
||||
const GlassCard({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.onTap,
|
||||
this.onLongPress,
|
||||
this.padding = const EdgeInsets.all(16),
|
||||
this.margin,
|
||||
this.borderRadius = 16.0,
|
||||
this.interactive = false,
|
||||
this.isLoading = false,
|
||||
});
|
||||
|
||||
@override
|
||||
State<GlassCard> createState() => _GlassCardState();
|
||||
}
|
||||
|
||||
class _GlassCardState extends State<GlassCard>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _controller;
|
||||
late Animation<double> _scaleAnimation;
|
||||
late Animation<double> _opacityAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: AppTheme.durationMd,
|
||||
);
|
||||
|
||||
_scaleAnimation = Tween<double>(begin: 1.0, end: 1.04)
|
||||
.animate(CurvedAnimation(parent: _controller, curve: AppTheme.curveDefault));
|
||||
|
||||
_opacityAnimation = Tween<double>(begin: 1.0, end: 0.8)
|
||||
.animate(CurvedAnimation(parent: _controller, curve: AppTheme.curveDefault));
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onPointerDown(PointerDownEvent event) {
|
||||
if (widget.interactive && widget.onTap != null) {
|
||||
_controller.forward();
|
||||
}
|
||||
}
|
||||
|
||||
void _onPointerUp(PointerUpEvent event) {
|
||||
_controller.reverse();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Widget content = GlassContainer(
|
||||
borderRadius: widget.borderRadius,
|
||||
padding: widget.padding,
|
||||
margin: widget.margin,
|
||||
child: widget.child,
|
||||
);
|
||||
|
||||
if (widget.interactive && widget.onTap != null) {
|
||||
content = MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
child: GestureDetector(
|
||||
onTap: widget.onTap,
|
||||
onLongPress: widget.onLongPress,
|
||||
onTapDown: (_) => _onPointerDown(PointerDownEvent(
|
||||
position: Offset.zero,
|
||||
)),
|
||||
onTapUp: (_) => _onPointerUp(PointerUpEvent(
|
||||
position: Offset.zero,
|
||||
)),
|
||||
onTapCancel: () => _controller.reverse(),
|
||||
child: ScaleTransition(
|
||||
scale: _scaleAnimation,
|
||||
child: Opacity(
|
||||
opacity: _opacityAnimation.value,
|
||||
child: content,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (widget.isLoading) {
|
||||
content = Stack(
|
||||
children: [
|
||||
Opacity(opacity: 0.5, child: content),
|
||||
Center(
|
||||
child: SizedBox(
|
||||
width: 40,
|
||||
height: 40,
|
||||
child: CircularProgressIndicator(
|
||||
color: AppColors.primary,
|
||||
strokeWidth: 2,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
import 'dart:async';
|
||||
import 'package:flutter/material.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import 'glass_container.dart';
|
||||
import 'tv_focusable_card.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
import 'glass_container.dart';
|
||||
|
||||
class HeroCarouselItem {
|
||||
final String id;
|
||||
@@ -12,6 +12,8 @@ class HeroCarouselItem {
|
||||
final String? imageUrl;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onPlay;
|
||||
final Color? accentColor;
|
||||
final String? badge;
|
||||
|
||||
HeroCarouselItem({
|
||||
required this.id,
|
||||
@@ -20,37 +22,395 @@ class HeroCarouselItem {
|
||||
this.imageUrl,
|
||||
this.onTap,
|
||||
this.onPlay,
|
||||
this.accentColor,
|
||||
this.badge,
|
||||
});
|
||||
}
|
||||
|
||||
/// Modern Apple TV Hero Carousel
|
||||
///
|
||||
/// Premium carousel showcasing featured content with:
|
||||
/// - Large background images
|
||||
/// - Smooth transitions
|
||||
/// - Interactive play buttons
|
||||
/// - Animated indicators
|
||||
/// - Focus-aware scaling
|
||||
class HeroCarousel extends StatefulWidget {
|
||||
final List<HeroCarouselItem> items;
|
||||
final bool autoPlay;
|
||||
final Duration autoPlayInterval;
|
||||
final double height;
|
||||
|
||||
const HeroCarousel({
|
||||
super.key,
|
||||
required this.items,
|
||||
this.autoPlay = true,
|
||||
this.autoPlayInterval = const Duration(seconds: 6),
|
||||
this.height = 360,
|
||||
});
|
||||
|
||||
@override
|
||||
State<HeroCarousel> createState() => _HeroCarouselState();
|
||||
}
|
||||
|
||||
class _HeroCarouselState extends State<HeroCarousel> {
|
||||
class _HeroCarouselState extends State<HeroCarousel>
|
||||
with TickerProviderStateMixin {
|
||||
late PageController _pageController;
|
||||
late AnimationController _fadeController;
|
||||
late AnimationController _scaleController;
|
||||
int _currentIndex = 0;
|
||||
Timer? _timer;
|
||||
bool _isHovered = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_pageController = PageController();
|
||||
if (widget.autoPlay) {
|
||||
_pageController = PageController(
|
||||
initialPage: 0,
|
||||
viewportFraction: 1.0,
|
||||
);
|
||||
|
||||
_fadeController = AnimationController(
|
||||
vsync: this,
|
||||
duration: AppTheme.durationLg,
|
||||
);
|
||||
|
||||
_scaleController = AnimationController(
|
||||
vsync: this,
|
||||
duration: AppTheme.durationXl,
|
||||
)..repeat(reverse: true);
|
||||
|
||||
if (widget.autoPlay && widget.items.isNotEmpty) {
|
||||
_startAutoPlay();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_pageController.dispose();
|
||||
_fadeController.dispose();
|
||||
_scaleController.dispose();
|
||||
_timer?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _startAutoPlay() {
|
||||
_timer = Timer.periodic(widget.autoPlayInterval, (timer) {
|
||||
if (mounted) {
|
||||
final nextPage = (_currentIndex + 1) % widget.items.length;
|
||||
_pageController.animateToPage(
|
||||
nextPage,
|
||||
duration: AppTheme.durationLg,
|
||||
curve: AppTheme.curveSmooth,
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
void _stopAutoPlay() {
|
||||
_timer?.cancel();
|
||||
_timer = null;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MouseRegion(
|
||||
onEnter: (_) {
|
||||
setState(() => _isHovered = true);
|
||||
_stopAutoPlay();
|
||||
},
|
||||
onExit: (_) {
|
||||
setState(() => _isHovered = false);
|
||||
if (widget.autoPlay) {
|
||||
_startAutoPlay();
|
||||
}
|
||||
},
|
||||
child: SizedBox(
|
||||
height: widget.height,
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
// ============ PAGE VIEW ============
|
||||
PageView.builder(
|
||||
controller: _pageController,
|
||||
onPageChanged: (index) {
|
||||
setState(() => _currentIndex = index);
|
||||
_fadeController.forward(from: 0.0);
|
||||
},
|
||||
itemCount: widget.items.length,
|
||||
itemBuilder: (context, index) {
|
||||
return _buildCarouselPage(widget.items[index]);
|
||||
},
|
||||
),
|
||||
|
||||
// ============ GRADIENT OVERLAY (Bottom) ============
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 200,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Colors.transparent,
|
||||
AppColors.background.withOpacity(0.6),
|
||||
AppColors.background,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// ============ CONTENT OVERLAY ============
|
||||
Positioned(
|
||||
bottom: 32,
|
||||
left: 32,
|
||||
right: 32,
|
||||
child: FadeTransition(
|
||||
opacity: _fadeController,
|
||||
child: _buildContentOverlay(widget.items[_currentIndex]),
|
||||
),
|
||||
),
|
||||
|
||||
// ============ INDICATORS ============
|
||||
Positioned(
|
||||
bottom: 20,
|
||||
right: 32,
|
||||
child: _buildIndicators(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build carousel page
|
||||
Widget _buildCarouselPage(HeroCarouselItem item) {
|
||||
return Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
// Background image
|
||||
if (item.imageUrl != null && item.imageUrl!.isNotEmpty)
|
||||
Image.network(
|
||||
item.imageUrl!,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return Container(
|
||||
color: AppColors.surface,
|
||||
child: const Center(
|
||||
child: Icon(Icons.broken_image_outlined, size: 64),
|
||||
),
|
||||
);
|
||||
},
|
||||
)
|
||||
else
|
||||
Container(
|
||||
color: AppColors.surface,
|
||||
),
|
||||
|
||||
// Image overlay
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Colors.black.withOpacity(0.3),
|
||||
Colors.black.withOpacity(0.8),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Build content overlay
|
||||
Widget _buildContentOverlay(HeroCarouselItem item) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Badge
|
||||
if (item.badge != null)
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: item.accentColor ?? AppColors.primary,
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusSm),
|
||||
),
|
||||
child: Text(
|
||||
item.badge!,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.black,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 12),
|
||||
|
||||
// Title
|
||||
Text(
|
||||
item.title,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: GoogleFonts.outfit(
|
||||
fontSize: 48,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: AppColors.textPrimary,
|
||||
letterSpacing: -1.0,
|
||||
height: 1.1,
|
||||
),
|
||||
),
|
||||
|
||||
if (item.subtitle != null) ...[
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
item.subtitle!,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.textSecondary,
|
||||
height: 1.4,
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Action buttons
|
||||
if (item.onPlay != null || item.onTap != null)
|
||||
Row(
|
||||
children: [
|
||||
// Play button
|
||||
if (item.onPlay != null)
|
||||
AnimatedScale(
|
||||
scale: _isHovered ? 1.05 : 1.0,
|
||||
duration: AppTheme.durationMd,
|
||||
child: GestureDetector(
|
||||
onTap: item.onPlay,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 24,
|
||||
vertical: 12,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
gradient: AppColors.primaryGradient,
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: (item.accentColor ?? AppColors.primary)
|
||||
.withOpacity(0.4),
|
||||
blurRadius: 16,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(Icons.play_arrow, color: Colors.black),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'Play',
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(width: 16),
|
||||
|
||||
// More info button
|
||||
if (item.onTap != null)
|
||||
GestureDetector(
|
||||
onTap: item.onTap,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 24,
|
||||
vertical: 12,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface.withOpacity(0.8),
|
||||
border: Border.all(
|
||||
color: AppColors.border,
|
||||
width: 1.5,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(Icons.info_outline,
|
||||
color: AppColors.textPrimary),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'More Info',
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Build carousel indicators
|
||||
Widget _buildIndicators() {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: List.generate(
|
||||
widget.items.length,
|
||||
(index) => GestureDetector(
|
||||
onTap: () {
|
||||
_pageController.animateToPage(
|
||||
index,
|
||||
duration: AppTheme.durationMd,
|
||||
curve: AppTheme.curveDefault,
|
||||
);
|
||||
},
|
||||
child: AnimatedContainer(
|
||||
duration: AppTheme.durationMd,
|
||||
curve: AppTheme.curveDefault,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 6),
|
||||
width: _currentIndex == index ? 32 : 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: _currentIndex == index
|
||||
? AppColors.primary
|
||||
: AppColors.border,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void _startAutoPlay() {
|
||||
_timer = Timer.periodic(const Duration(seconds: 8), (timer) {
|
||||
if (_currentIndex < widget.items.length - 1) {
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
|
||||
/// Apple TV Modern Channel Grid
|
||||
///
|
||||
/// Responsive grid layout for channels with:
|
||||
/// - Flexible column count based on screen size
|
||||
/// - Smooth animations
|
||||
/// - Focus-aware spacing
|
||||
class TvChannelGrid extends StatelessWidget {
|
||||
final List<Widget> children;
|
||||
final EdgeInsetsGeometry padding;
|
||||
final double horizontalSpacing;
|
||||
final double verticalSpacing;
|
||||
final ScrollController? scrollController;
|
||||
final ScrollPhysics physics;
|
||||
|
||||
const TvChannelGrid({
|
||||
super.key,
|
||||
required this.children,
|
||||
this.padding = const EdgeInsets.fromLTRB(32, 24, 32, 32),
|
||||
this.horizontalSpacing = 20,
|
||||
this.verticalSpacing = 20,
|
||||
this.scrollController,
|
||||
this.physics = const AlwaysScrollableScrollPhysics(),
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final screenWidth = MediaQuery.of(context).size.width;
|
||||
|
||||
// Responsive column count
|
||||
int columnCount;
|
||||
if (screenWidth > 1920) {
|
||||
columnCount = 6;
|
||||
} else if (screenWidth > 1600) {
|
||||
columnCount = 5;
|
||||
} else if (screenWidth > 1280) {
|
||||
columnCount = 4;
|
||||
} else if (screenWidth > 960) {
|
||||
columnCount = 3;
|
||||
} else {
|
||||
columnCount = 2;
|
||||
}
|
||||
|
||||
return SingleChildScrollView(
|
||||
controller: scrollController,
|
||||
physics: physics,
|
||||
padding: padding,
|
||||
child: Wrap(
|
||||
spacing: horizontalSpacing,
|
||||
runSpacing: verticalSpacing,
|
||||
children: [
|
||||
for (int i = 0; i < children.length; i++)
|
||||
SizedBox(
|
||||
width: (screenWidth -
|
||||
(padding.horizontal) -
|
||||
(horizontalSpacing * (columnCount - 1))) / columnCount,
|
||||
child: children[i],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Apple TV Modern Horizontal Scrollable List
|
||||
class TvHorizontalList extends StatelessWidget {
|
||||
final List<Widget> children;
|
||||
final String? title;
|
||||
final EdgeInsetsGeometry padding;
|
||||
final double itemWidth;
|
||||
final double spacing;
|
||||
final ScrollController? scrollController;
|
||||
|
||||
const TvHorizontalList({
|
||||
super.key,
|
||||
required this.children,
|
||||
this.title,
|
||||
this.padding = const EdgeInsets.symmetric(vertical: 16),
|
||||
this.itemWidth = 200,
|
||||
this.spacing = 16,
|
||||
this.scrollController,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Title
|
||||
if (title != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppTheme.spacing32,
|
||||
vertical: AppTheme.spacing16,
|
||||
),
|
||||
child: Text(
|
||||
title!,
|
||||
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Horizontal list
|
||||
SizedBox(
|
||||
height: 280,
|
||||
child: ListView.separated(
|
||||
controller: scrollController,
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 32,
|
||||
vertical: padding.vertical as double? ?? 0,
|
||||
),
|
||||
itemCount: children.length,
|
||||
separatorBuilder: (_, __) => SizedBox(width: spacing),
|
||||
itemBuilder: (context, index) => SizedBox(
|
||||
width: itemWidth,
|
||||
child: children[index],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,338 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
import 'glass_container.dart';
|
||||
|
||||
/// Apple TV Modern Content Card
|
||||
///
|
||||
/// Premium card for displaying movies, shows, or other content with:
|
||||
/// - Poster image with skeleton loading
|
||||
/// - Title and metadata
|
||||
/// - Rating/score display
|
||||
/// - Interactive hover states
|
||||
/// - Context menu support
|
||||
class TvModernCard extends StatefulWidget {
|
||||
final String id;
|
||||
final String title;
|
||||
final String? imageUrl;
|
||||
final String? rating;
|
||||
final String? year;
|
||||
final String? badge;
|
||||
final Color? badgeColor;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onPlayTap;
|
||||
final VoidCallback? onMoreTap;
|
||||
final bool isWatching;
|
||||
final double? progress;
|
||||
|
||||
const TvModernCard({
|
||||
super.key,
|
||||
required this.id,
|
||||
required this.title,
|
||||
this.imageUrl,
|
||||
this.rating,
|
||||
this.year,
|
||||
this.badge,
|
||||
this.badgeColor,
|
||||
this.onTap,
|
||||
this.onPlayTap,
|
||||
this.onMoreTap,
|
||||
this.isWatching = false,
|
||||
this.progress,
|
||||
});
|
||||
|
||||
@override
|
||||
State<TvModernCard> createState() => _TvModernCardState();
|
||||
}
|
||||
|
||||
class _TvModernCardState extends State<TvModernCard>
|
||||
with SingleTickerProviderStateMixin {
|
||||
bool _isHovered = false;
|
||||
late AnimationController _controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: AppTheme.durationMd,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MouseRegion(
|
||||
onEnter: (_) {
|
||||
setState(() => _isHovered = true);
|
||||
_controller.forward();
|
||||
},
|
||||
onExit: (_) {
|
||||
setState(() => _isHovered = false);
|
||||
_controller.reverse();
|
||||
},
|
||||
child: GestureDetector(
|
||||
onTap: widget.onTap,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// ============ POSTER IMAGE ============
|
||||
AnimatedScale(
|
||||
scale: _isHovered ? 1.06 : 1.0,
|
||||
duration: AppTheme.durationMd,
|
||||
curve: AppTheme.curveDefault,
|
||||
child: GlassCard(
|
||||
borderRadius: AppTheme.radiusLg,
|
||||
padding: EdgeInsets.zero,
|
||||
interactive: true,
|
||||
onTap: widget.onTap,
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
// Poster image
|
||||
_buildPosterImage(),
|
||||
|
||||
// Overlay
|
||||
if (_isHovered)
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Colors.transparent,
|
||||
Colors.black.withOpacity(0.7),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Badge
|
||||
if (widget.badge != null)
|
||||
Positioned(
|
||||
top: 12,
|
||||
right: 12,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: widget.badgeColor ?? AppColors.primary,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: Text(
|
||||
widget.badge!,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.black,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Progress indicator (if watching)
|
||||
if (widget.isWatching && widget.progress != null)
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
height: 3,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.vertical(
|
||||
bottom: Radius.circular(AppTheme.radiusLg),
|
||||
),
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.vertical(
|
||||
bottom: Radius.circular(AppTheme.radiusLg),
|
||||
),
|
||||
child: LinearProgressIndicator(
|
||||
value: widget.progress,
|
||||
backgroundColor: AppColors.surfaceVariant,
|
||||
valueColor: AlwaysStoppedAnimation(
|
||||
AppColors.primary,
|
||||
),
|
||||
minHeight: 3,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Action buttons (on hover)
|
||||
if (_isHovered && (widget.onPlayTap != null || widget.onMoreTap != null))
|
||||
Center(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
if (widget.onPlayTap != null)
|
||||
_buildActionButton(
|
||||
icon: Icons.play_arrow,
|
||||
label: 'Play',
|
||||
onTap: widget.onPlayTap!,
|
||||
),
|
||||
if (widget.onPlayTap != null && widget.onMoreTap != null)
|
||||
const SizedBox(width: 16),
|
||||
if (widget.onMoreTap != null)
|
||||
_buildActionButton(
|
||||
icon: Icons.info_outline,
|
||||
label: 'Info',
|
||||
onTap: widget.onMoreTap!,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 12),
|
||||
|
||||
// ============ METADATA ============
|
||||
// Title
|
||||
Text(
|
||||
widget.title,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
|
||||
// Rating & Year
|
||||
if (widget.rating != null || widget.year != null) ...[
|
||||
const SizedBox(height: 6),
|
||||
Row(
|
||||
children: [
|
||||
if (widget.rating != null) ...[
|
||||
Icon(
|
||||
Icons.star,
|
||||
size: 14,
|
||||
color: AppColors.ratingGold,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
widget.rating!,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
if (widget.rating != null && widget.year != null)
|
||||
const SizedBox(width: 12),
|
||||
if (widget.year != null)
|
||||
Text(
|
||||
widget.year!,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.textTertiary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPosterImage() {
|
||||
if (widget.imageUrl == null || widget.imageUrl!.isEmpty) {
|
||||
return Container(
|
||||
color: AppColors.surface,
|
||||
child: Center(
|
||||
child: Icon(
|
||||
Icons.image_outlined,
|
||||
color: AppColors.textSecondary,
|
||||
size: 48,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return CachedNetworkImage(
|
||||
imageUrl: widget.imageUrl!,
|
||||
fit: BoxFit.cover,
|
||||
placeholder: (context, url) => Container(
|
||||
color: AppColors.shimmer,
|
||||
child: Center(
|
||||
child: SizedBox(
|
||||
width: 40,
|
||||
height: 40,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: AppColors.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
errorWidget: (context, url, error) => Container(
|
||||
color: AppColors.surface,
|
||||
child: Center(
|
||||
child: Icon(
|
||||
Icons.broken_image_outlined,
|
||||
color: AppColors.textSecondary,
|
||||
size: 48,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildActionButton({
|
||||
required IconData icon,
|
||||
required String label,
|
||||
required VoidCallback onTap,
|
||||
}) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.primary,
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColors.primary.withOpacity(0.4),
|
||||
blurRadius: 12,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(icon, color: Colors.black, size: 18),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
label,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,397 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
import 'glass_container.dart';
|
||||
|
||||
/// Apple TV Modern Top Navigation Bar
|
||||
///
|
||||
/// Premium navigation header with:
|
||||
/// - Logo/branding
|
||||
/// - Search integration
|
||||
/// - User menu
|
||||
/// - Glassmorphism effect
|
||||
class TvTopNavBar extends StatefulWidget {
|
||||
final String title;
|
||||
final VoidCallback? onSearch;
|
||||
final VoidCallback? onProfile;
|
||||
final VoidCallback? onNotifications;
|
||||
final int notificationCount;
|
||||
final Widget? leading;
|
||||
final List<Widget>? actions;
|
||||
|
||||
const TvTopNavBar({
|
||||
super.key,
|
||||
required this.title,
|
||||
this.onSearch,
|
||||
this.onProfile,
|
||||
this.onNotifications,
|
||||
this.notificationCount = 0,
|
||||
this.leading,
|
||||
this.actions,
|
||||
});
|
||||
|
||||
@override
|
||||
State<TvTopNavBar> createState() => _TvTopNavBarState();
|
||||
}
|
||||
|
||||
class _TvTopNavBarState extends State<TvTopNavBar> {
|
||||
bool _isHovered = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MouseRegion(
|
||||
onEnter: (_) => setState(() => _isHovered = true),
|
||||
onExit: (_) => setState(() => _isHovered = false),
|
||||
child: GlassContainer(
|
||||
borderRadius: 0,
|
||||
hasBorder: false,
|
||||
showShadow: false,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppTheme.spacing32,
|
||||
vertical: AppTheme.spacing16,
|
||||
),
|
||||
margin: EdgeInsets.zero,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
// Left: Logo + Title
|
||||
Row(
|
||||
children: [
|
||||
if (widget.leading != null) widget.leading!,
|
||||
const SizedBox(width: AppTheme.spacing16),
|
||||
Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.outfit(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
letterSpacing: -0.3,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Right: Actions
|
||||
Row(
|
||||
children: [
|
||||
if (widget.onSearch != null) ...[
|
||||
_buildIconButton(
|
||||
icon: Icons.search,
|
||||
onTap: widget.onSearch!,
|
||||
tooltip: 'Search',
|
||||
),
|
||||
const SizedBox(width: AppTheme.spacing16),
|
||||
],
|
||||
|
||||
if (widget.onNotifications != null) ...[
|
||||
_buildIconButton(
|
||||
icon: Icons.notifications_none,
|
||||
onTap: widget.onNotifications!,
|
||||
tooltip: 'Notifications',
|
||||
badge: widget.notificationCount > 0
|
||||
? widget.notificationCount.toString()
|
||||
: null,
|
||||
),
|
||||
const SizedBox(width: AppTheme.spacing16),
|
||||
],
|
||||
|
||||
if (widget.onProfile != null)
|
||||
_buildIconButton(
|
||||
icon: Icons.account_circle,
|
||||
onTap: widget.onProfile!,
|
||||
tooltip: 'Profile',
|
||||
),
|
||||
|
||||
if (widget.actions != null) ...[
|
||||
const SizedBox(width: AppTheme.spacing16),
|
||||
...widget.actions!,
|
||||
],
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIconButton({
|
||||
required IconData icon,
|
||||
required VoidCallback onTap,
|
||||
required String tooltip,
|
||||
String? badge,
|
||||
}) {
|
||||
return Tooltip(
|
||||
message: tooltip,
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
child: GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
color: _isHovered ? AppColors.surface : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
Icon(
|
||||
icon,
|
||||
color: AppColors.textPrimary,
|
||||
size: 24,
|
||||
),
|
||||
if (badge != null)
|
||||
Positioned(
|
||||
top: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(4),
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColors.error,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Text(
|
||||
badge,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Apple TV Modern Side Navigation
|
||||
///
|
||||
/// Vertical navigation menu with:
|
||||
/// - Window navigation items
|
||||
/// - Collapsible menu
|
||||
/// - Smooth animations
|
||||
/// - Category grouping
|
||||
class TvSideNav extends StatefulWidget {
|
||||
final List<TvNavItem> items;
|
||||
final int selectedIndex;
|
||||
final ValueChanged<int> onItemSelected;
|
||||
final bool expanded;
|
||||
final VoidCallback? onToggleExpanded;
|
||||
|
||||
const TvSideNav({
|
||||
super.key,
|
||||
required this.items,
|
||||
this.selectedIndex = 0,
|
||||
required this.onItemSelected,
|
||||
this.expanded = true,
|
||||
this.onToggleExpanded,
|
||||
});
|
||||
|
||||
@override
|
||||
State<TvSideNav> createState() => _TvSideNavState();
|
||||
}
|
||||
|
||||
class _TvSideNavState extends State<TvSideNav> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GlassContainer(
|
||||
borderRadius: 0,
|
||||
hasBorder: false,
|
||||
showShadow: false,
|
||||
padding: const EdgeInsets.symmetric(vertical: AppTheme.spacing16),
|
||||
margin: EdgeInsets.zero,
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: List.generate(
|
||||
widget.items.length,
|
||||
(index) => _buildNavItem(
|
||||
item: widget.items[index],
|
||||
isSelected: index == widget.selectedIndex,
|
||||
onTap: () => widget.onItemSelected(index),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildNavItem({
|
||||
required TvNavItem item,
|
||||
required bool isSelected,
|
||||
required VoidCallback onTap,
|
||||
}) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppTheme.spacing16,
|
||||
vertical: AppTheme.spacing8,
|
||||
),
|
||||
child: GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppTheme.spacing16,
|
||||
vertical: AppTheme.spacing12,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected ? AppColors.primary : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
|
||||
border: !isSelected
|
||||
? Border.all(color: AppColors.border)
|
||||
: null,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
item.icon,
|
||||
color: isSelected ? Colors.black : AppColors.textSecondary,
|
||||
size: 20,
|
||||
),
|
||||
const SizedBox(width: AppTheme.spacing12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.label,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: isSelected ? Colors.black : AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Navigation item model
|
||||
class TvNavItem {
|
||||
final String label;
|
||||
final IconData icon;
|
||||
final String? badge;
|
||||
|
||||
TvNavItem({
|
||||
required this.label,
|
||||
required this.icon,
|
||||
this.badge,
|
||||
});
|
||||
}
|
||||
|
||||
/// Apple TV Modern Floating Action Menu
|
||||
///
|
||||
/// Context-aware floating menu with:
|
||||
/// - Multiple action buttons
|
||||
/// - Smooth reveal animation
|
||||
/// - Accessible positioning
|
||||
class TvFloatingMenu extends StatefulWidget {
|
||||
final List<TvMenuAction> actions;
|
||||
final VoidCallback? onClose;
|
||||
|
||||
const TvFloatingMenu({
|
||||
super.key,
|
||||
required this.actions,
|
||||
this.onClose,
|
||||
});
|
||||
|
||||
@override
|
||||
State<TvFloatingMenu> createState() => _TvFloatingMenuState();
|
||||
}
|
||||
|
||||
class _TvFloatingMenuState extends State<TvFloatingMenu>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: AppTheme.durationMd,
|
||||
)..forward();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ScaleTransition(
|
||||
scale: _controller,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(AppTheme.spacing12),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
|
||||
border: Border.all(color: AppColors.border),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.3),
|
||||
blurRadius: 24,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: List.generate(
|
||||
widget.actions.length,
|
||||
(index) => GestureDetector(
|
||||
onTap: () {
|
||||
widget.actions[index].onTap?.call();
|
||||
widget.onClose?.call();
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppTheme.spacing16,
|
||||
vertical: AppTheme.spacing12,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
widget.actions[index].icon,
|
||||
color: widget.actions[index].color ?? AppColors.textPrimary,
|
||||
),
|
||||
const SizedBox(width: AppTheme.spacing12),
|
||||
Text(
|
||||
widget.actions[index].label,
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Menu action model
|
||||
class TvMenuAction {
|
||||
final String label;
|
||||
final IconData icon;
|
||||
final Color? color;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
TvMenuAction({
|
||||
required this.label,
|
||||
required this.icon,
|
||||
this.color,
|
||||
this.onTap,
|
||||
});
|
||||
}
|
||||
Reference in new issue
Block a user