Michael/xtremflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/xtremflow.git synced 2026-10-22 22:48:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement login and dashboard screens, introducing GlassContainer and TvFocusableCard widgets.

Browse Source
This commit is contained in:
Michael committed 2025-12-13 08:42:30 +01:00
1 parent c668eed52a
commit ae404622ad
4 files changed
+515 -297
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/core/widgets/glass_container.dart
+58
View File
@@ -0,0 +1,58 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
import '../theme/app_theme.dart';
class GlassContainer extends StatelessWidget {
final Widget child;
final double? width;
final double? height;
final EdgeInsetsGeometry padding;
final EdgeInsetsGeometry? margin;
final double borderRadius;
final double opacity;
final Color? borderColor;
final bool border;
const GlassContainer({
super.key,
required this.child,
this.width,
this.height,
this.padding = const EdgeInsets.all(16),
this.margin,
this.borderRadius = 16.0,
this.opacity = 0.6,
this.borderColor,
this.border = true,
});
@override
Widget build(BuildContext context) {
return Container(
width: width,
height: height,
margin: margin,
child: ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
padding: padding,
decoration: BoxDecoration(
color: AppColors.surface.withOpacity(opacity),
borderRadius: BorderRadius.circular(borderRadius),
border: border
? Border.all(
color: borderColor ?? Colors.white.withOpacity(0.1),
width: 1,
)
: null,
),
child: child,
),
),
),
);
}
}
lib/core/widgets/tv_focusable_card.dart
+115
View File
@@ -0,0 +1,115 @@
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
class TvFocusableCard extends StatefulWidget {
final Widget child;
final VoidCallback? onTap;
final VoidCallback? onFocus;
final double scaleFactor;
final Duration animationDuration;
final Color? focusColor;
final bool autofocus;
final double borderRadius;
const TvFocusableCard({
super.key,
required this.child,
this.onTap,
this.onFocus,
this.scaleFactor = 1.05,
this.animationDuration = const Duration(milliseconds: 200),
this.focusColor,
this.autofocus = false,
this.borderRadius = 12.0,
});
@override
State<TvFocusableCard> createState() => _TvFocusableCardState();
}
class _TvFocusableCardState extends State<TvFocusableCard>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _scaleAnimation;
bool _isFocused = false;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: widget.animationDuration,
);
_scaleAnimation = Tween<double>(begin: 1.0, end: widget.scaleFactor)
.animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _handleFocusChange(bool hasFocus) {
if (widget.onFocus != null && hasFocus) {
widget.onFocus!();
}
setState(() {
_isFocused = hasFocus;
});
if (hasFocus) {
_controller.forward();
} else {
_controller.reverse();
}
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _scaleAnimation,
builder: (context, child) {
return Transform.scale(
scale: _scaleAnimation.value,
child: child,
);
},
child: InkWell(
onTap: widget.onTap,
onFocusChange: _handleFocusChange,
autofocus: widget.autofocus,
borderRadius: BorderRadius.circular(widget.borderRadius),
focusColor: Colors.transparent, // We handle visual focus manually
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(widget.borderRadius),
border: _isFocused
? Border.all(
color: widget.focusColor ?? AppColors.focusBorder,
width: 3,
)
: Border.all(color: Colors.transparent, width: 3),
boxShadow: _isFocused
? [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 20,
offset: const Offset(0, 10),
),
BoxShadow(
color: (widget.focusColor ?? AppColors.focusBorder).withOpacity(0.2),
blurRadius: 10,
spreadRadius: 1,
),
]
: [],
),
child: widget.child,
),
),
);
}
}
lib/features/auth/screens/login_screen.dart
+202 -139
View File
@@ -1,10 +1,12 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';
import '../providers/auth_provider.dart'; import '../providers/auth_provider.dart';
import '../../../core/theme/app_colors.dart'; import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_theme.dart'; import '../../../core/theme/app_theme.dart';
import '../../../core/widgets/components/ui_components.dart'; import '../../../core/widgets/glass_container.dart';
import '../../../core/widgets/tv_focusable_card.dart';
class LoginScreen extends ConsumerStatefulWidget { class LoginScreen extends ConsumerStatefulWidget {
const LoginScreen({super.key}); const LoginScreen({super.key});
@@ -43,161 +45,159 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final authState = ref.watch(authProvider); final authState = ref.watch(authProvider);
final size = MediaQuery.of(context).size;
return Scaffold( return Scaffold(
backgroundColor: AppColors.background, backgroundColor: AppColors.background,
body: Stack( body: Stack(
fit: StackFit.expand,
children: [ children: [
// Ambient background glow (Subtle) // 1. Cinematic Background (Abstract Gradient)
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF0D0D0D), // Almost Black
Color(0xFF1A1A1A), // Dark Grey
Color(0xFF0F0F0F), // Deep Dark
],
),
),
),
// 2. Ambient Glows (Apple TV Style)
Positioned( Positioned(
top: -100, top: -size.height * 0.2,
left: -100, right: -size.width * 0.1,
child: Container( child: Container(
width: 500, width: size.width * 0.6,
height: 500, height: size.width * 0.6,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
gradient: RadialGradient( gradient: RadialGradient(
colors: [ colors: [
AppColors.primary.withOpacity(0.15), Colors.white.withOpacity(0.05),
Colors.transparent, Colors.transparent,
], ],
radius: 0.6, radius: 0.5,
),
),
),
),
Positioned(
bottom: -size.height * 0.2,
left: -size.width * 0.1,
child: Container(
width: size.width * 0.6,
height: size.width * 0.6,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
Colors.blue.withOpacity(0.03), // Subtle blue hint
Colors.transparent,
],
radius: 0.5,
), ),
), ),
), ),
), ),
// Main content // 3. Main Content Center
Center( Center(
child: SingleChildScrollView( child: SingleChildScrollView(
padding: const EdgeInsets.all(24.0), padding: const EdgeInsets.all(24.0),
child: Container(
constraints: const BoxConstraints(maxWidth: 400),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
// Logo and title // Logo / App Icon
Container( Hero(
width: 80, tag: 'app_logo',
height: 80, child: Container(
width: 120,
height: 120,
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColors.surface, gradient: const LinearGradient(
borderRadius: BorderRadius.circular(20), begin: Alignment.topLeft,
border: Border.all(color: AppColors.border), end: Alignment.bottomRight,
colors: [Color(0xFF2C2C2E), Color(0xFF000000)],
),
borderRadius: BorderRadius.circular(32),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: AppColors.primary.withOpacity(0.2), color: Colors.black.withOpacity(0.5),
blurRadius: 30, blurRadius: 30,
offset: const Offset(0, 10), offset: const Offset(0, 15),
), ),
], ],
), ),
child: const Icon( child: const Icon(
Icons.live_tv, Icons.play_arrow_rounded,
color: AppColors.primary, color: Colors.white,
size: 40, size: 64,
), ),
), ),
const SizedBox(height: 24),
const Text(
'XtremFlow',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w800,
color: AppColors.textPrimary,
letterSpacing: -0.5,
),
),
const SizedBox(height: 8),
const Text(
'Cinematic Experience',
style: TextStyle(
fontSize: 14,
color: AppColors.textSecondary,
letterSpacing: 2,
fontWeight: FontWeight.w500,
),
), ),
const SizedBox(height: 48), const SizedBox(height: 48),
// Login form
GlassCard( // Title
padding: const EdgeInsets.all(32), Text(
borderRadius: 16, 'XtremFlow',
showBorder: true, style: GoogleFonts.inter(
fontSize: 42,
fontWeight: FontWeight.w700,
color: AppColors.textPrimary,
letterSpacing: -1.0,
),
),
const SizedBox(height: 8),
Text(
'Sign in to sync your playlists',
style: GoogleFonts.inter(
fontSize: 18,
color: AppColors.textSecondary,
fontWeight: FontWeight.w400,
),
),
const SizedBox(height: 48),
// Login Form Container
GlassContainer(
width: 500,
padding: const EdgeInsets.all(48), // Spacious padding
borderRadius: 24,
opacity: 0.7,
child: Form( child: Form(
key: _formKey, key: _formKey,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
Text( // Username Input
'Welcome Back', _buildTvInput(
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 32),
TextFormField(
controller: _usernameController, controller: _usernameController,
style: const TextStyle(color: Colors.white), label: 'Username',
decoration: InputDecoration( icon: Icons.person_outline_rounded,
labelText: 'Username',
labelStyle: const TextStyle(color: Colors.white70),
prefixIcon: const Icon(Icons.person_outline, color: Colors.white70),
filled: true,
fillColor: Colors.white.withOpacity(0.05),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.white.withOpacity(0.1)),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.white.withOpacity(0.1)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(color: AppColors.primary),
),
),
validator: (value) {
if (value == null || value.trim().isEmpty) {
return 'Username required';
}
return null;
},
autofocus: true, autofocus: true,
textInputAction: TextInputAction.next, nextFocus: true,
), ),
const SizedBox(height: 16), const SizedBox(height: 24),
TextFormField(
// Password Input
_buildTvInput(
controller: _passwordController, controller: _passwordController,
label: 'Password',
icon: Icons.lock_outline_rounded,
obscureText: _obscurePassword, obscureText: _obscurePassword,
style: const TextStyle(color: Colors.white), isLast: true,
decoration: InputDecoration( onSubmitted: _handleLogin,
labelText: 'Password', suffix: IconButton(
labelStyle: const TextStyle(color: Colors.white70),
prefixIcon: const Icon(Icons.lock_outline, color: Colors.white70),
filled: true,
fillColor: Colors.white.withOpacity(0.05),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.white.withOpacity(0.1)),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: Colors.white.withOpacity(0.1)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(color: AppColors.primary),
),
suffixIcon: IconButton(
icon: Icon( icon: Icon(
_obscurePassword _obscurePassword
? Icons.visibility_outlined ? Icons.visibility_outlined
: Icons.visibility_off_outlined, : Icons.visibility_off_outlined,
color: Colors.white70, color: AppColors.textSecondary,
), ),
onPressed: () { onPressed: () {
setState(() { setState(() {
@@ -206,40 +206,34 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
}, },
), ),
), ),
validator: (value) {
if (value == null || value.isEmpty) { // Error Message
return 'Password required';
}
return null;
},
textInputAction: TextInputAction.done,
onFieldSubmitted: (_) => _handleLogin(),
),
if (authState.errorMessage != null) ...[ if (authState.errorMessage != null) ...[
const SizedBox(height: 24), const SizedBox(height: 24),
Container( Container(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(16),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColors.error.withOpacity(0.1), color: AppColors.error.withOpacity(0.1),
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(12),
border: Border.all( border: Border.all(
color: AppColors.error.withOpacity(0.3), color: AppColors.error.withOpacity(0.3),
), ),
), ),
child: Row( child: Row(
children: [ children: [
Icon( const Icon(
Icons.error_outline, Icons.error_outline_rounded,
color: AppColors.error, color: AppColors.error,
size: 20, size: 20,
), ),
const SizedBox(height: 8), const SizedBox(width: 12),
Expanded( Expanded(
child: Text( child: Text(
authState.errorMessage!, authState.errorMessage!,
style: const TextStyle( style: const TextStyle(
color: AppColors.error, color: AppColors.error,
fontSize: 13, fontSize: 14,
fontWeight: FontWeight.w500,
), ),
), ),
), ),
@@ -247,36 +241,105 @@ class _LoginScreenState extends ConsumerState<LoginScreen> {
), ),
), ),
], ],
const SizedBox(height: 40),
// Sign In Button
TvFocusableCard(
onTap: _handleLogin,
scaleFactor: 1.03,
focusColor: Colors.white,
borderRadius: 16,
child: Container(
height: 60,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
),
child: authState.isLoading
? const SizedBox(
width: 24,
height: 24,
child: CircularProgressIndicator(strokeWidth: 2.5, color: Colors.black),
)
: Text(
'Sign In',
style: GoogleFonts.inter(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
),
),
],
),
),
),
const SizedBox(height: 32), const SizedBox(height: 32),
GradientButton( Text(
label: 'Sign In',
icon: Icons.arrow_forward,
isLoading: authState.isLoading,
isExpanded: true,
onPressed: _handleLogin,
),
],
),
),
),
const SizedBox(height: 24),
const Text(
'Default: admin / admin', 'Default: admin / admin',
style: TextStyle( style: GoogleFonts.inter(
fontSize: 12, fontSize: 14,
color: AppColors.textTertiary, color: AppColors.textTertiary,
fontStyle: FontStyle.italic,
), ),
textAlign: TextAlign.center,
), ),
], ],
), ),
), ),
), ),
),
], ],
), ),
); );
}
Widget _buildTvInput({
required TextEditingController controller,
required String label,
required IconData icon,
bool obscureText = false,
bool autofocus = false,
bool nextFocus = false,
bool isLast = false,
VoidCallback? onSubmitted,
Widget? suffix,
}) {
return TextFormField(
controller: controller,
obscureText: obscureText,
style: GoogleFonts.inter(fontSize: 18, color: AppColors.textPrimary),
autofocus: autofocus,
textInputAction: nextFocus ? TextInputAction.next : TextInputAction.done,
onFieldSubmitted: isLast ? (_) => onSubmitted?.call() : null,
decoration: InputDecoration(
labelText: label,
labelStyle: GoogleFonts.inter(color: AppColors.textSecondary),
prefixIcon: Icon(icon, color: AppColors.textSecondary),
suffixIcon: suffix,
filled: true,
fillColor: AppColors.surfaceVariant.withOpacity(0.5),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(color: AppColors.focusColor, width: 2),
),
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
),
validator: (value) {
if (value == null || value.trim().isEmpty) {
return '$label required';
}
return null;
},
);
} }
} }
lib/features/iptv/screens/dashboard_screen.dart
+140 -158
View File
@@ -4,16 +4,14 @@ import 'package:google_fonts/google_fonts.dart';
import '../../../core/models/playlist_config.dart'; import '../../../core/models/playlist_config.dart';
import '../../../core/theme/app_colors.dart'; import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_theme.dart'; import '../../../core/theme/app_theme.dart';
import '../../../core/widgets/glass_container.dart';
import '../../../core/widgets/tv_focusable_card.dart';
import '../../../core/widgets/digital_clock.dart'; import '../../../core/widgets/digital_clock.dart';
import '../widgets/live_tv_tab.dart'; import '../widgets/live_tv_tab.dart';
import '../widgets/movies_tab.dart'; import '../widgets/movies_tab.dart';
import '../widgets/series_tab.dart'; import '../widgets/series_tab.dart';
import '../widgets/settings_tab.dart'; import '../widgets/settings_tab.dart';
/// Apple TV Style Dashboard
///
/// Uses a floating Top Bar for navigation instead of a sidebar.
/// Content flows underneath the top bar.
class DashboardScreen extends ConsumerStatefulWidget { class DashboardScreen extends ConsumerStatefulWidget {
final PlaylistConfig playlist; final PlaylistConfig playlist;
@@ -26,160 +24,154 @@ class DashboardScreen extends ConsumerStatefulWidget {
ConsumerState<DashboardScreen> createState() => _DashboardScreenState(); ConsumerState<DashboardScreen> createState() => _DashboardScreenState();
} }
class _DashboardScreenState extends ConsumerState<DashboardScreen> with SingleTickerProviderStateMixin { class _DashboardScreenState extends ConsumerState<DashboardScreen> {
late TabController _tabController; int _selectedIndex = 0;
final List<String> _tabs = ['Live TV', 'Movies', 'Series', 'Settings'];
final List<String> _tabs = ['Live TV', 'Films', 'Séries', 'Réglages']; final List<IconData> _icons = [
final List<IconData> _icons = [Icons.live_tv, Icons.movie, Icons.tv, Icons.settings]; Icons.live_tv_rounded,
Icons.movie_rounded,
@override Icons.tv_rounded,
void initState() { Icons.settings_rounded
super.initState(); ];
_tabController = TabController(length: 4, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Glassmorphism Top Bar
return Scaffold( return Scaffold(
extendBodyBehindAppBar: true, // Content behind app bar backgroundColor: AppColors.background,
backgroundColor: Colors.transparent, // Transparent to show gradient
appBar: PreferredSize(
preferredSize: const Size.fromHeight(80),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.black.withOpacity(0.6), // Subtler top shadow
Colors.transparent,
],
),
),
child: Row(
children: [
// 1. Logo Area (Fixed Width for centering balance)
SizedBox(
width: 200,
child: Align(
alignment: Alignment.centerLeft,
child: _buildLogo(),
),
),
// 2. Centered Navigation Tabs (Expanded to fill space, then Centered)
Expanded(
child: Center(
child: Container(
height: 50,
constraints: const BoxConstraints(maxWidth: 600), // Prevent taking too much space
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(30),
border: Border.all(color: Colors.white.withOpacity(0.05)),
),
child: TabBar(
controller: _tabController,
isScrollable: true,
dividerColor: Colors.transparent,
indicator: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
),
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: const EdgeInsets.all(4),
labelColor: Colors.black,
unselectedLabelColor: Colors.white70, // Fixed: Improved readability
labelStyle: GoogleFonts.inter(fontWeight: FontWeight.w700, fontSize: 13),
overlayColor: WidgetStateProperty.all(Colors.transparent),
tabs: List.generate(_tabs.length, (index) {
return Tab(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Row(
children: [
Icon(_icons[index], size: 18),
const SizedBox(width: 8),
Text(_tabs[index]),
],
),
),
);
}),
),
),
),
),
// 3. Search / Profile (Fixed Width for centering balance)
SizedBox(
width: 200,
child: Align(
alignment: Alignment.centerRight,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.search, color: Colors.white),
onPressed: () {
// Global search trigger
},
),
const SizedBox(width: 16),
const DigitalClock(),
const SizedBox(width: 16),
const CircleAvatar(
radius: 16,
backgroundColor: Colors.white24,
child: Icon(Icons.person, size: 18, color: Colors.white),
),
],
),
),
),
],
),
),
),
body: Stack( body: Stack(
fit: StackFit.expand,
children: [ children: [
// Background Gradient (Apple TV Depth Effect) // 1. Global Atmospheric Background
Container( Positioned.fill(
child: Container(
decoration: const BoxDecoration( decoration: const BoxDecoration(
gradient: RadialGradient( gradient: RadialGradient(
center: Alignment(0, -0.2), // Slightly above center center: Alignment(0, -0.4),
radius: 1.5, radius: 1.3,
colors: [ colors: [
Color(0xFF2C2C2E), // Dark Grey center (Light Source) Color(0xFF252525), // Center light
Color(0xFF000000), // Pure Black edges Color(0xFF000000), // Vignet
], ],
stops: [0.0, 1.0], stops: [0.0, 1.0],
), ),
), ),
), ),
),
// Content // 2. Main Content Area
TabBarView( Positioned.fill(
controller: _tabController, top: 0, // Content goes behind header
physics: const NeverScrollableScrollPhysics(), // Disable swipe to avoid gesture conflicts child: IndexedStack(
index: _selectedIndex,
children: [ children: [
// Padding top to account for the transparent AppBar // Add padding top internally in tabs or here
Padding(padding: const EdgeInsets.only(top: 80), child: LiveTVTab(playlist: widget.playlist)), Padding(padding: const EdgeInsets.only(top: 100), child: LiveTVTab(playlist: widget.playlist)),
Padding(padding: const EdgeInsets.only(top: 80), child: MoviesTab(playlist: widget.playlist)), Padding(padding: const EdgeInsets.only(top: 100), child: MoviesTab(playlist: widget.playlist)),
Padding(padding: const EdgeInsets.only(top: 80), child: SeriesTab(playlist: widget.playlist)), Padding(padding: const EdgeInsets.only(top: 100), child: SeriesTab(playlist: widget.playlist)),
const Padding(padding: EdgeInsets.only(top: 80), child: SettingsTab()), const Padding(padding: EdgeInsets.only(top: 100), child: SettingsTab()),
],
),
),
// 3. Floating Glass Header
Positioned(
top: 24, // Floating margin
left: 24,
right: 24,
child: GlassContainer(
height: 72,
borderRadius: 100, // Pill shape
opacity: 0.85,
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
children: [
// Logo
_buildLogo(),
const Spacer(),
// Navigation Pills
Row(
mainAxisSize: MainAxisSize.min,
children: List.generate(_tabs.length, (index) {
final isSelected = _selectedIndex == index;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: TvFocusableCard(
onTap: () => setState(() => _selectedIndex = index),
scaleFactor: 1.1,
borderRadius: 100,
focusColor: Colors.white,
child: AnimatedContainer(
duration: AppTheme.durationFast,
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
decoration: BoxDecoration(
color: isSelected ? Colors.white : Colors.transparent,
borderRadius: BorderRadius.circular(100),
),
child: Row(
children: [
Icon(
_icons[index],
size: 18,
color: isSelected ? Colors.black : AppColors.textSecondary,
),
const SizedBox(width: 8),
Text(
_tabs[index],
style: GoogleFonts.inter(
fontSize: 14,
fontWeight: isSelected ? FontWeight.w700 : FontWeight.w500,
color: isSelected ? Colors.black : AppColors.textSecondary,
),
),
],
),
),
),
);
}),
),
const Spacer(),
// Tools
Row(
children: [
_buildIconButton(Icons.search_rounded, () {}),
const SizedBox(width: 16),
const DigitalClock(), // Kept existing widget
const SizedBox(width: 16),
CircleAvatar(
radius: 18,
backgroundColor: Colors.white.withOpacity(0.1),
child: const Icon(Icons.person_rounded, size: 20, color: Colors.white),
),
], ],
), ),
], ],
), ),
),
),
],
),
);
}
Widget _buildIconButton(IconData icon, VoidCallback onTap) {
return TvFocusableCard(
onTap: onTap,
borderRadius: 50,
scaleFactor: 1.15,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
shape: BoxShape.circle,
),
child: Icon(icon, color: Colors.white, size: 20),
),
); );
} }
@@ -187,35 +179,25 @@ class _DashboardScreenState extends ConsumerState<DashboardScreen> with SingleTi
return Row( return Row(
children: [ children: [
Container( Container(
width: 36, width: 32,
height: 36, height: 32,
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: const LinearGradient(colors: [Color(0xFF43cea2), Color(0xFF185a9d)]), // Green to Blue gradient: const LinearGradient(colors: [Colors.white, Color(0xFFAAAAAA)]),
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(8),
), ),
child: const Icon(Icons.play_arrow_rounded, color: Colors.white), child: const Icon(Icons.play_arrow_rounded, color: Colors.black, size: 24),
), ),
const SizedBox(width: 12), const SizedBox(width: 12),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text( Text(
'Xtrem', 'XtremFlow',
style: GoogleFonts.inter(fontWeight: FontWeight.w800, fontSize: 16, color: Colors.white),
),
Text(
'Flow',
style: GoogleFonts.inter( style: GoogleFonts.inter(
fontWeight: FontWeight.w300, fontWeight: FontWeight.w700,
fontSize: 16, fontSize: 18,
color: Colors.white.withOpacity(0.8), color: Colors.white,
height: 0.8, letterSpacing: -0.5,
), ),
), ),
], ],
),
],
); );
} }
} }