Michael/xtremflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/xtremflow.git synced 2026-10-11 17:30:00 +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
+577 -359
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/features/iptv/screens/dashboard_screen.dart
+150 -168
View File
@@ -4,16 +4,14 @@ import 'package:google_fonts/google_fonts.dart';
import '../../../core/models/playlist_config.dart';
import '../../../core/theme/app_colors.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 '../widgets/live_tv_tab.dart';
import '../widgets/movies_tab.dart';
import '../widgets/series_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 {
final PlaylistConfig playlist;
@@ -26,194 +24,178 @@ class DashboardScreen extends ConsumerStatefulWidget {
ConsumerState<DashboardScreen> createState() => _DashboardScreenState();
}
class _DashboardScreenState extends ConsumerState<DashboardScreen> with SingleTickerProviderStateMixin {
late TabController _tabController;
final List<String> _tabs = ['Live TV', 'Films', 'Séries', 'Réglages'];
final List<IconData> _icons = [Icons.live_tv, Icons.movie, Icons.tv, Icons.settings];
@override
void initState() {
super.initState();
_tabController = TabController(length: 4, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
class _DashboardScreenState extends ConsumerState<DashboardScreen> {
int _selectedIndex = 0;
final List<String> _tabs = ['Live TV', 'Movies', 'Series', 'Settings'];
final List<IconData> _icons = [
Icons.live_tv_rounded,
Icons.movie_rounded,
Icons.tv_rounded,
Icons.settings_rounded
];
@override
Widget build(BuildContext context) {
// Glassmorphism Top Bar
return Scaffold(
extendBodyBehindAppBar: true, // Content behind app bar
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),
),
],
),
),
),
],
),
),
),
backgroundColor: AppColors.background,
body: Stack(
fit: StackFit.expand,
children: [
// Background Gradient (Apple TV Depth Effect)
Container(
decoration: const BoxDecoration(
gradient: RadialGradient(
center: Alignment(0, -0.2), // Slightly above center
radius: 1.5,
colors: [
Color(0xFF2C2C2E), // Dark Grey center (Light Source)
Color(0xFF000000), // Pure Black edges
],
stops: [0.0, 1.0],
// 1. Global Atmospheric Background
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
gradient: RadialGradient(
center: Alignment(0, -0.4),
radius: 1.3,
colors: [
Color(0xFF252525), // Center light
Color(0xFF000000), // Vignet
],
stops: [0.0, 1.0],
),
),
),
),
// Content
TabBarView(
controller: _tabController,
physics: const NeverScrollableScrollPhysics(), // Disable swipe to avoid gesture conflicts
children: [
// Padding top to account for the transparent AppBar
Padding(padding: const EdgeInsets.only(top: 80), child: LiveTVTab(playlist: widget.playlist)),
Padding(padding: const EdgeInsets.only(top: 80), child: MoviesTab(playlist: widget.playlist)),
Padding(padding: const EdgeInsets.only(top: 80), child: SeriesTab(playlist: widget.playlist)),
const Padding(padding: EdgeInsets.only(top: 80), child: SettingsTab()),
],
// 2. Main Content Area
Positioned.fill(
top: 0, // Content goes behind header
child: IndexedStack(
index: _selectedIndex,
children: [
// Add padding top internally in tabs or here
Padding(padding: const EdgeInsets.only(top: 100), child: LiveTVTab(playlist: widget.playlist)),
Padding(padding: const EdgeInsets.only(top: 100), child: MoviesTab(playlist: widget.playlist)),
Padding(padding: const EdgeInsets.only(top: 100), child: SeriesTab(playlist: widget.playlist)),
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),
),
);
}
Widget _buildLogo() {
return Row(
children: [
Container(
width: 36,
height: 36,
width: 32,
height: 32,
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [Color(0xFF43cea2), Color(0xFF185a9d)]), // Green to Blue
borderRadius: BorderRadius.circular(10),
gradient: const LinearGradient(colors: [Colors.white, Color(0xFFAAAAAA)]),
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),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Xtrem',
style: GoogleFonts.inter(fontWeight: FontWeight.w800, fontSize: 16, color: Colors.white),
),
Text(
'Flow',
style: GoogleFonts.inter(
fontWeight: FontWeight.w300,
fontSize: 16,
color: Colors.white.withOpacity(0.8),
height: 0.8,
),
),
],
Text(
'XtremFlow',
style: GoogleFonts.inter(
fontWeight: FontWeight.w700,
fontSize: 18,
color: Colors.white,
letterSpacing: -0.5,
),
),
],
);