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

feat: add CategoryCarousel for horizontal item display and CategoryChipButton for filtering

Browse Source
This commit is contained in:
Michael committed 2025-12-06 18:30:04 +01:00
1 parent 3f61f70d1f
commit 44a2edf5ae
5 files changed
+411 -494
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/features/iptv/widgets/category_carousel.dart
+16 -17
View File
@@ -35,7 +35,7 @@ class CategoryCarousel<T> extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
final colorScheme = theme.colorScheme;
if (items.isEmpty) {
return const SizedBox.shrink();
@@ -58,9 +58,7 @@ class CategoryCarousel<T> extends StatelessWidget {
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: isDark
? AppColors.textPrimaryDark
: AppColors.textPrimaryLight,
color: colorScheme.onSurface,
),
),
if (itemCount != null) ...[
@@ -71,15 +69,15 @@ class CategoryCarousel<T> extends StatelessWidget {
vertical: 2,
),
decoration: BoxDecoration(
color: AppColors.primary.withOpacity(0.15),
color: colorScheme.primary.withOpacity(0.15),
borderRadius: BorderRadius.circular(12),
),
child: Text(
'$itemCount',
style: const TextStyle(
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColors.primary,
color: colorScheme.primary,
),
),
),
@@ -97,14 +95,14 @@ class CategoryCarousel<T> extends StatelessWidget {
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.primary,
color: colorScheme.primary,
),
),
const SizedBox(width: 4),
const Icon(
Icon(
Icons.arrow_forward_ios_rounded,
size: 12,
color: AppColors.primary,
color: colorScheme.primary,
),
],
),
@@ -173,7 +171,8 @@ class CategoryChipButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
return GestureDetector(
onTap: onTap,
@@ -184,12 +183,12 @@ class CategoryChipButton extends StatelessWidget {
gradient: isSelected ? AppColors.primaryGradient : null,
color: isSelected
? null
: (isDark ? AppColors.surfaceVariantDark : AppColors.surfaceVariantLight),
: colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: isSelected
? Colors.transparent
: (isDark ? AppColors.borderDark : AppColors.borderLight),
: colorScheme.outlineVariant,
),
),
child: Row(
@@ -200,8 +199,8 @@ class CategoryChipButton extends StatelessWidget {
icon,
size: 16,
color: isSelected
? Colors.white
: (isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight),
? colorScheme.onPrimary
: colorScheme.onSurfaceVariant,
),
const SizedBox(width: 6),
],
@@ -211,8 +210,8 @@ class CategoryChipButton extends StatelessWidget {
fontSize: 13,
fontWeight: FontWeight.w600,
color: isSelected
? Colors.white
: (isDark ? AppColors.textPrimaryDark : AppColors.textPrimaryLight),
? colorScheme.onPrimary
: colorScheme.onSurface,
),
),
],
lib/features/iptv/widgets/channel_card.dart
+157 -157
View File
@@ -2,17 +2,16 @@ import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_theme.dart';
import '../providers/favorites_provider.dart';
/// Premium channel card with Netflix-style design
/// Apple TV Style Channel Card
///
/// Features:
/// - Glassmorphism background
/// - Thumbnail/logo with fallback
/// - Live badge with pulse animation
/// - EPG overlay
/// - Favorite toggle
/// - Hover/tap effects
/// "Pop-out" effect on focus:
/// - Scales up (1.0 -> 1.1)
/// - Throws a large soft shadow
/// - Adds a thick white border (Focus Ring)
/// - Title is typically BELOW the card in tvOS, but we'll overlay it subtly or keep below.
class ChannelCard extends ConsumerStatefulWidget {
final String streamId;
final String name;
@@ -43,19 +42,15 @@ class _ChannelCardState extends ConsumerState<ChannelCard>
with SingleTickerProviderStateMixin {
bool _isHovered = false;
late AnimationController _pulseController;
late Animation<double> _pulseAnimation;
// late Animation<double> _pulseAnimation; // Unused for now, focus is static
@override
void initState() {
super.initState();
_pulseController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1500),
vsync: this,
duration: const Duration(milliseconds: 1000)
)..repeat(reverse: true);
_pulseAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
);
}
@override
@@ -69,124 +64,152 @@ class _ChannelCardState extends ConsumerState<ChannelCard>
final favorites = ref.watch(favoritesProvider);
final isFavorite = favorites.contains(widget.streamId);
// Dynamic sizing based on hover.
// In valid tvOS, the layout reserves space, so we scale the content but not the layout bounds to avoid reflow.
// However, simplest way here is just Transform.scale.
return MouseRegion(
onEnter: (_) => setState(() => _isHovered = true),
onExit: (_) => setState(() => _isHovered = false),
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: widget.onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
curve: Curves.easeOutCubic,
width: widget.width ?? 180,
height: widget.height ?? 120,
transform: Matrix4.identity()..scale(_isHovered ? 1.05 : 1.0),
transformAlignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: AppColors.surface, // Clean flat dark surface
border: Border.all(
color: _isHovered
? AppColors.primary
: AppColors.border,
width: _isHovered ? 2 : 1,
),
boxShadow: _isHovered
? [
BoxShadow(
color: AppColors.primary.withOpacity(0.3),
blurRadius: 16,
offset: const Offset(0, 4),
),
]
: [],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(7), // Inner radius
child: Stack(
fit: StackFit.expand,
children: [
// Channel logo/thumbnail
_buildChannelImage(),
// Gradient overlay for text readability
Positioned.fill(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.black.withOpacity(0.2),
Colors.black.withOpacity(0.9),
],
stops: const [0.0, 1.0],
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// The Image Card (Scales)
AnimatedScale(
scale: _isHovered ? 1.05 : 1.0,
duration: AppTheme.durationFast,
curve: AppTheme.curveDefault,
child: AnimatedContainer(
duration: AppTheme.durationFast,
width: widget.width ?? 180,
height: widget.height ?? 110,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
color: AppColors.surface, // Fallback color
// Thick white border on focus (tvOS style)
border: Border.all(
color: _isHovered ? AppColors.focusColor : Colors.transparent,
width: _isHovered ? 3 : 0,
),
),
// Live badge
if (widget.isLive)
Positioned(
top: 8,
right: 8,
child: _buildLiveBadge(),
),
// Favorite Icon
Positioned(
top: 0,
left: 0,
child: IconButton(
icon: Icon(
isFavorite ? Icons.favorite : Icons.favorite_border,
size: 20,
color: isFavorite ? AppColors.primary : Colors.white70,
),
onPressed: () {
ref.read(favoritesProvider.notifier).toggleFavorite(widget.streamId);
},
),
),
// Channel info
Positioned(
left: 10,
right: 10,
bottom: 10,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.name,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w700,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
if (widget.currentProgram != null && widget.currentProgram!.isNotEmpty) ...[
const SizedBox(height: 4),
Text(
widget.currentProgram!,
style: TextStyle(
color: Colors.white.withOpacity(0.7),
fontSize: 11,
fontWeight: FontWeight.w500,
// Deep shadow on focus
boxShadow: _isHovered
? [
BoxShadow(
color: Colors.black.withOpacity(0.5),
blurRadius: 30,
offset: const Offset(0, 15),
spreadRadius: 2,
),
]
: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 4,
offset: const Offset(0, 2),
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(AppTheme.radiusMd - (_isHovered ? 2 : 0)), // Adjust inner radius
child: Stack(
fit: StackFit.expand,
children: [
// 1. Background Image / Logo - EDGE TO EDGE
_buildChannelImage(),
// 2. Subtle Gradient (Always visible to make white logos pop on white background? No, black bg handling)
// Only show gradient if we have text to show ON the card, but for tvOS text is often below.
// Let's keep text overlay for now as requested "Minimalist" often implies overlays.
if (_isHovered)
Positioned.fill(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.transparent, Colors.black.withOpacity(0.8)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
),
// 3. Live Badge (Top Right)
if (widget.isLive)
Positioned(
top: 8,
right: 8,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: AppColors.live,
borderRadius: BorderRadius.circular(4),
),
child: const Text('LIVE', style: TextStyle(color: Colors.white, fontSize: 9, fontWeight: FontWeight.bold)),
),
),
// 4. Favorite Icon (Top Left)
if (_isHovered || isFavorite)
Positioned(
top: 5,
left: 5,
child: GestureDetector(
onTap: () => ref.read(favoritesProvider.notifier).toggleFavorite(widget.streamId),
child: Icon(
isFavorite ? Icons.favorite : Icons.favorite_border,
color: isFavorite ? AppColors.live : Colors.white.withOpacity(0.7),
size: 20,
),
),
),
],
),
),
],
),
),
),
const SizedBox(height: 8),
// Text separates from card (Classic tvOS look)
// Only show text prominently if hovered? Or always?
// "Minimalist" -> Always show but keep it subtle. White when focused.
SizedBox(
width: widget.width ?? 180,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
widget.name,
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: _isHovered ? AppColors.focusColor : AppColors.textSecondary,
fontWeight: _isHovered ? FontWeight.bold : FontWeight.w500,
fontSize: 13,
),
),
if (widget.currentProgram != null && _isHovered) ...[
const SizedBox(height: 2),
Text(
widget.currentProgram!,
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textTertiary,
fontSize: 11,
),
),
],
],
),
),
],
),
),
);
@@ -194,11 +217,16 @@ class _ChannelCardState extends ConsumerState<ChannelCard>
Widget _buildChannelImage() {
if (widget.iconUrl != null && widget.iconUrl!.isNotEmpty) {
return CachedNetworkImage(
imageUrl: widget.iconUrl!,
fit: BoxFit.contain, // Contain usually looks better for channel logos
placeholder: (context, url) => _buildPlaceholder(),
errorWidget: (context, url, error) => _buildPlaceholder(),
return Container(
color: Colors.white, // Logos usually look best on white/light grey
child: CachedNetworkImage(
imageUrl: widget.iconUrl!,
fit: BoxFit.contain,
width: double.infinity,
height: double.infinity,
placeholder: (context, url) => _buildPlaceholder(),
errorWidget: (context, url, error) => _buildPlaceholder(),
),
);
}
return _buildPlaceholder();
@@ -206,37 +234,9 @@ class _ChannelCardState extends ConsumerState<ChannelCard>
Widget _buildPlaceholder() {
return Container(
color: AppColors.surfaceVariant,
child: Center(
child: Icon(
Icons.tv,
size: 32,
color: AppColors.textTertiary,
),
),
);
}
Widget _buildLiveBadge() {
return AnimatedBuilder(
animation: _pulseAnimation,
builder: (context, child) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: AppColors.live.withOpacity(_pulseAnimation.value),
borderRadius: BorderRadius.circular(4),
),
child: child,
);
},
child: const Text(
'LIVE',
style: TextStyle(
color: Colors.white,
fontSize: 9,
fontWeight: FontWeight.bold,
),
color: AppColors.surface,
child: const Center(
child: Icon(Icons.tv, color: AppColors.textTertiary),
),
);
}