mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-20 05:28:05 +02:00
Merge remote-tracking branch 'origin/main' into main
Resolved conflicts by keeping remote functional features (RecordingScheduler, FFmpeg HLS transcoding, mobile player, channel cards) and restoring local Stitch theme foundation (app_colors, app_theme, glass_container, mobile_theme). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 4.7 committed
commit
2ba16caf55
68 files changed
+18812
-1794
No files matched your search
@@ -74,7 +74,7 @@ class _GradientButtonState extends State<GradientButton>
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = AnimationController(
|
||||
duration: AppTheme.durationFast,
|
||||
duration: AppTheme.durationSm,
|
||||
vsync: this,
|
||||
);
|
||||
_scaleAnimation = Tween<double>(begin: 1.0, end: 0.95).animate(
|
||||
@@ -365,10 +365,10 @@ class _MediaCardState extends State<MediaCard>
|
||||
Expanded(
|
||||
child: AnimatedScale(
|
||||
scale: _isHovered ? 1.05 : 1.0,
|
||||
duration: AppTheme.durationFast,
|
||||
duration: AppTheme.durationSm,
|
||||
curve: AppTheme.curveDefault,
|
||||
child: AnimatedContainer(
|
||||
duration: AppTheme.durationFast,
|
||||
duration: AppTheme.durationSm,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
|
||||
color: AppColors.surfaceContainerLow,
|
||||
|
||||
+288
-263
@@ -2,8 +2,7 @@ import 'dart:async';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import 'glass_container.dart';
|
||||
import 'tv_focusable_card.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
|
||||
class HeroCarouselItem {
|
||||
final String id;
|
||||
@@ -12,7 +11,8 @@ class HeroCarouselItem {
|
||||
final String? imageUrl;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onPlay;
|
||||
final List<String>? badges;
|
||||
final Color? accentColor;
|
||||
final String? badge;
|
||||
|
||||
HeroCarouselItem({
|
||||
required this.id,
|
||||
@@ -21,333 +21,358 @@ class HeroCarouselItem {
|
||||
this.imageUrl,
|
||||
this.onTap,
|
||||
this.onPlay,
|
||||
this.badges,
|
||||
this.accentColor,
|
||||
this.badge,
|
||||
});
|
||||
}
|
||||
|
||||
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(const Duration(seconds: 8), (timer) {
|
||||
if (_currentIndex < widget.items.length - 1) {
|
||||
_currentIndex++;
|
||||
} else {
|
||||
_currentIndex = 0;
|
||||
}
|
||||
if (_pageController.hasClients) {
|
||||
_timer = Timer.periodic(widget.autoPlayInterval, (timer) {
|
||||
if (mounted) {
|
||||
final nextPage = (_currentIndex + 1) % widget.items.length;
|
||||
_pageController.animateToPage(
|
||||
_currentIndex,
|
||||
duration: const Duration(milliseconds: 800),
|
||||
curve: Curves.fastOutSlowIn,
|
||||
nextPage,
|
||||
duration: AppTheme.durationLg,
|
||||
curve: AppTheme.curveSmooth,
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
void _stopAutoPlay() {
|
||||
_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;
|
||||
_timer = null;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (widget.items.isEmpty) return const SizedBox.shrink();
|
||||
|
||||
return SizedBox(
|
||||
height: 560,
|
||||
child: Stack(
|
||||
children: [
|
||||
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: 32,
|
||||
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.primaryContainer
|
||||
: Colors.white.withOpacity(0.3),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
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: [
|
||||
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]);
|
||||
},
|
||||
),
|
||||
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,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
Positioned(
|
||||
bottom: 32,
|
||||
left: 32,
|
||||
right: 32,
|
||||
child: FadeTransition(
|
||||
opacity: _fadeController,
|
||||
child: _buildContentOverlay(widget.items[_currentIndex]),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 20,
|
||||
right: 32,
|
||||
child: _buildIndicators(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHeroSlide(HeroCarouselItem item) {
|
||||
Widget _buildCarouselPage(HeroCarouselItem item) {
|
||||
return Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
// Background Image
|
||||
if (item.imageUrl != null && item.imageUrl!.isNotEmpty)
|
||||
Image.network(
|
||||
_getProxiedUrl(item.imageUrl)!,
|
||||
item.imageUrl!,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (_, __, ___) => Container(color: AppColors.surfaceContainerLow),
|
||||
errorBuilder: (context, error, stackTrace) {
|
||||
return Container(
|
||||
color: AppColors.surface,
|
||||
child: const Center(
|
||||
child: Icon(Icons.broken_image_outlined, size: 64),
|
||||
),
|
||||
);
|
||||
},
|
||||
)
|
||||
else
|
||||
Container(color: AppColors.surfaceContainerLow),
|
||||
|
||||
// Gradient Overlays — Stitch style
|
||||
Container(color: AppColors.surface),
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Colors.transparent,
|
||||
AppColors.baseLevel0.withOpacity(0.4),
|
||||
AppColors.baseLevel0.withOpacity(0.9),
|
||||
AppColors.baseLevel0,
|
||||
],
|
||||
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.baseLevel0.withOpacity(0.8),
|
||||
AppColors.background.withOpacity(0.3),
|
||||
AppColors.background.withOpacity(0.8),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Content Info
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(48.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Badges row
|
||||
if (item.badges != null && item.badges!.isNotEmpty)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 16),
|
||||
child: Wrap(
|
||||
spacing: 8,
|
||||
children: item.badges!.map((badge) {
|
||||
return 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.3),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
badge.toUpperCase(),
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.primary,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 11,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
)
|
||||
else
|
||||
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.3),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
'FEATURED',
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.primary,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 12,
|
||||
letterSpacing: 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Title
|
||||
SizedBox(
|
||||
width: 600,
|
||||
child: Text(
|
||||
item.title,
|
||||
style: GoogleFonts.spaceGrotesk(
|
||||
fontSize: 48,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.onSurface,
|
||||
height: 1.1,
|
||||
letterSpacing: -0.02,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
if (item.subtitle != null) ...[
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
item.subtitle!,
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurfaceVariant,
|
||||
fontSize: 18,
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
],
|
||||
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.primaryContainer.withOpacity(0.4),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 5),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.play_arrow_rounded,
|
||||
color: AppColors.onSurface,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'WATCH NOW',
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurface,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 20),
|
||||
TvFocusableCard(
|
||||
onTap: item.onTap,
|
||||
borderRadius: 50,
|
||||
child: GlassContainer.glass(
|
||||
borderRadius: 50,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 24,
|
||||
vertical: 16,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.info_outline,
|
||||
color: AppColors.onSurface,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'DETAILS',
|
||||
style: GoogleFonts.inter(
|
||||
color: AppColors.onSurface,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 48),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildContentOverlay(HeroCarouselItem item) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
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: AppColors.primary,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
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),
|
||||
if (item.onPlay != null || item.onTap != null)
|
||||
Row(
|
||||
children: [
|
||||
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: AppColors.textPrimary,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'Play',
|
||||
style: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
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),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import 'package:flutter/material.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;
|
||||
|
||||
// Guard: during first Flutter Web layout pass, size may be 0 or NaN.
|
||||
// LayoutBuilder will re-trigger build once the real size is known.
|
||||
if (screenWidth <= 0 || screenWidth.isNaN || screenWidth.isInfinite) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
// Responsive column count
|
||||
final 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;
|
||||
}
|
||||
|
||||
// Calculate horizontal padding safely using resolved EdgeInsets.
|
||||
final resolvedPadding = padding.resolve(TextDirection.ltr);
|
||||
final horizontalPadding = resolvedPadding.left + resolvedPadding.right;
|
||||
|
||||
// Compute item width, clamped to avoid negative/NaN values.
|
||||
final totalSpacing = horizontalSpacing * (columnCount - 1);
|
||||
final availableWidth = screenWidth - horizontalPadding - totalSpacing;
|
||||
final itemWidth =
|
||||
(availableWidth / columnCount).clamp(1.0, double.infinity);
|
||||
|
||||
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: itemWidth,
|
||||
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,
|
||||
// Resolve EdgeInsetsGeometry to a concrete EdgeInsets before
|
||||
// accessing vertical — casting EdgeInsetsGeometry to double throws.
|
||||
vertical: padding.resolve(TextDirection.ltr).top,
|
||||
),
|
||||
itemCount: children.length,
|
||||
separatorBuilder: (_, __) => SizedBox(width: spacing),
|
||||
itemBuilder: (context, index) => SizedBox(
|
||||
width: itemWidth,
|
||||
child: children[index],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,340 @@
|
||||
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: const BoxDecoration(
|
||||
borderRadius: BorderRadius.vertical(
|
||||
bottom: Radius.circular(AppTheme.radiusLg),
|
||||
),
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: const BorderRadius.vertical(
|
||||
bottom: Radius.circular(AppTheme.radiusLg),
|
||||
),
|
||||
child: LinearProgressIndicator(
|
||||
value: widget.progress,
|
||||
backgroundColor: AppColors.surfaceVariant,
|
||||
valueColor: const 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) ...[
|
||||
const 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: const 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: const Center(
|
||||
child: SizedBox(
|
||||
width: 40,
|
||||
height: 40,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: AppColors.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
errorWidget: (context, url, error) => Container(
|
||||
color: AppColors.surface,
|
||||
child: const 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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
});
|
||||
}
|
||||
Reference in new issue
Block a user