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: 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/glass_container.dart
+183 -24
View File
@@ -1,7 +1,19 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
import '../theme/app_theme.dart';
/// Modern Apple TV Glass Container
///
/// Sophisticated glassmorphism with premium blur effects,
/// configurable transparency, and elegant borders.
///
/// Features:
/// - Backdrop blur (iOS-style glass effect)
/// - Subtle gradient overlay
/// - Premium border styling
/// - Shadow system
/// - Smooth animations
class GlassContainer extends StatelessWidget {
final Widget child;
final double? width;
@@ -9,9 +21,14 @@ class GlassContainer extends StatelessWidget {
final EdgeInsetsGeometry padding;
final EdgeInsetsGeometry? margin;
final double borderRadius;
final double opacity;
final double? opacity;
final Color? backgroundColor;
final Color? borderColor;
final bool border;
final bool hasBorder;
final double borderWidth;
final bool showShadow;
final double blur;
final bool showGradient;
const GlassContainer({
super.key,
@@ -21,13 +38,23 @@ class GlassContainer extends StatelessWidget {
this.padding = const EdgeInsets.all(16),
this.margin,
this.borderRadius = 16.0,
this.opacity = 0.6,
this.opacity,
this.backgroundColor,
this.borderColor,
this.border = true,
this.hasBorder = true,
this.borderWidth = 1.0,
this.showShadow = true,
this.blur = 15.0,
this.showGradient = true,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final finalOpacity = opacity ?? 0.08;
final finalBgColor = backgroundColor ?? AppColors.glassBackground;
final finalBorderColor = borderColor ?? AppColors.glassBorder;
return Container(
width: width,
height: height,
@@ -35,32 +62,45 @@ class GlassContainer extends StatelessWidget {
child: ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
child: Container(
padding: padding,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(borderRadius),
border: border
? Border.all(
color: borderColor ?? Colors.white.withOpacity(0.1),
width: 1,
// Subtle gradient overlay for depth
gradient: showGradient
? LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
finalBgColor.withOpacity(finalOpacity * 1.2),
finalBgColor.withOpacity(finalOpacity * 0.6),
],
)
: null,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
AppColors.surface.withOpacity(opacity),
AppColors.surface.withOpacity(opacity * 0.5),
],
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 20,
spreadRadius: -5,
),
],
border: hasBorder
? Border.all(
color: finalBorderColor,
width: borderWidth,
)
: null,
// Premium shadow
boxShadow: showShadow
? [
BoxShadow(
color: Colors.black.withOpacity(0.15),
blurRadius: 24,
spreadRadius: -6,
offset: const Offset(0, 8),
),
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 12,
spreadRadius: -3,
offset: const Offset(0, 4),
),
]
: [],
),
child: child,
),
@@ -69,3 +109,122 @@ class GlassContainer extends StatelessWidget {
);
}
}
/// Premium Glass Card - Full-featured variant
class GlassCard extends StatefulWidget {
final Widget child;
final VoidCallback? onTap;
final VoidCallback? onLongPress;
final EdgeInsetsGeometry padding;
final EdgeInsetsGeometry? margin;
final double borderRadius;
final bool interactive;
final bool isLoading;
const GlassCard({
super.key,
required this.child,
this.onTap,
this.onLongPress,
this.padding = const EdgeInsets.all(16),
this.margin,
this.borderRadius = 16.0,
this.interactive = false,
this.isLoading = false,
});
@override
State<GlassCard> createState() => _GlassCardState();
}
class _GlassCardState extends State<GlassCard>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _scaleAnimation;
late Animation<double> _opacityAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: AppTheme.durationMd,
);
_scaleAnimation = Tween<double>(begin: 1.0, end: 1.04)
.animate(CurvedAnimation(parent: _controller, curve: AppTheme.curveDefault));
_opacityAnimation = Tween<double>(begin: 1.0, end: 0.8)
.animate(CurvedAnimation(parent: _controller, curve: AppTheme.curveDefault));
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _onPointerDown(PointerDownEvent event) {
if (widget.interactive && widget.onTap != null) {
_controller.forward();
}
}
void _onPointerUp(PointerUpEvent event) {
_controller.reverse();
}
@override
Widget build(BuildContext context) {
Widget content = GlassContainer(
borderRadius: widget.borderRadius,
padding: widget.padding,
margin: widget.margin,
child: widget.child,
);
if (widget.interactive && widget.onTap != null) {
content = MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: widget.onTap,
onLongPress: widget.onLongPress,
onTapDown: (_) => _onPointerDown(PointerDownEvent(
position: Offset.zero,
)),
onTapUp: (_) => _onPointerUp(PointerUpEvent(
position: Offset.zero,
)),
onTapCancel: () => _controller.reverse(),
child: ScaleTransition(
scale: _scaleAnimation,
child: Opacity(
opacity: _opacityAnimation.value,
child: content,
),
),
),
);
}
if (widget.isLoading) {
content = Stack(
children: [
Opacity(opacity: 0.5, child: content),
Center(
child: SizedBox(
width: 40,
height: 40,
child: CircularProgressIndicator(
color: AppColors.primary,
strokeWidth: 2,
),
),
),
],
);
}
return content;
}
}
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) {
lib/core/widgets/tv_channel_grid.dart
+129
View File
@@ -0,0 +1,129 @@
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
import '../theme/app_theme.dart';
/// Apple TV Modern Channel Grid
///
/// Responsive grid layout for channels with:
/// - Flexible column count based on screen size
/// - Smooth animations
/// - Focus-aware spacing
class TvChannelGrid extends StatelessWidget {
final List<Widget> children;
final EdgeInsetsGeometry padding;
final double horizontalSpacing;
final double verticalSpacing;
final ScrollController? scrollController;
final ScrollPhysics physics;
const TvChannelGrid({
super.key,
required this.children,
this.padding = const EdgeInsets.fromLTRB(32, 24, 32, 32),
this.horizontalSpacing = 20,
this.verticalSpacing = 20,
this.scrollController,
this.physics = const AlwaysScrollableScrollPhysics(),
});
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
// Responsive column count
int columnCount;
if (screenWidth > 1920) {
columnCount = 6;
} else if (screenWidth > 1600) {
columnCount = 5;
} else if (screenWidth > 1280) {
columnCount = 4;
} else if (screenWidth > 960) {
columnCount = 3;
} else {
columnCount = 2;
}
return SingleChildScrollView(
controller: scrollController,
physics: physics,
padding: padding,
child: Wrap(
spacing: horizontalSpacing,
runSpacing: verticalSpacing,
children: [
for (int i = 0; i < children.length; i++)
SizedBox(
width: (screenWidth -
(padding.horizontal) -
(horizontalSpacing * (columnCount - 1))) / columnCount,
child: children[i],
),
],
),
);
}
}
/// Apple TV Modern Horizontal Scrollable List
class TvHorizontalList extends StatelessWidget {
final List<Widget> children;
final String? title;
final EdgeInsetsGeometry padding;
final double itemWidth;
final double spacing;
final ScrollController? scrollController;
const TvHorizontalList({
super.key,
required this.children,
this.title,
this.padding = const EdgeInsets.symmetric(vertical: 16),
this.itemWidth = 200,
this.spacing = 16,
this.scrollController,
});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Title
if (title != null)
Padding(
padding: const EdgeInsets.symmetric(
horizontal: AppTheme.spacing32,
vertical: AppTheme.spacing16,
),
child: Text(
title!,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.w700,
),
),
),
// Horizontal list
SizedBox(
height: 280,
child: ListView.separated(
controller: scrollController,
scrollDirection: Axis.horizontal,
padding: EdgeInsets.symmetric(
horizontal: 32,
vertical: padding.vertical as double? ?? 0,
),
itemCount: children.length,
separatorBuilder: (_, __) => SizedBox(width: spacing),
itemBuilder: (context, index) => SizedBox(
width: itemWidth,
child: children[index],
),
),
),
],
);
}
}
lib/core/widgets/tv_modern_card.dart
+338
View File
@@ -0,0 +1,338 @@
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:google_fonts/google_fonts.dart';
import '../theme/app_colors.dart';
import '../theme/app_theme.dart';
import 'glass_container.dart';
/// Apple TV Modern Content Card
///
/// Premium card for displaying movies, shows, or other content with:
/// - Poster image with skeleton loading
/// - Title and metadata
/// - Rating/score display
/// - Interactive hover states
/// - Context menu support
class TvModernCard extends StatefulWidget {
final String id;
final String title;
final String? imageUrl;
final String? rating;
final String? year;
final String? badge;
final Color? badgeColor;
final VoidCallback? onTap;
final VoidCallback? onPlayTap;
final VoidCallback? onMoreTap;
final bool isWatching;
final double? progress;
const TvModernCard({
super.key,
required this.id,
required this.title,
this.imageUrl,
this.rating,
this.year,
this.badge,
this.badgeColor,
this.onTap,
this.onPlayTap,
this.onMoreTap,
this.isWatching = false,
this.progress,
});
@override
State<TvModernCard> createState() => _TvModernCardState();
}
class _TvModernCardState extends State<TvModernCard>
with SingleTickerProviderStateMixin {
bool _isHovered = false;
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: AppTheme.durationMd,
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (_) {
setState(() => _isHovered = true);
_controller.forward();
},
onExit: (_) {
setState(() => _isHovered = false);
_controller.reverse();
},
child: GestureDetector(
onTap: widget.onTap,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// ============ POSTER IMAGE ============
AnimatedScale(
scale: _isHovered ? 1.06 : 1.0,
duration: AppTheme.durationMd,
curve: AppTheme.curveDefault,
child: GlassCard(
borderRadius: AppTheme.radiusLg,
padding: EdgeInsets.zero,
interactive: true,
onTap: widget.onTap,
child: Stack(
fit: StackFit.expand,
children: [
// Poster image
_buildPosterImage(),
// Overlay
if (_isHovered)
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.7),
],
),
),
),
// Badge
if (widget.badge != null)
Positioned(
top: 12,
right: 12,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: widget.badgeColor ?? AppColors.primary,
borderRadius: BorderRadius.circular(4),
),
child: Text(
widget.badge!,
style: GoogleFonts.inter(
fontSize: 10,
fontWeight: FontWeight.w700,
color: Colors.black,
letterSpacing: 0.5,
),
),
),
),
// Progress indicator (if watching)
if (widget.isWatching && widget.progress != null)
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: 3,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(AppTheme.radiusLg),
),
),
child: ClipRRect(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(AppTheme.radiusLg),
),
child: LinearProgressIndicator(
value: widget.progress,
backgroundColor: AppColors.surfaceVariant,
valueColor: AlwaysStoppedAnimation(
AppColors.primary,
),
minHeight: 3,
),
),
),
),
// Action buttons (on hover)
if (_isHovered && (widget.onPlayTap != null || widget.onMoreTap != null))
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (widget.onPlayTap != null)
_buildActionButton(
icon: Icons.play_arrow,
label: 'Play',
onTap: widget.onPlayTap!,
),
if (widget.onPlayTap != null && widget.onMoreTap != null)
const SizedBox(width: 16),
if (widget.onMoreTap != null)
_buildActionButton(
icon: Icons.info_outline,
label: 'Info',
onTap: widget.onMoreTap!,
),
],
),
),
],
),
),
),
const SizedBox(height: 12),
// ============ METADATA ============
// Title
Text(
widget.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
),
),
// Rating & Year
if (widget.rating != null || widget.year != null) ...[
const SizedBox(height: 6),
Row(
children: [
if (widget.rating != null) ...[
Icon(
Icons.star,
size: 14,
color: AppColors.ratingGold,
),
const SizedBox(width: 4),
Text(
widget.rating!,
style: GoogleFonts.inter(
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColors.textSecondary,
),
),
],
if (widget.rating != null && widget.year != null)
const SizedBox(width: 12),
if (widget.year != null)
Text(
widget.year!,
style: GoogleFonts.inter(
fontSize: 12,
fontWeight: FontWeight.w400,
color: AppColors.textTertiary,
),
),
],
),
],
],
),
),
);
}
Widget _buildPosterImage() {
if (widget.imageUrl == null || widget.imageUrl!.isEmpty) {
return Container(
color: AppColors.surface,
child: Center(
child: Icon(
Icons.image_outlined,
color: AppColors.textSecondary,
size: 48,
),
),
);
}
return CachedNetworkImage(
imageUrl: widget.imageUrl!,
fit: BoxFit.cover,
placeholder: (context, url) => Container(
color: AppColors.shimmer,
child: Center(
child: SizedBox(
width: 40,
height: 40,
child: CircularProgressIndicator(
strokeWidth: 2,
color: AppColors.primary,
),
),
),
),
errorWidget: (context, url, error) => Container(
color: AppColors.surface,
child: Center(
child: Icon(
Icons.broken_image_outlined,
color: AppColors.textSecondary,
size: 48,
),
),
),
);
}
Widget _buildActionButton({
required IconData icon,
required String label,
required VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: AppColors.primary,
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
boxShadow: [
BoxShadow(
color: AppColors.primary.withOpacity(0.4),
blurRadius: 12,
offset: const Offset(0, 4),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, color: Colors.black, size: 18),
const SizedBox(width: 6),
Text(
label,
style: GoogleFonts.inter(
fontSize: 12,
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
],
),
),
);
}
}
lib/core/widgets/tv_nav_widgets.dart
+397
View File
@@ -0,0 +1,397 @@
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';
/// Apple TV Modern Top Navigation Bar
///
/// Premium navigation header with:
/// - Logo/branding
/// - Search integration
/// - User menu
/// - Glassmorphism effect
class TvTopNavBar extends StatefulWidget {
final String title;
final VoidCallback? onSearch;
final VoidCallback? onProfile;
final VoidCallback? onNotifications;
final int notificationCount;
final Widget? leading;
final List<Widget>? actions;
const TvTopNavBar({
super.key,
required this.title,
this.onSearch,
this.onProfile,
this.onNotifications,
this.notificationCount = 0,
this.leading,
this.actions,
});
@override
State<TvTopNavBar> createState() => _TvTopNavBarState();
}
class _TvTopNavBarState extends State<TvTopNavBar> {
bool _isHovered = false;
@override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (_) => setState(() => _isHovered = true),
onExit: (_) => setState(() => _isHovered = false),
child: GlassContainer(
borderRadius: 0,
hasBorder: false,
showShadow: false,
padding: const EdgeInsets.symmetric(
horizontal: AppTheme.spacing32,
vertical: AppTheme.spacing16,
),
margin: EdgeInsets.zero,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Left: Logo + Title
Row(
children: [
if (widget.leading != null) widget.leading!,
const SizedBox(width: AppTheme.spacing16),
Text(
widget.title,
style: GoogleFonts.outfit(
fontSize: 24,
fontWeight: FontWeight.w700,
color: AppColors.textPrimary,
letterSpacing: -0.3,
),
),
],
),
// Right: Actions
Row(
children: [
if (widget.onSearch != null) ...[
_buildIconButton(
icon: Icons.search,
onTap: widget.onSearch!,
tooltip: 'Search',
),
const SizedBox(width: AppTheme.spacing16),
],
if (widget.onNotifications != null) ...[
_buildIconButton(
icon: Icons.notifications_none,
onTap: widget.onNotifications!,
tooltip: 'Notifications',
badge: widget.notificationCount > 0
? widget.notificationCount.toString()
: null,
),
const SizedBox(width: AppTheme.spacing16),
],
if (widget.onProfile != null)
_buildIconButton(
icon: Icons.account_circle,
onTap: widget.onProfile!,
tooltip: 'Profile',
),
if (widget.actions != null) ...[
const SizedBox(width: AppTheme.spacing16),
...widget.actions!,
],
],
),
],
),
),
);
}
Widget _buildIconButton({
required IconData icon,
required VoidCallback onTap,
required String tooltip,
String? badge,
}) {
return Tooltip(
message: tooltip,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: _isHovered ? AppColors.surface : Colors.transparent,
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
),
child: Stack(
children: [
Icon(
icon,
color: AppColors.textPrimary,
size: 24,
),
if (badge != null)
Positioned(
top: 0,
right: 0,
child: Container(
padding: const EdgeInsets.all(4),
decoration: const BoxDecoration(
color: AppColors.error,
shape: BoxShape.circle,
),
child: Text(
badge,
style: GoogleFonts.inter(
fontSize: 10,
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
),
),
],
),
),
),
),
);
}
}
/// Apple TV Modern Side Navigation
///
/// Vertical navigation menu with:
/// - Window navigation items
/// - Collapsible menu
/// - Smooth animations
/// - Category grouping
class TvSideNav extends StatefulWidget {
final List<TvNavItem> items;
final int selectedIndex;
final ValueChanged<int> onItemSelected;
final bool expanded;
final VoidCallback? onToggleExpanded;
const TvSideNav({
super.key,
required this.items,
this.selectedIndex = 0,
required this.onItemSelected,
this.expanded = true,
this.onToggleExpanded,
});
@override
State<TvSideNav> createState() => _TvSideNavState();
}
class _TvSideNavState extends State<TvSideNav> {
@override
Widget build(BuildContext context) {
return GlassContainer(
borderRadius: 0,
hasBorder: false,
showShadow: false,
padding: const EdgeInsets.symmetric(vertical: AppTheme.spacing16),
margin: EdgeInsets.zero,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(
widget.items.length,
(index) => _buildNavItem(
item: widget.items[index],
isSelected: index == widget.selectedIndex,
onTap: () => widget.onItemSelected(index),
),
),
),
),
);
}
Widget _buildNavItem({
required TvNavItem item,
required bool isSelected,
required VoidCallback onTap,
}) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: AppTheme.spacing16,
vertical: AppTheme.spacing8,
),
child: GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: AppTheme.spacing16,
vertical: AppTheme.spacing12,
),
decoration: BoxDecoration(
color: isSelected ? AppColors.primary : Colors.transparent,
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
border: !isSelected
? Border.all(color: AppColors.border)
: null,
),
child: Row(
children: [
Icon(
item.icon,
color: isSelected ? Colors.black : AppColors.textSecondary,
size: 20,
),
const SizedBox(width: AppTheme.spacing12),
Expanded(
child: Text(
item.label,
style: GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w600,
color: isSelected ? Colors.black : AppColors.textPrimary,
),
),
),
],
),
),
),
);
}
}
/// Navigation item model
class TvNavItem {
final String label;
final IconData icon;
final String? badge;
TvNavItem({
required this.label,
required this.icon,
this.badge,
});
}
/// Apple TV Modern Floating Action Menu
///
/// Context-aware floating menu with:
/// - Multiple action buttons
/// - Smooth reveal animation
/// - Accessible positioning
class TvFloatingMenu extends StatefulWidget {
final List<TvMenuAction> actions;
final VoidCallback? onClose;
const TvFloatingMenu({
super.key,
required this.actions,
this.onClose,
});
@override
State<TvFloatingMenu> createState() => _TvFloatingMenuState();
}
class _TvFloatingMenuState extends State<TvFloatingMenu>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: AppTheme.durationMd,
)..forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return ScaleTransition(
scale: _controller,
child: Container(
padding: const EdgeInsets.all(AppTheme.spacing12),
decoration: BoxDecoration(
color: AppColors.surface,
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
border: Border.all(color: AppColors.border),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 24,
offset: const Offset(0, 8),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: List.generate(
widget.actions.length,
(index) => GestureDetector(
onTap: () {
widget.actions[index].onTap?.call();
widget.onClose?.call();
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: AppTheme.spacing16,
vertical: AppTheme.spacing12,
),
child: Row(
children: [
Icon(
widget.actions[index].icon,
color: widget.actions[index].color ?? AppColors.textPrimary,
),
const SizedBox(width: AppTheme.spacing12),
Text(
widget.actions[index].label,
style: GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppColors.textPrimary,
),
),
],
),
),
),
),
),
),
);
}
}
/// Menu action model
class TvMenuAction {
final String label;
final IconData icon;
final Color? color;
final VoidCallback? onTap;
TvMenuAction({
required this.label,
required this.icon,
this.color,
this.onTap,
});
}