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

refactor(channel_card): simplify ChannelCard structure and enhance hover effects

Browse Source
This commit is contained in:
GitHub Copilot committed 2026-03-26 11:15:30 +01:00
1 parent 2ca0c8bf1a
commit 5b16029038
2 files changed
+160 -770
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/core/widgets/hero_carousel.dart
+1 -297
View File
@@ -3,7 +3,6 @@ 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';
class HeroCarouselItem {
final String id;
@@ -27,14 +26,6 @@ class HeroCarouselItem {
});
}
/// 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;
@@ -130,7 +121,6 @@ class _HeroCarouselState extends State<HeroCarousel>
child: Stack(
fit: StackFit.expand,
children: [
// ============ PAGE VIEW ============
PageView.builder(
controller: _pageController,
onPageChanged: (index) {
@@ -142,8 +132,6 @@ class _HeroCarouselState extends State<HeroCarousel>
return _buildCarouselPage(widget.items[index]);
},
),
// ============ GRADIENT OVERLAY (Bottom) ============
Positioned(
bottom: 0,
left: 0,
@@ -163,8 +151,6 @@ class _HeroCarouselState extends State<HeroCarousel>
),
),
),
// ============ CONTENT OVERLAY ============
Positioned(
bottom: 32,
left: 32,
@@ -174,8 +160,6 @@ class _HeroCarouselState extends State<HeroCarousel>
child: _buildContentOverlay(widget.items[_currentIndex]),
),
),
// ============ INDICATORS ============
Positioned(
bottom: 20,
right: 32,
@@ -187,12 +171,10 @@ class _HeroCarouselState extends State<HeroCarousel>
);
}
/// 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!,
@@ -207,11 +189,7 @@ class _HeroCarouselState extends State<HeroCarousel>
},
)
else
Container(
color: AppColors.surface,
),
// Image overlay
Container(color: AppColors.surface),
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
@@ -228,13 +206,11 @@ class _HeroCarouselState extends State<HeroCarousel>
);
}
/// 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),
@@ -252,10 +228,7 @@ class _HeroCarouselState extends State<HeroCarousel>
),
),
),
const SizedBox(height: 12),
// Title
Text(
item.title,
maxLines: 2,
@@ -268,7 +241,6 @@ class _HeroCarouselState extends State<HeroCarousel>
height: 1.1,
),
),
if (item.subtitle != null) ...[
const SizedBox(height: 12),
Text(
@@ -283,14 +255,10 @@ class _HeroCarouselState extends State<HeroCarousel>
),
),
],
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,
@@ -332,10 +300,7 @@ class _HeroCarouselState extends State<HeroCarousel>
),
),
),
const SizedBox(width: 16),
// More info button
if (item.onTap != null)
GestureDetector(
onTap: item.onTap,
@@ -376,7 +341,6 @@ class _HeroCarouselState extends State<HeroCarousel>
);
}
/// Build carousel indicators
Widget _buildIndicators() {
return Row(
mainAxisSize: MainAxisSize.min,
@@ -407,264 +371,4 @@ class _HeroCarouselState extends State<HeroCarousel>
),
);
}
}
}
}
void _startAutoPlay() {
_timer = Timer.periodic(const Duration(seconds: 8), (timer) {
if (_currentIndex < widget.items.length - 1) {
_currentIndex++;
} else {
_currentIndex = 0;
}
if (_pageController.hasClients) {
_pageController.animateToPage(
_currentIndex,
duration: const Duration(milliseconds: 800),
curve: Curves.fastOutSlowIn,
);
}
});
}
@override
void dispose() {
_timer?.cancel();
_pageController.dispose();
super.dispose();
}
String? _getProxiedUrl(String? url) {
if (url == null || url.isEmpty) return null;
if (url.startsWith('http')) {
return '/api/xtream/$url';
}
return url;
}
@override
Widget build(BuildContext context) {
if (widget.items.isEmpty) return const SizedBox.shrink();
return SizedBox(
height: 500, // Cinematic height
child: Stack(
children: [
// Carousel
PageView.builder(
controller: _pageController,
onPageChanged: (index) {
setState(() => _currentIndex = index);
},
itemCount: widget.items.length,
itemBuilder: (context, index) {
final item = widget.items[index];
return _buildHeroSlide(item);
},
),
// Indicators
Positioned(
bottom: 24,
right: 48,
child: Row(
children: List.generate(
widget.items.length,
(index) => AnimatedContainer(
duration: const Duration(milliseconds: 300),
margin: const EdgeInsets.symmetric(horizontal: 4),
width: _currentIndex == index ? 24 : 8,
height: 8,
decoration: BoxDecoration(
color: _currentIndex == index
? AppColors.primary
: Colors.white.withOpacity(0.3),
borderRadius: BorderRadius.circular(4),
),
),
),
),
),
],
),
);
}
Widget _buildHeroSlide(HeroCarouselItem item) {
return Stack(
fit: StackFit.expand,
children: [
// Background Image with Ken Burns Effect (Simulated via Scale in future, static for now)
if (item.imageUrl != null && item.imageUrl!.isNotEmpty)
Image.network(
_getProxiedUrl(item.imageUrl)!,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => Container(color: AppColors.surface),
),
// Gradient Overlays
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
AppColors.background.withOpacity(0.2),
AppColors.background.withOpacity(0.9),
AppColors.background,
],
stops: const [0.0, 0.5, 0.8, 1.0],
),
),
),
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [
Colors.transparent,
AppColors.background.withOpacity(0.8),
],
),
),
),
// Content Info
Padding(
padding: const EdgeInsets.all(48.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Category Tag
Container(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: AppColors.primary.withOpacity(0.2),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: AppColors.primary.withOpacity(0.5)),
),
child: Text(
'FEATURED',
style: GoogleFonts.inter(
color: AppColors.primary,
fontWeight: FontWeight.bold,
fontSize: 12,
letterSpacing: 1.5,
),
),
),
const SizedBox(height: 16),
// Title
SizedBox(
width: 600,
child: Text(
item.title,
style: GoogleFonts.outfit(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.white,
height: 1.1,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
if (item.subtitle != null) ...[
const SizedBox(height: 8),
Text(
item.subtitle!,
style: GoogleFonts.inter(
color: AppColors.textSecondary,
fontSize: 18,
),
),
],
const SizedBox(height: 24),
// Actions
Row(
children: [
TvFocusableCard(
onTap: item.onPlay,
borderRadius: 50,
scaleFactor: 1.1,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 32,
vertical: 16,
),
decoration: BoxDecoration(
gradient: AppColors.primaryGradient,
borderRadius: BorderRadius.circular(50),
boxShadow: [
BoxShadow(
color: AppColors.primary.withOpacity(0.4),
blurRadius: 20,
offset: const Offset(0, 5),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.play_arrow_rounded,
color: Colors.white,
),
const SizedBox(width: 8),
Text(
'WATCH NOW',
style: GoogleFonts.inter(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 16,
),
),
],
),
),
),
const SizedBox(width: 20),
TvFocusableCard(
onTap: item.onTap, // Add to favorites or details
borderRadius: 50,
child: GlassContainer(
borderRadius: 50,
padding: const EdgeInsets.symmetric(
horizontal: 24,
vertical: 16,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.info_outline, color: Colors.white),
const SizedBox(width: 8),
Text(
'DETAILS',
style: GoogleFonts.inter(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 16,
),
),
],
),
),
),
],
),
const SizedBox(height: 48), // Bottom padding
],
),
),
],
);
}
}