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

feat: Enhance Apple TV UI components with modern design elements

Browse Source 
- 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 2026-03-26 11:09:40 +01:00
1 parent 2c4572191d
commit 2ca0c8bf1a
14 files changed
+4578 -201
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/core/widgets/hero_carousel.dart
+366 -6
View File
@@ -1,9 +1,9 @@
import 'dart:async';
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
import 'glass_container.dart';
import 'tv_focusable_card.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;
@@ -12,6 +12,8 @@ class HeroCarouselItem {
final String? imageUrl;
final VoidCallback? onTap;
final VoidCallback? onPlay;
final Color? accentColor;
final String? badge;
HeroCarouselItem({
required this.id,
@@ -20,37 +22,395 @@ class HeroCarouselItem {
this.imageUrl,
this.onTap,
this.onPlay,
this.accentColor,
this.badge,
});
}
/// 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;
final Duration autoPlayInterval;
final double height;
const HeroCarousel({
super.key,
required this.items,
this.autoPlay = true,
this.autoPlayInterval = const Duration(seconds: 6),
this.height = 360,
});
@override
State<HeroCarousel> createState() => _HeroCarouselState();
}
class _HeroCarouselState extends State<HeroCarousel> {
class _HeroCarouselState extends State<HeroCarousel>
with TickerProviderStateMixin {
late PageController _pageController;
late AnimationController _fadeController;
late AnimationController _scaleController;
int _currentIndex = 0;
Timer? _timer;
bool _isHovered = false;
@override
void initState() {
super.initState();
_pageController = PageController();
if (widget.autoPlay) {
_pageController = PageController(
initialPage: 0,
viewportFraction: 1.0,
);
_fadeController = AnimationController(
vsync: this,
duration: AppTheme.durationLg,
);
_scaleController = AnimationController(
vsync: this,
duration: AppTheme.durationXl,
)..repeat(reverse: true);
if (widget.autoPlay && widget.items.isNotEmpty) {
_startAutoPlay();
}
}
@override
void dispose() {
_pageController.dispose();
_fadeController.dispose();
_scaleController.dispose();
_timer?.cancel();
super.dispose();
}
void _startAutoPlay() {
_timer = Timer.periodic(widget.autoPlayInterval, (timer) {
if (mounted) {
final nextPage = (_currentIndex + 1) % widget.items.length;
_pageController.animateToPage(
nextPage,
duration: AppTheme.durationLg,
curve: AppTheme.curveSmooth,
);
}
});
}
void _stopAutoPlay() {
_timer?.cancel();
_timer = null;
}
@override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (_) {
setState(() => _isHovered = true);
_stopAutoPlay();
},
onExit: (_) {
setState(() => _isHovered = false);
if (widget.autoPlay) {
_startAutoPlay();
}
},
child: SizedBox(
height: widget.height,
child: Stack(
fit: StackFit.expand,
children: [
// ============ PAGE VIEW ============
PageView.builder(
controller: _pageController,
onPageChanged: (index) {
setState(() => _currentIndex = index);
_fadeController.forward(from: 0.0);
},
itemCount: widget.items.length,
itemBuilder: (context, index) {
return _buildCarouselPage(widget.items[index]);
},
),
// ============ GRADIENT OVERLAY (Bottom) ============
Positioned(
bottom: 0,
left: 0,
right: 0,
height: 200,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
AppColors.background.withOpacity(0.6),
AppColors.background,
],
),
),
),
),
// ============ CONTENT OVERLAY ============
Positioned(
bottom: 32,
left: 32,
right: 32,
child: FadeTransition(
opacity: _fadeController,
child: _buildContentOverlay(widget.items[_currentIndex]),
),
),
// ============ INDICATORS ============
Positioned(
bottom: 20,
right: 32,
child: _buildIndicators(),
),
],
),
),
);
}
/// 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!,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return Container(
color: AppColors.surface,
child: const Center(
child: Icon(Icons.broken_image_outlined, size: 64),
),
);
},
)
else
Container(
color: AppColors.surface,
),
// Image overlay
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.black.withOpacity(0.3),
Colors.black.withOpacity(0.8),
],
),
),
),
],
);
}
/// 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),
decoration: BoxDecoration(
color: item.accentColor ?? AppColors.primary,
borderRadius: BorderRadius.circular(AppTheme.radiusSm),
),
child: Text(
item.badge!,
style: GoogleFonts.inter(
fontSize: 12,
fontWeight: FontWeight.w700,
color: Colors.black,
letterSpacing: 0.5,
),
),
),
const SizedBox(height: 12),
// Title
Text(
item.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.outfit(
fontSize: 48,
fontWeight: FontWeight.w800,
color: AppColors.textPrimary,
letterSpacing: -1.0,
height: 1.1,
),
),
if (item.subtitle != null) ...[
const SizedBox(height: 12),
Text(
item.subtitle!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w400,
color: AppColors.textSecondary,
height: 1.4,
),
),
],
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,
duration: AppTheme.durationMd,
child: GestureDetector(
onTap: item.onPlay,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 24,
vertical: 12,
),
decoration: BoxDecoration(
gradient: AppColors.primaryGradient,
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
boxShadow: [
BoxShadow(
color: (item.accentColor ?? AppColors.primary)
.withOpacity(0.4),
blurRadius: 16,
offset: const Offset(0, 8),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.play_arrow, color: Colors.black),
const SizedBox(width: 8),
Text(
'Play',
style: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
],
),
),
),
),
const SizedBox(width: 16),
// More info button
if (item.onTap != null)
GestureDetector(
onTap: item.onTap,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 24,
vertical: 12,
),
decoration: BoxDecoration(
color: AppColors.surface.withOpacity(0.8),
border: Border.all(
color: AppColors.border,
width: 1.5,
),
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.info_outline,
color: AppColors.textPrimary),
const SizedBox(width: 8),
Text(
'More Info',
style: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w700,
color: AppColors.textPrimary,
),
),
],
),
),
),
],
),
],
);
}
/// Build carousel indicators
Widget _buildIndicators() {
return Row(
mainAxisSize: MainAxisSize.min,
children: List.generate(
widget.items.length,
(index) => GestureDetector(
onTap: () {
_pageController.animateToPage(
index,
duration: AppTheme.durationMd,
curve: AppTheme.curveDefault,
);
},
child: AnimatedContainer(
duration: AppTheme.durationMd,
curve: AppTheme.curveDefault,
margin: const EdgeInsets.symmetric(horizontal: 6),
width: _currentIndex == index ? 32 : 8,
height: 8,
decoration: BoxDecoration(
color: _currentIndex == index
? AppColors.primary
: AppColors.border,
borderRadius: BorderRadius.circular(4),
),
),
),
),
);
}
}
}
}
void _startAutoPlay() {
_timer = Timer.periodic(const Duration(seconds: 8), (timer) {
if (_currentIndex < widget.items.length - 1) {