Michael/xtremflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/xtremflow.git synced 2026-10-17 04:09:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add XtremFlow color palette for light/dark themes and initial Flutter web HTML with a themed loading screen.

Browse Source
This commit is contained in:
Michael committed 2025-12-06 17:20:07 +01:00
1 parent b56ecdb145
commit 0fc4a15f40
8 files changed
+1133 -41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/features/iptv/widgets/category_carousel.dart
+223
View File
@@ -0,0 +1,223 @@
import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart';
/// Horizontal carousel for displaying channels by category
///
/// Netflix-style horizontal scrolling list with:
/// - Category title with count
/// - Smooth horizontal scrolling
/// - Lazy loading support
/// - Fade edges for visual polish
class CategoryCarousel<T> extends StatelessWidget {
final String title;
final int? itemCount;
final List<T> items;
final Widget Function(BuildContext context, T item, int index) itemBuilder;
final double itemWidth;
final double itemHeight;
final double spacing;
final EdgeInsets? padding;
final VoidCallback? onSeeAllTap;
const CategoryCarousel({
super.key,
required this.title,
required this.items,
required this.itemBuilder,
this.itemCount,
this.itemWidth = 180,
this.itemHeight = 120,
this.spacing = 12,
this.padding,
this.onSeeAllTap,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
if (items.isEmpty) {
return const SizedBox.shrink();
}
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Category header
Padding(
padding: padding ?? const EdgeInsets.symmetric(horizontal: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text(
title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: isDark
? AppColors.textPrimaryDark
: AppColors.textPrimaryLight,
),
),
if (itemCount != null) ...[
const SizedBox(width: 8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: AppColors.primary.withOpacity(0.15),
borderRadius: BorderRadius.circular(12),
),
child: Text(
'$itemCount',
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColors.primary,
),
),
),
],
],
),
if (onSeeAllTap != null)
TextButton(
onPressed: onSeeAllTap,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Voir tout',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.primary,
),
),
const SizedBox(width: 4),
const Icon(
Icons.arrow_forward_ios_rounded,
size: 12,
color: AppColors.primary,
),
],
),
),
],
),
),
const SizedBox(height: 12),
// Horizontal scrolling list with fade edges
SizedBox(
height: itemHeight,
child: ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.transparent,
Colors.white,
Colors.white,
Colors.transparent,
],
stops: const [0.0, 0.02, 0.98, 1.0],
).createShader(bounds);
},
blendMode: BlendMode.dstIn,
child: ListView.separated(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.symmetric(
horizontal: (padding?.left ?? 16),
),
physics: const BouncingScrollPhysics(),
itemCount: items.length,
separatorBuilder: (_, __) => SizedBox(width: spacing),
itemBuilder: (context, index) {
return SizedBox(
width: itemWidth,
height: itemHeight,
child: itemBuilder(context, items[index], index),
);
},
),
),
),
],
);
}
}
/// Simple category chip for filtering
class CategoryChipButton extends StatelessWidget {
final String label;
final bool isSelected;
final VoidCallback? onTap;
final IconData? icon;
const CategoryChipButton({
super.key,
required this.label,
this.isSelected = false,
this.onTap,
this.icon,
});
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
return GestureDetector(
onTap: onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
decoration: BoxDecoration(
gradient: isSelected ? AppColors.primaryGradient : null,
color: isSelected
? null
: (isDark ? AppColors.surfaceVariantDark : AppColors.surfaceVariantLight),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: isSelected
? Colors.transparent
: (isDark ? AppColors.borderDark : AppColors.borderLight),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (icon != null) ...[
Icon(
icon,
size: 16,
color: isSelected
? Colors.white
: (isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight),
),
const SizedBox(width: 6),
],
Text(
label,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: isSelected
? Colors.white
: (isDark ? AppColors.textPrimaryDark : AppColors.textPrimaryLight),
),
),
],
),
),
);
}
}
lib/features/iptv/widgets/channel_card.dart
+264
View File
@@ -0,0 +1,264 @@
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../../../core/theme/app_colors.dart';
/// Premium channel card with Netflix-style design
///
/// Features:
/// - Glassmorphism background
/// - Thumbnail/logo with fallback
/// - Live badge with pulse animation
/// - EPG overlay
/// - Hover/tap effects
class ChannelCard extends StatefulWidget {
final String name;
final String? iconUrl;
final String? currentProgram;
final bool isLive;
final VoidCallback? onTap;
final double? width;
final double? height;
const ChannelCard({
super.key,
required this.name,
this.iconUrl,
this.currentProgram,
this.isLive = true,
this.onTap,
this.width,
this.height,
});
@override
State<ChannelCard> createState() => _ChannelCardState();
}
class _ChannelCardState extends State<ChannelCard>
with SingleTickerProviderStateMixin {
bool _isHovered = false;
late AnimationController _pulseController;
late Animation<double> _pulseAnimation;
@override
void initState() {
super.initState();
_pulseController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1500),
)..repeat(reverse: true);
_pulseAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
);
}
@override
void dispose() {
_pulseController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final isDark = theme.brightness == Brightness.dark;
return MouseRegion(
onEnter: (_) => setState(() => _isHovered = true),
onExit: (_) => setState(() => _isHovered = false),
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(12),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: isDark
? [
AppColors.surfaceDark.withOpacity(0.95),
AppColors.surfaceVariantDark.withOpacity(0.9),
]
: [
Colors.white.withOpacity(0.95),
AppColors.surfaceVariantLight.withOpacity(0.9),
],
),
border: Border.all(
color: _isHovered
? AppColors.primary.withOpacity(0.5)
: (isDark ? AppColors.borderDark : AppColors.borderLight),
width: _isHovered ? 1.5 : 1,
),
boxShadow: _isHovered
? [
BoxShadow(
color: AppColors.primary.withOpacity(0.2),
blurRadius: 20,
offset: const Offset(0, 8),
),
]
: [
BoxShadow(
color: Colors.black.withOpacity(isDark ? 0.3 : 0.1),
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(11),
child: Stack(
fit: StackFit.expand,
children: [
// Channel logo/thumbnail
_buildChannelImage(isDark),
// Gradient overlay for text readability
Positioned.fill(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.7),
],
stops: const [0.4, 1.0],
),
),
),
),
// Live badge
if (widget.isLive)
Positioned(
top: 8,
right: 8,
child: _buildLiveBadge(),
),
// Channel info overlay
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: 13,
fontWeight: FontWeight.w600,
shadows: [
Shadow(
color: Colors.black54,
blurRadius: 4,
),
],
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
if (widget.currentProgram != null) ...[
const SizedBox(height: 2),
Text(
widget.currentProgram!,
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 11,
fontWeight: FontWeight.w400,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
],
),
),
],
),
),
),
),
);
}
Widget _buildChannelImage(bool isDark) {
if (widget.iconUrl != null && widget.iconUrl!.isNotEmpty) {
return CachedNetworkImage(
imageUrl: widget.iconUrl!,
fit: BoxFit.cover,
placeholder: (context, url) => _buildPlaceholder(isDark),
errorWidget: (context, url, error) => _buildPlaceholder(isDark),
);
}
return _buildPlaceholder(isDark);
}
Widget _buildPlaceholder(bool isDark) {
return Container(
color: isDark ? AppColors.surfaceVariantDark : AppColors.surfaceVariantLight,
child: Center(
child: Icon(
Icons.live_tv_rounded,
size: 36,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
),
),
);
}
Widget _buildLiveBadge() {
return AnimatedBuilder(
animation: _pulseAnimation,
builder: (context, child) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: AppColors.live.withOpacity(_pulseAnimation.value),
borderRadius: BorderRadius.circular(4),
boxShadow: [
BoxShadow(
color: AppColors.live.withOpacity(0.4 * _pulseAnimation.value),
blurRadius: 8,
spreadRadius: 1,
),
],
),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.circle,
size: 6,
color: Colors.white,
),
SizedBox(width: 4),
Text(
'LIVE',
style: TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.w700,
letterSpacing: 0.5,
),
),
],
),
);
},
);
}
}
lib/features/iptv/widgets/settings_tab.dart
+170 -2
View File
@@ -5,8 +5,10 @@ import 'package:google_fonts/google_fonts.dart';
import '../../auth/providers/auth_provider.dart';
import '../providers/settings_provider.dart';
import 'streaming_settings_tab.dart';
import '../../../core/providers/theme_provider.dart';
import '../../../core/theme/app_colors.dart';
/// Main Settings tab with sub-tabs for Filters and Streaming
/// Main Settings tab with sub-tabs for Filters, Streaming, and Appearance
class SettingsTab extends ConsumerStatefulWidget {
const SettingsTab({super.key});
@@ -24,7 +26,7 @@ class _SettingsTabState extends ConsumerState<SettingsTab> with SingleTickerProv
@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
_tabController = TabController(length: 3, vsync: this);
_liveTvController = TextEditingController();
_moviesController = TextEditingController();
_seriesController = TextEditingController();
@@ -72,6 +74,7 @@ class _SettingsTabState extends ConsumerState<SettingsTab> with SingleTickerProv
tabs: const [
Tab(icon: Icon(Icons.filter_list), text: 'Filtres'),
Tab(icon: Icon(Icons.stream), text: 'Streaming'),
Tab(icon: Icon(Icons.palette), text: 'Apparence'),
],
),
),
@@ -86,6 +89,9 @@ class _SettingsTabState extends ConsumerState<SettingsTab> with SingleTickerProv
// Streaming Tab
const StreamingSettingsTab(),
// Appearance Tab
_buildAppearanceTab(context),
],
),
),
@@ -93,6 +99,168 @@ class _SettingsTabState extends ConsumerState<SettingsTab> with SingleTickerProv
);
}
/// Build Appearance tab with theme toggle
Widget _buildAppearanceTab(BuildContext context) {
final themeState = ref.watch(themeProvider);
final themeNotifier = ref.read(themeProvider.notifier);
final isDark = Theme.of(context).brightness == Brightness.dark;
return ListView(
padding: const EdgeInsets.all(16),
children: [
// Theme selection card
Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.dark_mode,
color: AppColors.primary,
),
const SizedBox(width: 12),
Text(
'Thème',
style: GoogleFonts.inter(
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
],
),
const SizedBox(height: 16),
// Theme options
_buildThemeOption(
context: context,
title: 'Système',
subtitle: 'Suivre les paramètres du système',
icon: Icons.settings_suggest,
isSelected: themeState.appThemeMode == AppThemeMode.system,
onTap: () => themeNotifier.setThemeMode(AppThemeMode.system),
),
const SizedBox(height: 8),
_buildThemeOption(
context: context,
title: 'Sombre',
subtitle: 'Interface sombre premium',
icon: Icons.dark_mode,
isSelected: themeState.appThemeMode == AppThemeMode.dark,
onTap: () => themeNotifier.setThemeMode(AppThemeMode.dark),
),
const SizedBox(height: 8),
_buildThemeOption(
context: context,
title: 'Clair',
subtitle: 'Interface claire et lumineuse',
icon: Icons.light_mode,
isSelected: themeState.appThemeMode == AppThemeMode.light,
onTap: () => themeNotifier.setThemeMode(AppThemeMode.light),
),
],
),
),
),
const SizedBox(height: 16),
// Quick toggle card
Card(
child: ListTile(
leading: Icon(
isDark ? Icons.dark_mode : Icons.light_mode,
color: AppColors.primary,
),
title: Text(
'Mode actuel',
style: GoogleFonts.inter(fontWeight: FontWeight.w500),
),
subtitle: Text(
isDark ? 'Thème sombre actif' : 'Thème clair actif',
),
trailing: Switch(
value: isDark,
onChanged: (_) => themeNotifier.toggleTheme(),
activeColor: AppColors.primary,
),
),
),
],
);
}
Widget _buildThemeOption({
required BuildContext context,
required String title,
required String subtitle,
required IconData icon,
required bool isSelected,
required VoidCallback onTap,
}) {
final isDark = Theme.of(context).brightness == Brightness.dark;
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: isSelected
? AppColors.primary.withOpacity(0.1)
: (isDark ? AppColors.surfaceVariantDark : AppColors.surfaceVariantLight),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isSelected ? AppColors.primary : Colors.transparent,
width: 2,
),
),
child: Row(
children: [
Icon(
icon,
color: isSelected
? AppColors.primary
: (isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: GoogleFonts.inter(
fontWeight: FontWeight.w600,
color: isSelected
? AppColors.primary
: (isDark ? AppColors.textPrimaryDark : AppColors.textPrimaryLight),
),
),
Text(
subtitle,
style: GoogleFonts.inter(
fontSize: 12,
color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
),
),
],
),
),
if (isSelected)
Icon(
Icons.check_circle,
color: AppColors.primary,
),
],
),
),
);
}
Widget _buildFiltersTab(BuildContext context, dynamic currentUser, IptvSettings settings) {
return ListView(
padding: const EdgeInsets.all(16),