mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-16 11:48:42 +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
@@ -1,10 +1,15 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../../core/theme/app_colors.dart';
|
||||
import '../../core/theme/app_theme.dart';
|
||||
|
||||
/// XtremFlow Mobile Theme
|
||||
///
|
||||
/// Adapted from AppTheme for touch-first screens.
|
||||
/// XtremFlow Mobile Theme (Touch-optimized)
|
||||
///
|
||||
/// Adapted Apple TV Modern design for mobile screens:
|
||||
/// - Larger touch targets (48px minimum)
|
||||
/// - Vertical-first layouts
|
||||
/// - Bottom navigation
|
||||
/// - Mobile-friendly spacing
|
||||
class MobileTheme {
|
||||
MobileTheme._();
|
||||
|
||||
@@ -13,8 +18,9 @@ class MobileTheme {
|
||||
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;
|
||||
|
||||
|
||||
// ============ RADIUS ============
|
||||
static const double radiusSm = 8.0;
|
||||
static const double radiusMd = 12.0;
|
||||
@@ -23,80 +29,284 @@ class MobileTheme {
|
||||
// ============ DARK THEME (Mobile Main) ============
|
||||
static ThemeData get darkTheme {
|
||||
final baseTheme = ThemeData.dark(useMaterial3: true);
|
||||
|
||||
|
||||
return baseTheme.copyWith(
|
||||
useMaterial3: true,
|
||||
colorScheme: AppColors.darkColorScheme,
|
||||
scaffoldBackgroundColor: AppColors.background,
|
||||
|
||||
// Typography: Scaled down for mobile
|
||||
textTheme: TextTheme(
|
||||
displayLarge: GoogleFonts.inter(fontSize: 32, fontWeight: FontWeight.w700, letterSpacing: -1.0, color: AppColors.textPrimary),
|
||||
displayMedium: GoogleFonts.inter(fontSize: 28, fontWeight: FontWeight.w700, letterSpacing: -0.5, color: AppColors.textPrimary),
|
||||
displaySmall: GoogleFonts.inter(fontSize: 24, fontWeight: FontWeight.w600, color: AppColors.textPrimary),
|
||||
headlineMedium: GoogleFonts.inter(fontSize: 20, fontWeight: FontWeight.w600, color: AppColors.textPrimary),
|
||||
titleLarge: GoogleFonts.inter(fontSize: 18, fontWeight: FontWeight.w600, color: AppColors.textPrimary),
|
||||
titleMedium: GoogleFonts.inter(fontSize: 16, fontWeight: FontWeight.w600, color: AppColors.textPrimary),
|
||||
bodyLarge: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.w400, color: AppColors.textSecondary),
|
||||
bodyMedium: GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w400, color: AppColors.textSecondary),
|
||||
labelLarge: GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w600, color: AppColors.textPrimary),
|
||||
),
|
||||
canvasColor: AppColors.background,
|
||||
|
||||
// AppBar: Transparent / Glass
|
||||
appBarTheme: AppBarTheme(
|
||||
backgroundColor: Colors.transparent, // Let GlassContainer handle background
|
||||
foregroundColor: Colors.white,
|
||||
elevation: 0,
|
||||
centerTitle: true,
|
||||
scrolledUnderElevation: 0,
|
||||
titleTextStyle: GoogleFonts.inter(
|
||||
// ============ TYPOGRAPHY (Mobile-scaled) ============
|
||||
textTheme: TextTheme(
|
||||
// Display - Large titles
|
||||
displayLarge: GoogleFonts.outfit(
|
||||
fontSize: 32,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -1.0,
|
||||
height: 1.2,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Display Medium
|
||||
displayMedium: GoogleFonts.outfit(
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -0.5,
|
||||
height: 1.25,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Display Small
|
||||
displaySmall: GoogleFonts.outfit(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -0.3,
|
||||
height: 1.3,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Headline Medium
|
||||
headlineMedium: GoogleFonts.outfit(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -0.2,
|
||||
height: 1.3,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Headline Small
|
||||
headlineSmall: GoogleFonts.outfit(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white,
|
||||
letterSpacing: -0.1,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Title Large
|
||||
titleLarge: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Title Medium
|
||||
titleMedium: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.1,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Title Small
|
||||
titleSmall: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.1,
|
||||
height: 1.4,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
|
||||
// Body Large
|
||||
bodyLarge: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.2,
|
||||
height: 1.5,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
|
||||
// Body Medium
|
||||
bodyMedium: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.2,
|
||||
height: 1.5,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
|
||||
// Body Small
|
||||
bodySmall: GoogleFonts.inter(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.3,
|
||||
height: 1.5,
|
||||
color: AppColors.textTertiary,
|
||||
),
|
||||
|
||||
// Label Large
|
||||
labelLarge: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 0.2,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Label Medium
|
||||
labelMedium: GoogleFonts.inter(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.3,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Label Small
|
||||
labelSmall: GoogleFonts.inter(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.5,
|
||||
height: 1.4,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
|
||||
// Bottom Navigation Bar
|
||||
bottomNavigationBarTheme: BottomNavigationBarThemeData(
|
||||
backgroundColor: const Color(0xFF1C1C1E).withOpacity(0.9), // Dark glass
|
||||
selectedItemColor: Colors.white,
|
||||
unselectedItemColor: Colors.white38,
|
||||
selectedLabelStyle: GoogleFonts.inter(fontSize: 11, fontWeight: FontWeight.w600),
|
||||
unselectedLabelStyle: GoogleFonts.inter(fontSize: 11, fontWeight: FontWeight.w500),
|
||||
type: BottomNavigationBarType.fixed,
|
||||
|
||||
// ============ APP BAR ============
|
||||
appBarTheme: AppBarTheme(
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: AppColors.textPrimary,
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 0,
|
||||
centerTitle: true,
|
||||
titleTextStyle: GoogleFonts.outfit(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
letterSpacing: -0.3,
|
||||
),
|
||||
),
|
||||
|
||||
// Inputs
|
||||
|
||||
// ============ INPUTS ============
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
filled: true,
|
||||
fillColor: AppColors.surface,
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: spacing16, vertical: spacing12),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: spacing16,
|
||||
vertical: spacing12,
|
||||
),
|
||||
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),
|
||||
),
|
||||
hintStyle: GoogleFonts.inter(
|
||||
color: AppColors.textTertiary,
|
||||
fontSize: 14,
|
||||
),
|
||||
hintStyle: GoogleFonts.inter(color: AppColors.textTertiary, fontSize: 14),
|
||||
),
|
||||
|
||||
// Buttons
|
||||
|
||||
// ============ BUTTONS (Mobile-sized) ============
|
||||
filledButtonTheme: FilledButtonThemeData(
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: AppColors.focusColor,
|
||||
backgroundColor: AppColors.primary,
|
||||
foregroundColor: Colors.black,
|
||||
elevation: 0,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(radiusMd)),
|
||||
textStyle: GoogleFonts.inter(fontWeight: FontWeight.w600, fontSize: 14),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: spacing20,
|
||||
vertical: spacing12,
|
||||
),
|
||||
minimumSize: const Size(double.infinity, 48),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
),
|
||||
textStyle: GoogleFonts.inter(
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
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: spacing12,
|
||||
),
|
||||
minimumSize: const Size(double.infinity, 48),
|
||||
),
|
||||
),
|
||||
|
||||
// ============ BOTTOM NAVIGATION ============
|
||||
bottomNavigationBarTheme: BottomNavigationBarThemeData(
|
||||
backgroundColor: AppColors.surface,
|
||||
selectedItemColor: AppColors.primary,
|
||||
unselectedItemColor: AppColors.textSecondary,
|
||||
selectedLabelStyle: GoogleFonts.inter(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
unselectedLabelStyle: GoogleFonts.inter(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
type: BottomNavigationBarType.fixed,
|
||||
elevation: AppTheme.elevationMd,
|
||||
),
|
||||
|
||||
// ============ CARDS ============
|
||||
cardTheme: CardTheme(
|
||||
color: AppColors.surface,
|
||||
elevation: 0,
|
||||
margin: EdgeInsets.zero,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusLg),
|
||||
side: const BorderSide(color: AppColors.border),
|
||||
),
|
||||
),
|
||||
|
||||
// ============ DIALOGS ============
|
||||
dialogTheme: DialogTheme(
|
||||
backgroundColor: AppColors.surface,
|
||||
elevation: AppTheme.elevationLg,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusLg),
|
||||
),
|
||||
),
|
||||
|
||||
// ============ CHIPS ============
|
||||
chipTheme: ChipThemeData(
|
||||
backgroundColor: AppColors.surfaceVariant,
|
||||
selectedColor: AppColors.primary,
|
||||
labelStyle: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: spacing12,
|
||||
vertical: spacing8,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
side: const BorderSide(color: AppColors.border),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Light theme (fallback)
|
||||
static ThemeData get lightTheme {
|
||||
final baseTheme = ThemeData.light(useMaterial3: true);
|
||||
|
||||
return baseTheme.copyWith(
|
||||
colorScheme: AppColors.lightColorScheme,
|
||||
textTheme: GoogleFonts.interTextTheme(baseTheme.textTheme),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user