Files
xtremflow/lib/features/iptv/screens/dashboard_screen.dart
T
MichaelandClaude Opus 4.7 f7eaa724e2 feat(theme): complete redesign to Cyber-Cinematic Glass (Stitch)
Replace the legacy Apple TV-style purple/cyan theme with the full
Google Stitch Cyber-Cinematic Glass design system across the
entire app (desktop + mobile).

- New Material 3 dark ColorScheme: background #121317, primary
  #adc6ff, primaryContainer #4b8eff, surface containers, etc.
- Typography: Space Grotesk (headlines) + Inter (body/labels)
- 3-level glassmorphism via GlassContainer: base, glass, floating
- Primary gradient: #007AFF → #00C6FF with blue glow effects
- Removed old compatibility aliases (focusColor, border, textPrimary,
  textSecondary); all code now uses semantic Stitch tokens
- Systematically replaced all Colors.white/black/red/grey and
  GoogleFonts.roboto/outfit with Stitch equivalents
- All 36 lib/ files updated, zero compilation errors

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-27 22:06:29 +02:00

210 lines
7.1 KiB
Dart

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/models/playlist_config.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/widgets/glass_container.dart';
import '../../../core/widgets/tv_focusable_card.dart';
import '../widgets/live_tv_tab.dart';
import '../widgets/movies_tab.dart';
import '../widgets/series_tab.dart';
import '../widgets/settings_tab.dart';
import '../widgets/recordings_tab.dart';
class DashboardScreen extends ConsumerStatefulWidget {
final PlaylistConfig playlist;
const DashboardScreen({
super.key,
required this.playlist,
});
@override
ConsumerState<DashboardScreen> createState() => _DashboardScreenState();
}
class _DashboardScreenState extends ConsumerState<DashboardScreen> {
int _selectedIndex = 0;
final List<String> _tabs = ['Live TV', 'Movies', 'Series', 'Recordings', 'Settings'];
final List<IconData> _icons = [
Icons.live_tv_rounded,
Icons.movie_rounded,
Icons.tv_rounded,
Icons.video_library_rounded,
Icons.settings_rounded,
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.background,
body: Stack(
fit: StackFit.expand,
children: [
// 1. Cinematic Deep Space Background
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF0F1014),
Color(0xFF121317),
],
),
),
),
),
// Ambient Glow — primary accent diffuse
Positioned(
top: -100,
left: -100,
child: Container(
width: 500,
height: 500,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
AppColors.primary.withOpacity(0.06),
Colors.transparent,
],
),
),
),
),
// 2. Main Content Area
Positioned.fill(
left: 100, // Leave space for sidebar
child: IndexedStack(
index: _selectedIndex,
children: [
LiveTVTab(playlist: widget.playlist),
MoviesTab(playlist: widget.playlist),
SeriesTab(playlist: widget.playlist),
RecordingsTab(playlist: widget.playlist),
const SettingsTab(),
],
),
),
// 3. Vertical Glass Sidebar (Stitch Level 2)
Positioned(
left: 24,
top: 24,
bottom: 24,
width: 80,
child: GlassContainer.floating(
borderRadius: 24,
padding: EdgeInsets.zero,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Logo Icon
Padding(
padding: const EdgeInsets.symmetric(vertical: 24),
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
gradient: AppColors.primaryGradient,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: AppColors.glowPrimary(0.4),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: const Icon(
Icons.play_arrow_rounded,
color: AppColors.onSurface,
size: 28,
),
),
),
const Spacer(),
// Navigation Icons
...List.generate(_tabs.length, (index) {
final isSelected = _selectedIndex == index;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: TvFocusableCard(
onTap: () => setState(() => _selectedIndex = index),
scaleFactor: 1.2,
borderRadius: 16,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 48,
height: 48,
decoration: BoxDecoration(
color: isSelected
? AppColors.primary.withOpacity(0.15)
: Colors.transparent,
borderRadius: BorderRadius.circular(16),
border: isSelected
? Border.all(
color: AppColors.primaryContainer
.withOpacity(0.5),
width: 2,
)
: null,
boxShadow: isSelected
? [
BoxShadow(
color: AppColors.glowPrimary(0.2),
blurRadius: 12,
spreadRadius: 1,
),
]
: null,
),
child: Icon(
_icons[index],
color: isSelected
? AppColors.onSurface
: AppColors.onSurfaceVariant,
size: 24,
),
),
),
);
}),
const Spacer(),
// Profile
Padding(
padding: const EdgeInsets.only(bottom: 24),
child: TvFocusableCard(
onTap: () {},
borderRadius: 50,
scaleFactor: 1.1,
child: CircleAvatar(
radius: 20,
backgroundColor: AppColors.surfaceContainerHigh
.withOpacity(0.5),
child: Icon(
Icons.person,
color: AppColors.onSurfaceVariant,
size: 20,
),
),
),
),
],
),
),
),
],
),
);
}
}