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

feat(design): Warm Cinema theme + event-driven adaptive players

Browse Source 
Replaces the Projector Noir palette with "Warm Cinema" and rebuilds the
web players around a shared, event-driven engine.

Design
- app_colors: warm charcoal (#0B0908), cream (#F3E9DF), ember (#D9541F);
  adds posterScrim/heroScrim gradients, lift()/emberFocus() shadows,
  const cream-alpha tokens replacing Colors.whiteNN, and primaryFill,
  a deeper ember reserved for text-bearing fills so white labels clear
  the 4.5:1 AA threshold that #D9541F alone does not
- app_theme / mobile_theme: Fraunces (display serif) + Karla (body),
  tighter radii, 20+ component themes
- glass_container: opaque layered surfaces replace the blurred glass
- themed_loading_screen restyled; players and boot splash follow

Performance
- drop every BackdropFilter: backdrop blur forced a full framebuffer
  read per frame per card, the main source of scroll jank
- bundle Fraunces/Karla as assets so google_fonts stops fetching from
  fonts.gstatic.com at startup
- bound image decode size on 12 sites: a 40-poster grid drops from
  ~240 MB to a few tens of MB of GPU memory

Players (new shared engine: web/xf-player-core.js)
- start on media events instead of polling the buffer every 100-200 ms
- hls.js/mpegts.js loaded on demand, so ~213 KB of mpegts is never
  fetched for HLS streams
- liveSyncDurationCount 10 -> 2, startFragPrefetch on, testBandwidth
  off, MPEG-TS initial stash 512 KB -> 64 KB
- adaptive escalation fast -> balanced -> safe after repeated stalls in
  a 60 s window, applied live for HLS so there is no visible cut

Preserved from the recent streaming work on main: server-side quality
selection, stable player viewId, the turbo direct MPEG-TS path, vendored
library cache headers and the CI/Docker changes. Only the theme layer and
the player front-end were replaced; GlassCard stays in ui_components.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 5 committed 2026-08-10 21:42:56 +02:00
1 parent e332895d7d
commit 1feeaae78a
49 files changed
+2341 -1751
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/core/theme/app_colors.dart
+171 -99
View File
@@ -1,134 +1,202 @@
import 'package:flutter/material.dart';
/// Projector Noir Design System — Material 3 Token Palette
/// XtremFlow — "Warm Cinema" Design System
///
/// Warm tungsten light on deep film-black, like a projector beam cutting
/// through a dark screening room. Verdigris teal as the counterpoint accent.
/// Optimized for OLED displays and low-light environments.
/// Primary accent: Tungsten amber (#F39A1F / #FFB35C)
/// Palette: charbon chaud + crème + orange brûlé (ember).
/// Inspiration: salle de projection, pellicule, affiches 70s.
///
/// Règle de perf : AUCUNE couleur de surface n'est translucide.
/// Les anciennes "glass" surfaces sont désormais opaques et pré-teintées,
/// ce qui supprime tout besoin de `BackdropFilter` (killer de perf sur
/// Flutter Web). La profondeur vient des ombres et du contraste, pas du flou.
class AppColors {
AppColors._();
// ============ COMPATIBILITY ALIASES (transition) ============
// ============ COMPATIBILITY ALIASES ============
static Color get focusColor => primaryContainer;
static Color get border => outlineVariant;
// ============ SURFACE / ON SURFACE ============
static const Color onSurface = Color(0xFFECE6DA);
static const Color onSurfaceVariant = Color(0xFFCDC4B4);
static const Color onSurface = Color(0xFFF3E9DF); // crème
static const Color onSurfaceVariant = Color(0xFFC5B3A5); // crème atténué
// ============ BASE LEVEL 0 ============
static const Color baseLevel0 = Color(0xFF0B0A08);
/// Noir chaud — le "noir de salle", jamais un noir pur bleuté.
static const Color baseLevel0 = Color(0xFF0B0908);
// ============ BACKGROUNDS ============
static const Color background = Color(0xFF14110C);
static const Color onBackground = Color(0xFFECE6DA);
static const Color background = Color(0xFF100C0A);
static const Color onBackground = Color(0xFFF3E9DF);
static const Color surface = Color(0xFF14110C);
static const Color surfaceDim = Color(0xFF14110C);
static const Color surfaceBright = Color(0xFF3E382C);
static const Color surface = Color(0xFF100C0A);
static const Color surfaceDim = Color(0xFF0B0908);
static const Color surfaceBright = Color(0xFF3C322C);
// Surface Containers (Material 3 hierarchy)
static const Color surfaceContainerLowest = Color(0xFF0E0C09);
static const Color surfaceContainerLow = Color(0xFF1B1812);
static const Color surfaceContainer = Color(0xFF211D16);
static const Color surfaceContainerHigh = Color(0xFF2B261E);
static const Color surfaceContainerHighest = Color(0xFF363027);
static const Color surfaceVariant = Color(0xFF363027);
// Surface Containers (hiérarchie Material 3, toutes opaques)
static const Color surfaceContainerLowest = Color(0xFF070505);
static const Color surfaceContainerLow = Color(0xFF181310);
static const Color surfaceContainer = Color(0xFF1F1815);
static const Color surfaceContainerHigh = Color(0xFF2A211C);
static const Color surfaceContainerHighest = Color(0xFF352A24);
static const Color surfaceVariant = Color(0xFF352A24);
// ============ PRIMARY (Tungsten Amber) ============
static const Color primary = Color(0xFFFFB35C);
static const Color onPrimary = Color(0xFF452800);
static const Color primaryContainer = Color(0xFFF39A1F);
static const Color onPrimaryContainer = Color(0xFF2E1B00);
static const Color inversePrimary = Color(0xFF8F5B00);
static const Color primaryFixed = Color(0xFFFFDDB3);
static const Color primaryFixedDim = Color(0xFFFFB35C);
static const Color onPrimaryFixed = Color(0xFF2A1700);
static const Color onPrimaryFixedVariant = Color(0xFF6B4300);
// ============ PRIMARY (Ember / orange brûlé) ============
static const Color primary = Color(0xFFFFB68C); // texte & icônes sur sombre
static const Color onPrimary = Color(0xFF521B00);
static const Color primaryContainer = Color(0xFFD9541F); // remplissage ember
static const Color onPrimaryContainer = Color(0xFF2B0A00);
static const Color inversePrimary = Color(0xFFA63B10);
// ============ SECONDARY (Warm Taupe) ============
static const Color secondary = Color(0xFFD3C6B2);
static const Color onSecondary = Color(0xFF382F21);
static const Color secondaryContainer = Color(0xFF504535);
static const Color onSecondaryContainer = Color(0xFFD8CCB9);
static const Color secondaryFixed = Color(0xFFF0E4D0);
static const Color secondaryFixedDim = Color(0xFFD3C6B2);
static const Color onSecondaryFixed = Color(0xFF231B0E);
static const Color onSecondaryFixedVariant = Color(0xFF4D4232);
/// Braise profonde — réservée aux **remplissages portant du texte**.
/// `primaryContainer` (#D9541F) est trop lumineux : blanc dessus plafonne
/// vers 3,9:1, sous le seuil AA de 4,5:1 pour du corps de texte. Cette
/// variante passe le seuil tout en restant la même couleur perçue.
static const Color primaryFill = Color(0xFFA8360C);
static const Color primaryFixed = Color(0xFFFFDBC8);
static const Color primaryFixedDim = Color(0xFFFFB68C);
static const Color onPrimaryFixed = Color(0xFF360F00);
static const Color onPrimaryFixedVariant = Color(0xFF7A2C08);
// ============ TERTIARY (Verdigris Teal) ============
static const Color tertiary = Color(0xFFA4CCBE);
static const Color onTertiary = Color(0xFF0F352B);
static const Color tertiaryContainer = Color(0xFF2F5A4C);
static const Color onTertiaryContainer = Color(0xFFC0E8D9);
static const Color tertiaryFixed = Color(0xFFC0E8D9);
static const Color tertiaryFixedDim = Color(0xFFA4CCBE);
static const Color onTertiaryFixed = Color(0xFF04201A);
static const Color onTertiaryFixedVariant = Color(0xFF274B40);
// ============ SECONDARY (Terre cuite / argile) ============
static const Color secondary = Color(0xFFE7C3AC);
static const Color onSecondary = Color(0xFF442A1B);
static const Color secondaryContainer = Color(0xFF5D4030);
static const Color onSecondaryContainer = Color(0xFFFFDCC8);
static const Color secondaryFixed = Color(0xFFFFDCC8);
static const Color secondaryFixedDim = Color(0xFFE7C3AC);
static const Color onSecondaryFixed = Color(0xFF2B160A);
static const Color onSecondaryFixedVariant = Color(0xFF5D4030);
// ============ TERTIARY (Laiton / doré patiné) ============
static const Color tertiary = Color(0xFFD9C88C);
static const Color onTertiary = Color(0xFF3A3016);
static const Color tertiaryContainer = Color(0xFF52472A);
static const Color onTertiaryContainer = Color(0xFFF6E4A6);
static const Color tertiaryFixed = Color(0xFFF6E4A6);
static const Color tertiaryFixedDim = Color(0xFFD9C88C);
static const Color onTertiaryFixed = Color(0xFF231B04);
static const Color onTertiaryFixedVariant = Color(0xFF52472A);
// ============ ERROR ============
static const Color error = Color(0xFFffb4ab);
static const Color onError = Color(0xFF690005);
static const Color errorContainer = Color(0xFF93000a);
static const Color onErrorContainer = Color(0xFFffdad6);
static const Color error = Color(0xFFFFB4A6);
static const Color onError = Color(0xFF5F1409);
static const Color errorContainer = Color(0xFF8C2416);
static const Color onErrorContainer = Color(0xFFFFDAD4);
// ============ OUTLINE ============
static const Color outline = Color(0xFF998F7C);
static const Color outlineVariant = Color(0xFF4A4334);
static const Color outline = Color(0xFF9C8878);
static const Color outlineVariant = Color(0xFF4A3C33);
// ============ INVERSE SURFACE ============
static const Color inverseSurface = Color(0xFFECE6DA);
static const Color inverseOnSurface = Color(0xFF332F26);
static const Color inverseSurface = Color(0xFFF3E9DF);
static const Color inverseOnSurface = Color(0xFF2A211C);
// ============ SURFACE TINT ============
static const Color surfaceTint = Color(0xFFFFB35C);
static const Color surfaceTint = Color(0xFFFFB68C);
// ============ TEXT / CONTENT COLORS ============
static const Color textPrimary = Color(0xFFECE6DA);
static const Color textSecondary = Color(0xFFCDC4B4);
static const Color textTertiary = Color(0xFF998F7C);
// ============ TEXT / CONTENT ============
static const Color textPrimary = Color(0xFFF3E9DF);
static const Color textSecondary = Color(0xFFC5B3A5);
static const Color textTertiary = Color(0xFF9C8878);
// ============ STATUS COLORS ============
static const Color success = Color(0xFF6BD89B);
static const Color warning = Color(0xFFFFAB00);
static const Color info = Color(0xFF64B6AC);
// ============ CRÈME À OPACITÉ (remplace les Colors.whiteNN) ============
// Déclarés `const` pour rester utilisables dans les widgets constants.
// Un blanc pur sur fond chaud tire vers le bleu : on décline la crème.
static const Color onSurface06 = Color(0x0FF3E9DF);
static const Color onSurface12 = Color(0x1FF3E9DF);
static const Color onSurface24 = Color(0x3DF3E9DF);
static const Color onSurface38 = Color(0x61F3E9DF);
static const Color onSurface54 = Color(0x8AF3E9DF);
// ============ CATEGORY COLORS (kept for semantic meaning) ============
static const Color live = Color(0xFFFF6E5E);
static const Color movies = Color(0xFFE8B64C);
static const Color series = Color(0xFF5FC9AE);
// ============ STATUS ============
static const Color success = Color(0xFF9BC46A); // olive lumineux
static const Color warning = Color(0xFFE9B23C); // ambre
static const Color info = Color(0xFFA3B8C4); // bleu-gris fumé
// ============ CATÉGORIES ============
static const Color live = Color(0xFFE5484D); // rouge enseigne
static const Color movies = Color(0xFFD9541F); // ember
static const Color series = Color(0xFFD9C88C); // laiton
// ============ RATING / PREMIUM ============
static const Color ratingGold = Color(0xFFFFD166);
static const Color premiumGold = Color(0xFFFFA000);
static const Color ratingGold = Color(0xFFE9B23C);
static const Color premiumGold = Color(0xFFC9922A);
// ============ GLASSMORPHISM LEVELS ============
static const Color glassLevel1Bg = Color(0x6614110C); // 40% opacity
static const Color glassLevel1Border = Color(0x1AFFE9C9); // 10% warm white
// ============ SHIMMER (placeholders de chargement) ============
static const Color shimmer = Color(0xFF2A211C);
static const Color shimmerHighlight = Color(0xFF3C302A);
static const Color glassLevel2Bg = Color(0x9914110C); // 60% opacity
static const Color glassLevel2Border = Color(0x1AFFE9C9); // 10% warm white
static const Color glassLevel2InnerGlow = Color(0x33FFB35C); // 20% primary top-left
// ============ SURFACES "GLASS" — désormais OPAQUES ============
// Noms conservés pour compatibilité avec les 33 sites d'appel existants.
// Plus aucune transparence : zéro BackdropFilter, zéro repaint coûteux.
static const Color glassLevel1Bg = Color(0xFF181310);
static const Color glassLevel1Border = Color(0x14F3E9DF); // crème 8 %
static const Color glassLevel2Bg = Color(0xFF1F1815);
static const Color glassLevel2Border = Color(0x1FF3E9DF); // crème 12 %
static const Color glassLevel2InnerGlow = Color(0x3DD9541F); // ember 24 %
// ============ GRADIENTS ============
/// Braise : orange brûlé vers rouge profond.
static const LinearGradient primaryGradient = LinearGradient(
colors: [Color(0xFFE8941A), Color(0xFFFFC36A)],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Color(0xFFE9701F), Color(0xFFC13A1C)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
/// Fond de salle : projecteur chaud en haut, obscurité en bas.
static const LinearGradient backgroundGradient = LinearGradient(
colors: [Color(0xFF0B0A08), Color(0xFF14110C)],
colors: [Color(0xFF1A1310), Color(0xFF0B0908)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
);
// ============ GLOW / SHADOWS ============
/// Voile d'affiche : lecture du texte par-dessus une jaquette.
static const LinearGradient posterScrim = LinearGradient(
colors: [Color(0x000B0908), Color(0xCC0B0908), Color(0xFF0B0908)],
stops: [0.0, 0.55, 1.0],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
);
/// Voile latéral pour les héros pleine largeur.
static const LinearGradient heroScrim = LinearGradient(
colors: [Color(0xF20B0908), Color(0x990B0908), Color(0x000B0908)],
stops: [0.0, 0.45, 1.0],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
);
// ============ GLOW / OMBRES ============
static Color glowPrimary(double opacity) =>
const Color(0xFFF39A1F).withOpacity(opacity);
const Color(0xFFD9541F).withValues(alpha: opacity);
static Color glowPrimaryDim(double opacity) =>
const Color(0xFFFFB35C).withOpacity(opacity);
const Color(0xFFFFB68C).withValues(alpha: opacity);
/// Ombre portée « projecteur » : profonde, chaude, jamais grise.
static List<BoxShadow> lift({double intensity = 1.0}) => [
BoxShadow(
color: const Color(0xFF000000).withValues(alpha: 0.55 * intensity),
blurRadius: 28 * intensity,
spreadRadius: -8,
offset: Offset(0, 12 * intensity),
),
];
/// Halo ember pour l'élément focalisé (navigation TV / télécommande).
static List<BoxShadow> emberFocus({double intensity = 1.0}) => [
BoxShadow(
color: const Color(0xFFD9541F).withValues(alpha: 0.45 * intensity),
blurRadius: 32 * intensity,
spreadRadius: -4,
),
BoxShadow(
color: const Color(0xFF000000).withValues(alpha: 0.6),
blurRadius: 24,
spreadRadius: -10,
offset: const Offset(0, 14),
),
];
// ============ COLOR SCHEMES ============
static ColorScheme get darkColorScheme => const ColorScheme.dark(
@@ -150,6 +218,7 @@ class AppColors {
onErrorContainer: onErrorContainer,
surface: surface,
onSurface: onSurface,
onSurfaceVariant: onSurfaceVariant,
surfaceContainerLowest: surfaceContainerLowest,
surfaceContainerLow: surfaceContainerLow,
surfaceContainer: surfaceContainer,
@@ -163,24 +232,27 @@ class AppColors {
brightness: Brightness.dark,
);
// Light scheme is minimal — Projector Noir is dark-first
/// Thème clair : « papier kraft » — même famille chaude, inversée.
static ColorScheme get lightColorScheme => const ColorScheme.light(
primary: Color(0xFF8F5B00),
primary: Color(0xFFA63B10),
onPrimary: Colors.white,
primaryContainer: Color(0xFFFFDDB3),
onPrimaryContainer: Color(0xFF2A1700),
secondary: Color(0xFF6F6353),
primaryContainer: Color(0xFFFFDBC8),
onPrimaryContainer: Color(0xFF360F00),
secondary: Color(0xFF765847),
onSecondary: Colors.white,
secondaryContainer: Color(0xFFF0E4D0),
onSecondaryContainer: Color(0xFF231B0E),
error: Color(0xFFba1a1a),
secondaryContainer: Color(0xFFFFDCC8),
onSecondaryContainer: Color(0xFF2B160A),
tertiary: Color(0xFF6A5F3F),
onTertiary: Colors.white,
error: Color(0xFFB3261E),
onError: Colors.white,
errorContainer: Color(0xFFFFdad6),
onErrorContainer: Color(0xFF410002),
surface: Color(0xFFFFF8F0),
onSurface: Color(0xFF1E1B15),
outline: Color(0xFF7F766A),
outlineVariant: Color(0xFFD0C5B4),
errorContainer: Color(0xFFFFDAD4),
onErrorContainer: Color(0xFF410E05),
surface: Color(0xFFFBF3EC),
onSurface: Color(0xFF201A16),
onSurfaceVariant: Color(0xFF52443B),
outline: Color(0xFF847369),
outlineVariant: Color(0xFFD6C3B7),
brightness: Brightness.light,
);
}
lib/core/theme/app_theme.dart
+404 -171
View File
@@ -2,15 +2,15 @@ import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'app_colors.dart';
/// XtremFlow Projector Noir Theme
/// XtremFlow — Thème « Warm Cinema »
///
/// Warm tungsten light on deep film-black.
/// Fonts: Syne (headlines, art-house geometric) + Instrument Sans (body/labels)
/// Style: Dark-first glassmorphism with tungsten amber accents.
/// Typo : Fraunces (display, serif éditorial) + Karla (corps / UI).
/// Style : charbon chaud, crème, orange brûlé. Profondeur par l'ombre,
/// jamais par le flou — aucun `BackdropFilter` dans tout le thème.
class AppTheme {
AppTheme._();
// ============ SPACING (8px rhythmic system) ============
// ============ ESPACEMENT (rythme 4 / 8) ============
static const double spacingXs = 4.0;
static const double spacingSm = 8.0;
static const double spacingBase = 8.0;
@@ -20,33 +20,69 @@ class AppTheme {
static const double spacing2xl = 48.0;
static const double spacing3xl = 80.0;
// ============ RADIUS ============
// Alias numériques (utilisés dans plusieurs écrans)
static const double spacing4 = 4.0;
static const double spacing8 = 8.0;
static const double spacing12 = 12.0;
static const double spacing16 = 16.0;
static const double spacing24 = 24.0;
static const double spacing32 = 32.0;
static const double spacing48 = 48.0;
// ============ RAYONS ============
// Cinéma : angles doux mais assumés, jamais des bulles.
static const double radiusNone = 0.0;
static const double radiusSm = 8.0;
static const double radiusMd = 12.0;
static const double radiusLg = 16.0;
static const double radiusXl = 24.0;
static const double radiusSm = 6.0;
static const double radiusMd = 10.0;
static const double radiusLg = 14.0;
static const double radiusXl = 20.0;
static const double radiusFull = 9999.0;
// ============ ANIMATION ============
static const Duration durationFast = Duration(milliseconds: 200);
static const Duration durationNormal = Duration(milliseconds: 300);
static const Duration durationSm = Duration(milliseconds: 200);
static const Duration durationMd = Duration(milliseconds: 300);
static const Duration durationLg = Duration(milliseconds: 400);
static const Duration durationXl = Duration(milliseconds: 500);
static const Curve curveDefault = Curves.fastOutSlowIn;
static const Curve curveSmooth = Curves.fastOutSlowIn;
// Rythme lent, « fondu de projection ».
static const Duration durationXs = Duration(milliseconds: 120);
static const Duration durationFast = Duration(milliseconds: 180);
static const Duration durationNormal = Duration(milliseconds: 260);
static const Duration durationSm = Duration(milliseconds: 180);
static const Duration durationMd = Duration(milliseconds: 260);
static const Duration durationLg = Duration(milliseconds: 380);
static const Duration durationXl = Duration(milliseconds: 520);
// ============ TYPOGRAPHY HELPERS ============
static TextStyle _syne({
static const Curve curveDefault = Curves.easeOutCubic;
static const Curve curveSmooth = Curves.easeOutCubic;
/// Courbe « entrée cinéma » : démarre vite, s'installe lentement.
static const Curve curveCinema = Cubic(0.16, 1.0, 0.3, 1.0);
// ============ TYPOGRAPHIE ============
/// Display serif éditorial — titres, héros, chiffres marquants.
static TextStyle display({
required double fontSize,
required FontWeight fontWeight,
double? letterSpacing,
double? height,
Color color = AppColors.onSurface,
FontStyle? fontStyle,
}) {
return GoogleFonts.fraunces(
fontSize: fontSize,
fontWeight: fontWeight,
letterSpacing: letterSpacing,
height: height,
color: color,
fontStyle: fontStyle,
);
}
/// Corps / UI — humaniste chaud, très lisible à distance TV.
static TextStyle body({
required double fontSize,
required FontWeight fontWeight,
double? letterSpacing,
double? height,
Color color = AppColors.onSurface,
}) {
return GoogleFonts.syne(
return GoogleFonts.karla(
fontSize: fontSize,
fontWeight: fontWeight,
letterSpacing: letterSpacing,
@@ -55,137 +91,178 @@ class AppTheme {
);
}
static TextStyle _instrumentSans({
/// Micro-label capitales espacées — « GÉNÉRIQUE DE FILM ».
static TextStyle eyebrow({
double fontSize = 11,
Color color = AppColors.textTertiary,
FontWeight fontWeight = FontWeight.w700,
}) {
return GoogleFonts.karla(
fontSize: fontSize,
fontWeight: fontWeight,
letterSpacing: 1.6,
height: 1.1,
color: color,
);
}
// Alias internes historiques
static TextStyle _display({
required double fontSize,
required FontWeight fontWeight,
double? letterSpacing,
double? height,
Color color = AppColors.onSurface,
}) {
return GoogleFonts.instrumentSans(
fontSize: fontSize,
fontWeight: fontWeight,
letterSpacing: letterSpacing,
height: height,
color: color,
);
}
}) =>
display(
fontSize: fontSize,
fontWeight: fontWeight,
letterSpacing: letterSpacing,
height: height,
color: color,
);
// ============ DARK THEME (Main) ============
static TextStyle _body({
required double fontSize,
required FontWeight fontWeight,
double? letterSpacing,
double? height,
Color color = AppColors.onSurface,
}) =>
body(
fontSize: fontSize,
fontWeight: fontWeight,
letterSpacing: letterSpacing,
height: height,
color: color,
);
// ============ THÈME SOMBRE (principal) ============
static ThemeData get darkTheme {
final baseTheme = ThemeData.dark(useMaterial3: true);
return baseTheme.copyWith(
colorScheme: AppColors.darkColorScheme,
scaffoldBackgroundColor: AppColors.background,
canvasColor: AppColors.background,
splashColor: AppColors.primaryContainer.withValues(alpha: 0.12),
highlightColor: AppColors.primaryContainer.withValues(alpha: 0.08),
// Typography
textTheme: TextTheme(
// Display / Headline (Syne)
displayLarge: _syne(
fontSize: 48,
// Display — Fraunces, serrée, autoritaire
displayLarge: _display(
fontSize: 56,
fontWeight: FontWeight.w700,
letterSpacing: -0.02,
height: 1.1,
letterSpacing: -1.4,
height: 1.02,
),
displayMedium: _syne(
displayMedium: _display(
fontSize: 40,
fontWeight: FontWeight.w600,
letterSpacing: -0.9,
height: 1.08,
),
displaySmall: _display(
fontSize: 30,
fontWeight: FontWeight.w600,
letterSpacing: -0.5,
height: 1.15,
),
headlineLarge: _display(
fontSize: 32,
fontWeight: FontWeight.w600,
letterSpacing: -0.01,
height: 1.2,
letterSpacing: -0.6,
height: 1.12,
),
displaySmall: _syne(
headlineMedium: _display(
fontSize: 24,
fontWeight: FontWeight.w500,
height: 1.3,
),
headlineLarge: _syne(
fontSize: 32,
fontWeight: FontWeight.w600,
letterSpacing: -0.01,
letterSpacing: -0.3,
height: 1.2,
),
headlineMedium: _syne(
fontSize: 24,
fontWeight: FontWeight.w500,
height: 1.3,
),
headlineSmall: _syne(
fontSize: 20,
fontWeight: FontWeight.w500,
height: 1.3,
),
titleLarge: _syne(
headlineSmall: _display(
fontSize: 20,
fontWeight: FontWeight.w600,
letterSpacing: -0.2,
height: 1.25,
),
titleMedium: _instrumentSans(
titleLarge: _display(
fontSize: 19,
fontWeight: FontWeight.w600,
letterSpacing: -0.1,
),
titleMedium: _body(
fontSize: 16,
fontWeight: FontWeight.w600,
fontWeight: FontWeight.w700,
letterSpacing: 0.1,
),
titleSmall: _instrumentSans(
titleSmall: _body(
fontSize: 14,
fontWeight: FontWeight.w600,
fontWeight: FontWeight.w700,
letterSpacing: 0.2,
),
// Body (Instrument Sans)
bodyLarge: _instrumentSans(
fontSize: 18,
// Corps — Karla
bodyLarge: _body(
fontSize: 17,
fontWeight: FontWeight.w400,
height: 1.6,
height: 1.62,
color: AppColors.onSurfaceVariant,
),
bodyMedium: _instrumentSans(
fontSize: 16,
bodyMedium: _body(
fontSize: 15,
fontWeight: FontWeight.w400,
height: 1.5,
height: 1.55,
color: AppColors.onSurfaceVariant,
),
bodySmall: _instrumentSans(
fontSize: 14,
bodySmall: _body(
fontSize: 13,
fontWeight: FontWeight.w400,
height: 1.4,
height: 1.45,
color: AppColors.onSurfaceVariant,
),
// Labels (Instrument Sans with tracking)
labelLarge: _instrumentSans(
fontSize: 14,
fontWeight: FontWeight.w600,
letterSpacing: 0.05,
// Labels — capitales espacées, esprit générique de film
labelLarge: _body(
fontSize: 13,
fontWeight: FontWeight.w700,
letterSpacing: 1.1,
height: 1.2,
),
labelMedium: _instrumentSans(
labelMedium: _body(
fontSize: 12,
fontWeight: FontWeight.w500,
letterSpacing: 0.02,
fontWeight: FontWeight.w600,
letterSpacing: 0.9,
height: 1.2,
),
labelSmall: _instrumentSans(
labelSmall: _body(
fontSize: 11,
fontWeight: FontWeight.w500,
letterSpacing: 0.02,
fontWeight: FontWeight.w600,
letterSpacing: 1.4,
height: 1.2,
color: AppColors.textTertiary,
),
),
// AppBar: Transparent glass
// AppBar : plate, sans élévation, le fond fait le travail
appBarTheme: AppBarTheme(
backgroundColor: Colors.transparent,
surfaceTintColor: Colors.transparent,
foregroundColor: AppColors.onSurface,
elevation: 0,
centerTitle: true,
centerTitle: false,
scrolledUnderElevation: 0,
titleTextStyle: _syne(
fontSize: 20,
titleTextStyle: _display(
fontSize: 22,
fontWeight: FontWeight.w600,
letterSpacing: -0.3,
),
),
// Inputs: Dark filled with amber glow on focus
// Champs : creusés dans la surface, liseré ember au focus
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: AppColors.surfaceContainerLow,
contentPadding: const EdgeInsets.symmetric(
horizontal: spacingLg,
horizontal: spacingMd,
vertical: spacingMd,
),
border: OutlineInputBorder(
@@ -198,84 +275,116 @@ class AppTheme {
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(radiusMd),
borderSide: const BorderSide(color: AppColors.primaryContainer, width: 2),
borderSide:
const BorderSide(color: AppColors.primaryContainer, width: 2),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(radiusMd),
borderSide: const BorderSide(color: AppColors.error, width: 1),
),
hintStyle: _instrumentSans(
fontSize: 16,
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(radiusMd),
borderSide: const BorderSide(color: AppColors.error, width: 2),
),
hintStyle: _body(
fontSize: 15,
fontWeight: FontWeight.w400,
color: AppColors.outline,
),
labelStyle: _instrumentSans(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppColors.onSurfaceVariant,
color: AppColors.textTertiary,
),
labelStyle: eyebrow(color: AppColors.onSurfaceVariant),
floatingLabelStyle: eyebrow(color: AppColors.primary),
),
// Buttons: Gradient primary, ghost secondary
// Boutons pleins : ember franc, coins nets
filledButtonTheme: FilledButtonThemeData(
style: FilledButton.styleFrom(
backgroundColor: AppColors.primaryContainer,
foregroundColor: AppColors.onPrimaryContainer,
backgroundColor: AppColors.primaryFill,
foregroundColor: AppColors.onSurface,
disabledBackgroundColor: AppColors.surfaceContainerHigh,
disabledForegroundColor: AppColors.textTertiary,
elevation: 0,
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
padding: const EdgeInsets.symmetric(horizontal: 26, vertical: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radiusMd),
),
textStyle: _instrumentSans(
fontSize: 14,
fontWeight: FontWeight.w600,
letterSpacing: 0.05,
textStyle: _body(
fontSize: 13,
fontWeight: FontWeight.w700,
letterSpacing: 1.1,
),
).copyWith(
overlayColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.hovered)) {
return Colors.white.withOpacity(0.1);
}
if (states.contains(WidgetState.pressed)) {
return Colors.white.withOpacity(0.2);
return Colors.black.withValues(alpha: 0.18);
}
if (states.contains(WidgetState.hovered) ||
states.contains(WidgetState.focused)) {
return AppColors.onSurface.withValues(alpha: 0.12);
}
return null;
}),
),
),
// Outlined buttons: ghost style
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.surfaceContainerHigh,
foregroundColor: AppColors.onSurface,
elevation: 0,
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radiusMd),
),
textStyle: _body(
fontSize: 13,
fontWeight: FontWeight.w700,
letterSpacing: 1.1,
),
),
),
// Boutons contour : liseré crème discret
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
foregroundColor: AppColors.onSurface,
side: const BorderSide(color: AppColors.outlineVariant, width: 1),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radiusMd),
),
textStyle: _instrumentSans(
fontSize: 14,
fontWeight: FontWeight.w600,
letterSpacing: 0.05,
textStyle: _body(
fontSize: 13,
fontWeight: FontWeight.w700,
letterSpacing: 1.1,
),
),
),
// Text buttons
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
foregroundColor: AppColors.primary,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
textStyle: _instrumentSans(
fontSize: 14,
fontWeight: FontWeight.w600,
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
textStyle: _body(
fontSize: 13,
fontWeight: FontWeight.w700,
letterSpacing: 0.8,
),
),
),
// Cards: Glass style
iconButtonTheme: IconButtonThemeData(
style: IconButton.styleFrom(
foregroundColor: AppColors.onSurfaceVariant,
hoverColor: AppColors.primaryContainer.withValues(alpha: 0.14),
highlightColor: AppColors.primaryContainer.withValues(alpha: 0.2),
),
),
// Cartes : surface opaque + ombre profonde (zéro blur)
cardTheme: CardThemeData(
color: AppColors.glassLevel1Bg,
color: AppColors.surfaceContainerLow,
surfaceTintColor: Colors.transparent,
shadowColor: Colors.black,
elevation: 0,
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
@@ -284,115 +393,239 @@ class AppTheme {
),
),
// Dialogs: Floating glass
// Dialogues : bloc opaque flottant
dialogTheme: DialogThemeData(
backgroundColor: AppColors.glassLevel2Bg,
elevation: 24,
backgroundColor: AppColors.surfaceContainer,
surfaceTintColor: Colors.transparent,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radiusXl),
side: const BorderSide(color: AppColors.glassLevel2Border, width: 1),
),
titleTextStyle: _syne(
fontSize: 20,
titleTextStyle: _display(
fontSize: 22,
fontWeight: FontWeight.w600,
letterSpacing: -0.3,
),
contentTextStyle: _instrumentSans(
fontSize: 16,
contentTextStyle: _body(
fontSize: 15,
fontWeight: FontWeight.w400,
height: 1.55,
color: AppColors.onSurfaceVariant,
),
),
// Bottom sheets
bottomSheetTheme: const BottomSheetThemeData(
backgroundColor: AppColors.surfaceContainerLow,
backgroundColor: AppColors.surfaceContainer,
surfaceTintColor: Colors.transparent,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(radiusXl)),
),
),
// Snackbars
snackBarTheme: SnackBarThemeData(
backgroundColor: AppColors.surfaceContainerHigh,
contentTextStyle: _instrumentSans(
backgroundColor: AppColors.surfaceContainerHighest,
contentTextStyle: _body(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppColors.onSurface,
),
actionTextColor: AppColors.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radiusMd),
),
behavior: SnackBarBehavior.floating,
elevation: 0,
),
// Chips: Pill shaped
// Chips : étiquettes de bobine
chipTheme: ChipThemeData(
backgroundColor: AppColors.primary.withOpacity(0.1),
deleteIconColor: AppColors.onSurface,
disabledColor: AppColors.surfaceContainerHighest,
selectedColor: AppColors.primaryContainer,
secondarySelectedColor: AppColors.primaryContainer,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
shape: StadiumBorder(
side: BorderSide(color: AppColors.primary.withOpacity(0.3)),
backgroundColor: AppColors.surfaceContainerHigh,
deleteIconColor: AppColors.onSurfaceVariant,
disabledColor: AppColors.surfaceContainer,
selectedColor: AppColors.primaryFill,
secondarySelectedColor: AppColors.primaryFill,
checkmarkColor: AppColors.onSurface,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
side: const BorderSide(color: AppColors.outlineVariant, width: 1),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radiusSm),
),
labelStyle: _instrumentSans(
fontSize: 12,
fontWeight: FontWeight.w500,
color: AppColors.onSurface,
),
secondaryLabelStyle: _instrumentSans(
labelStyle: _body(
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColors.onPrimaryContainer,
letterSpacing: 0.6,
color: AppColors.onSurfaceVariant,
),
secondaryLabelStyle: _body(
fontSize: 12,
fontWeight: FontWeight.w700,
letterSpacing: 0.6,
color: AppColors.onSurface,
),
),
// Tabs
// Onglets : soulignement ember épais
tabBarTheme: TabBarThemeData(
labelColor: AppColors.onSurface,
unselectedLabelColor: AppColors.outline,
unselectedLabelColor: AppColors.textTertiary,
indicatorColor: AppColors.primaryContainer,
labelStyle: _instrumentSans(fontSize: 14, fontWeight: FontWeight.w600),
unselectedLabelStyle: _instrumentSans(fontSize: 14, fontWeight: FontWeight.w500),
indicatorSize: TabBarIndicatorSize.label,
dividerColor: Colors.transparent,
labelStyle: _body(
fontSize: 14,
fontWeight: FontWeight.w700,
letterSpacing: 0.8,
),
unselectedLabelStyle: _body(
fontSize: 14,
fontWeight: FontWeight.w500,
letterSpacing: 0.8,
),
),
navigationRailTheme: NavigationRailThemeData(
backgroundColor: AppColors.surfaceContainerLowest,
indicatorColor: AppColors.primaryContainer.withValues(alpha: 0.22),
selectedIconTheme: const IconThemeData(color: AppColors.primary),
unselectedIconTheme: const IconThemeData(color: AppColors.textTertiary),
selectedLabelTextStyle: eyebrow(color: AppColors.primary),
unselectedLabelTextStyle: eyebrow(color: AppColors.textTertiary),
),
navigationBarTheme: NavigationBarThemeData(
backgroundColor: AppColors.surfaceContainerLowest,
surfaceTintColor: Colors.transparent,
indicatorColor: AppColors.primaryContainer.withValues(alpha: 0.22),
elevation: 0,
labelTextStyle: WidgetStateProperty.resolveWith(
(states) => eyebrow(
color: states.contains(WidgetState.selected)
? AppColors.primary
: AppColors.textTertiary,
),
),
iconTheme: WidgetStateProperty.resolveWith(
(states) => IconThemeData(
color: states.contains(WidgetState.selected)
? AppColors.primary
: AppColors.textTertiary,
size: 24,
),
),
),
// Divider
dividerTheme: const DividerThemeData(
color: AppColors.outlineVariant,
thickness: 1,
space: 1,
),
// Scrollbar
scrollbarTheme: ScrollbarThemeData(
thumbColor: WidgetStateProperty.all(AppColors.outlineVariant),
trackColor: WidgetStateProperty.all(Colors.transparent),
radius: const Radius.circular(4),
thickness: WidgetStateProperty.all(6),
radius: const Radius.circular(2),
thickness: WidgetStateProperty.all(5),
),
progressIndicatorTheme: const ProgressIndicatorThemeData(
color: AppColors.primaryContainer,
linearTrackColor: AppColors.surfaceContainerHigh,
circularTrackColor: Colors.transparent,
),
sliderTheme: SliderThemeData(
activeTrackColor: AppColors.primaryContainer,
inactiveTrackColor: AppColors.surfaceContainerHigh,
thumbColor: AppColors.primary,
overlayColor: AppColors.primaryContainer.withValues(alpha: 0.18),
trackHeight: 4,
),
// Switch
switchTheme: SwitchThemeData(
thumbColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return AppColors.onPrimary;
}
if (states.contains(WidgetState.selected)) return AppColors.onSurface;
return AppColors.outline;
}),
trackColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return AppColors.primaryContainer;
}
return AppColors.surfaceContainerHighest;
return AppColors.surfaceContainerHigh;
}),
trackOutlineColor:
WidgetStateProperty.all(AppColors.outlineVariant),
),
checkboxTheme: CheckboxThemeData(
fillColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return AppColors.primaryContainer;
}
return Colors.transparent;
}),
checkColor: WidgetStateProperty.all(AppColors.onSurface),
side: const BorderSide(color: AppColors.outline, width: 1.5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
),
tooltipTheme: TooltipThemeData(
decoration: BoxDecoration(
color: AppColors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(radiusSm),
border: Border.all(color: AppColors.outlineVariant),
),
textStyle: _body(
fontSize: 12,
fontWeight: FontWeight.w500,
color: AppColors.onSurface,
),
),
listTileTheme: ListTileThemeData(
iconColor: AppColors.onSurfaceVariant,
textColor: AppColors.onSurface,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radiusMd),
),
),
popupMenuTheme: PopupMenuThemeData(
color: AppColors.surfaceContainerHigh,
surfaceTintColor: Colors.transparent,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radiusMd),
side: const BorderSide(color: AppColors.outlineVariant),
),
textStyle: _body(fontSize: 14, fontWeight: FontWeight.w500),
),
);
}
// Light theme is minimal — Projector Noir is dark-first
static ThemeData get lightTheme => ThemeData.light(useMaterial3: true).copyWith(
colorScheme: AppColors.lightColorScheme,
scaffoldBackgroundColor: AppColors.lightColorScheme.surface,
textTheme: GoogleFonts.instrumentSansTextTheme(ThemeData.light().textTheme),
);
// ============ THÈME CLAIR (« papier kraft ») ============
static ThemeData get lightTheme {
final scheme = AppColors.lightColorScheme;
return ThemeData.light(useMaterial3: true).copyWith(
colorScheme: scheme,
scaffoldBackgroundColor: scheme.surface,
textTheme: GoogleFonts.karlaTextTheme(ThemeData.light().textTheme),
appBarTheme: AppBarTheme(
backgroundColor: Colors.transparent,
surfaceTintColor: Colors.transparent,
foregroundColor: scheme.onSurface,
elevation: 0,
centerTitle: false,
titleTextStyle: GoogleFonts.fraunces(
fontSize: 22,
fontWeight: FontWeight.w600,
letterSpacing: -0.3,
color: scheme.onSurface,
),
),
);
}
}
lib/core/widgets/components/hero_carousel.dart
+4 -3
View File
@@ -107,6 +107,7 @@ class _HeroCarouselState extends State<HeroCarousel> {
CachedNetworkImage(
imageUrl: item.imageUrl,
fit: BoxFit.cover,
memCacheWidth: 1280,
placeholder: (context, url) => Container(color: AppColors.surfaceContainerLow),
errorWidget: (context, url, error) => Container(
color: AppColors.surfaceContainerLow,
@@ -140,7 +141,7 @@ class _HeroCarouselState extends State<HeroCarousel> {
children: [
Text(
item.title,
style: GoogleFonts.syne(
style: GoogleFonts.fraunces(
fontSize: 32,
fontWeight: FontWeight.bold,
color: AppColors.onSurface,
@@ -152,7 +153,7 @@ class _HeroCarouselState extends State<HeroCarousel> {
const SizedBox(height: 8),
Text(
item.subtitle!,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 16,
color: AppColors.onSurface,
),
@@ -245,7 +246,7 @@ class _HeroButtonState extends State<_HeroButton> {
const SizedBox(width: 8),
Text(
widget.label,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontWeight: FontWeight.w600,
),
lib/core/widgets/components/ui_components.dart
+7 -6
View File
@@ -149,7 +149,7 @@ class _GradientButtonState extends State<GradientButton>
],
Text(
widget.label,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontWeight: FontWeight.w600,
fontSize: 14,
@@ -253,7 +253,7 @@ class LiveBadge extends StatelessWidget {
const SizedBox(width: 4),
Text(
'LIVE',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontSize: 10,
fontWeight: FontWeight.w700,
@@ -302,7 +302,7 @@ class CategoryChip extends StatelessWidget {
),
child: Text(
label,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? AppColors.primary : AppColors.onSurfaceVariant,
@@ -413,6 +413,7 @@ class _MediaCardState extends State<MediaCard>
CachedNetworkImage(
imageUrl: widget.imageUrl!,
fit: BoxFit.cover,
memCacheWidth: 400,
placeholder: (context, url) => Container(
color: AppColors.surfaceContainerLow,
child: Center(
@@ -458,7 +459,7 @@ class _MediaCardState extends State<MediaCard>
const SizedBox(width: 4),
Text(
widget.rating!,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurface,
fontSize: 10,
fontWeight: FontWeight.w700,
@@ -502,7 +503,7 @@ class _MediaCardState extends State<MediaCard>
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: _isHovered
? AppColors.primary
: AppColors.onSurface,
@@ -518,7 +519,7 @@ class _MediaCardState extends State<MediaCard>
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
color: AppColors.onSurfaceVariant,
fontSize: 11,
),
lib/core/widgets/digital_clock.dart
+3 -3
View File
@@ -32,13 +32,13 @@ class _DigitalClockState extends State<DigitalClock> {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
color: AppColors.onSurface.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.white.withOpacity(0.05)),
border: Border.all(color: AppColors.onSurface.withOpacity(0.05)),
),
child: Text(
timeString,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontWeight: FontWeight.w600,
fontSize: 16,
color: AppColors.onSurface,
lib/core/widgets/glass_container.dart
+106 -85
View File
@@ -1,12 +1,19 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
/// Glassmorphism container with 3 depth levels (Stitch Design System)
/// Conteneur de surface « Warm Cinema » — 3 niveaux de profondeur.
///
/// Level 0: Pure base background (#0F1014), no blur.
/// Level 1: Translucent layer with backdrop blur 20px, 1px border 10% white.
/// Level 2: High-blur floating container with subtle inner glow in primary accent.
/// Level 0 : socle brut (#0B0908), aucune ombre.
/// Level 1 : plaque opaque légèrement éclaircie, liseré crème 8 %, ombre douce.
/// Level 2 : bloc flottant, liseré ember sur l'arête haute, ombre profonde.
///
/// PERF : cette version n'utilise **aucun** `BackdropFilter`. Le flou de fond
/// forçait Flutter Web à relire le framebuffer à chaque frame pour chaque
/// carte à l'écran (33 sites d'appel ici) — cause principale du jank au
/// scroll. La profondeur est désormais rendue par des surfaces opaques
/// pré-teintées et des ombres, ce qui coûte quasiment rien au GPU.
///
/// L'API publique est inchangée : aucun site d'appel n'a besoin d'être modifié.
enum GlassLevel { level0, level1, level2 }
class GlassContainer extends StatelessWidget {
@@ -21,6 +28,14 @@ class GlassContainer extends StatelessWidget {
final bool border;
final List<BoxShadow>? boxShadow;
/// Alias de [border] (nom utilisé par les widgets de navigation TV).
/// Prioritaire sur [border] lorsqu'il est fourni.
final bool? hasBorder;
/// Passer `false` supprime toute ombre portée — utile pour les barres
/// collées à un bord, où l'ombre créerait une couture visible.
final bool showShadow;
const GlassContainer({
super.key,
required this.child,
@@ -28,14 +43,18 @@ class GlassContainer extends StatelessWidget {
this.height,
this.padding = const EdgeInsets.all(16),
this.margin,
this.borderRadius = 16.0,
this.borderRadius = 14.0,
this.level = GlassLevel.level1,
this.borderColor,
this.border = true,
this.boxShadow,
this.hasBorder,
this.showShadow = true,
});
/// Convenience constructor for Level 0 (pure base)
bool get _showBorder => hasBorder ?? border;
/// Niveau 0 — socle brut.
const GlassContainer.base({
super.key,
required this.child,
@@ -43,13 +62,15 @@ class GlassContainer extends StatelessWidget {
this.height,
this.padding = const EdgeInsets.all(16),
this.margin,
this.borderRadius = 16.0,
this.borderRadius = 14.0,
this.borderColor,
this.border = false,
this.boxShadow,
this.hasBorder,
this.showShadow = true,
}) : level = GlassLevel.level0;
/// Convenience constructor for Level 1 (standard glass)
/// Niveau 1 — plaque standard.
const GlassContainer.glass({
super.key,
required this.child,
@@ -57,13 +78,15 @@ class GlassContainer extends StatelessWidget {
this.height,
this.padding = const EdgeInsets.all(16),
this.margin,
this.borderRadius = 16.0,
this.borderRadius = 14.0,
this.borderColor,
this.border = true,
this.boxShadow,
this.hasBorder,
this.showShadow = true,
}) : level = GlassLevel.level1;
/// Convenience constructor for Level 2 (floating with inner glow)
/// Niveau 2 — bloc flottant (modales, panneaux, overlays).
const GlassContainer.floating({
super.key,
required this.child,
@@ -71,10 +94,12 @@ class GlassContainer extends StatelessWidget {
this.height,
this.padding = const EdgeInsets.all(16),
this.margin,
this.borderRadius = 24.0,
this.borderRadius = 20.0,
this.borderColor,
this.border = true,
this.boxShadow,
this.hasBorder,
this.showShadow = true,
}) : level = GlassLevel.level2;
@override
@@ -98,12 +123,13 @@ class GlassContainer extends StatelessWidget {
decoration: BoxDecoration(
color: AppColors.baseLevel0,
borderRadius: BorderRadius.circular(borderRadius),
border: border
border: _showBorder
? Border.all(
color: borderColor ?? Colors.transparent,
width: 1,
)
: null,
boxShadow: showShadow ? boxShadow : null,
),
child: child,
);
@@ -114,34 +140,29 @@ class GlassContainer extends StatelessWidget {
width: width,
height: height,
margin: margin,
child: ClipRRect(
padding: padding,
decoration: BoxDecoration(
color: AppColors.glassLevel1Bg,
borderRadius: BorderRadius.circular(borderRadius),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
padding: padding,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(borderRadius),
color: AppColors.glassLevel1Bg,
border: border
? Border.all(
color: borderColor ?? AppColors.glassLevel1Border,
width: 1,
)
: null,
boxShadow: boxShadow ??
[
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 20,
spreadRadius: -5,
),
],
),
child: child,
),
),
border: _showBorder
? Border.all(
color: borderColor ?? AppColors.glassLevel1Border,
width: 1,
)
: null,
boxShadow: !showShadow
? null
: boxShadow ??
const [
BoxShadow(
color: Color(0x59000000), // noir 35 %
blurRadius: 18,
spreadRadius: -6,
offset: Offset(0, 8),
),
],
),
child: child,
);
}
@@ -150,54 +171,54 @@ class GlassContainer extends StatelessWidget {
width: width,
height: height,
margin: margin,
child: ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 40, sigmaY: 40),
child: Container(
padding: padding,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(borderRadius),
color: AppColors.glassLevel2Bg,
border: border
? Border(
top: BorderSide(
color: borderColor ?? AppColors.glassLevel2InnerGlow,
width: 1,
),
left: BorderSide(
color: borderColor ?? AppColors.glassLevel2InnerGlow,
width: 1,
),
right: BorderSide(
color: borderColor ?? AppColors.glassLevel2Border,
width: 1,
),
bottom: BorderSide(
color: borderColor ?? AppColors.glassLevel2Border,
width: 1,
),
)
: null,
boxShadow: boxShadow ??
[
BoxShadow(
color: Colors.black.withOpacity(0.5),
blurRadius: 30,
spreadRadius: -10,
offset: const Offset(0, 10),
),
BoxShadow(
color: AppColors.primary.withOpacity(0.1),
blurRadius: 40,
spreadRadius: -10,
),
],
),
child: child,
),
padding: padding,
decoration: BoxDecoration(
// Dégradé très court : arête haute captant la « lumière du projecteur ».
gradient: const LinearGradient(
colors: [Color(0xFF262019), Color(0xFF1F1815)],
stops: [0.0, 0.45],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
borderRadius: BorderRadius.circular(borderRadius),
border: _showBorder
? Border(
top: BorderSide(
color: borderColor ?? AppColors.glassLevel2InnerGlow,
width: 1,
),
left: BorderSide(
color: borderColor ?? AppColors.glassLevel2Border,
width: 1,
),
right: BorderSide(
color: borderColor ?? AppColors.glassLevel2Border,
width: 1,
),
bottom: BorderSide(
color: borderColor ?? AppColors.glassLevel2Border,
width: 1,
),
)
: null,
boxShadow: !showShadow
? null
: boxShadow ??
const [
BoxShadow(
color: Color(0xA6000000), // noir 65 %
blurRadius: 40,
spreadRadius: -12,
offset: Offset(0, 20),
),
BoxShadow(
color: Color(0x1FD9541F), // halo ember 12 %
blurRadius: 48,
spreadRadius: -18,
),
],
),
child: child,
);
}
}
lib/core/widgets/hero_carousel.dart
+6 -5
View File
@@ -179,6 +179,7 @@ class _HeroCarouselState extends State<HeroCarousel>
Image.network(
item.imageUrl!,
fit: BoxFit.cover,
cacheWidth: 1280,
errorBuilder: (context, error, stackTrace) {
return Container(
color: AppColors.surface,
@@ -220,7 +221,7 @@ class _HeroCarouselState extends State<HeroCarousel>
),
child: Text(
item.badge!,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 12,
fontWeight: FontWeight.w700,
color: AppColors.primary,
@@ -233,7 +234,7 @@ class _HeroCarouselState extends State<HeroCarousel>
item.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.syne(
style: GoogleFonts.fraunces(
fontSize: 48,
fontWeight: FontWeight.w800,
color: AppColors.textPrimary,
@@ -247,7 +248,7 @@ class _HeroCarouselState extends State<HeroCarousel>
item.subtitle!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 16,
fontWeight: FontWeight.w400,
color: AppColors.textSecondary,
@@ -292,7 +293,7 @@ class _HeroCarouselState extends State<HeroCarousel>
const SizedBox(width: 8),
Text(
'Play',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 16,
fontWeight: FontWeight.w700,
color: AppColors.primary,
@@ -330,7 +331,7 @@ class _HeroCarouselState extends State<HeroCarousel>
const SizedBox(width: 8),
Text(
'More Info',
style: GoogleFonts.instrumentSans(
style: GoogleFonts.karla(
fontSize: 16,
fontWeight: FontWeight.w700,
color: AppColors.textPrimary,
lib/core/widgets/themed_loading_screen.dart
+29 -24
View File
@@ -1,44 +1,49 @@
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../theme/app_colors.dart';
/// Stitch-themed loading screen with dark gradient and blue accent.
/// Écran de chargement « Warm Cinema » — salle qui s'éteint avant projection.
class ThemedLoading extends StatelessWidget {
const ThemedLoading({super.key});
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
AppColors.baseLevel0,
AppColors.background,
],
),
),
return const DecoratedBox(
decoration: BoxDecoration(gradient: AppColors.backgroundGradient),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const CircularProgressIndicator(
color: AppColors.primaryContainer,
strokeWidth: 3,
),
const SizedBox(height: 16),
Text(
'Loading...',
style: GoogleFonts.instrumentSans(
color: AppColors.onSurfaceVariant,
fontSize: 14,
fontWeight: FontWeight.w500,
SizedBox(
width: 34,
height: 34,
child: CircularProgressIndicator(
color: AppColors.primaryContainer,
strokeWidth: 2,
),
),
SizedBox(height: 20),
_LoadingLabel(),
],
),
),
);
}
}
class _LoadingLabel extends StatelessWidget {
const _LoadingLabel();
@override
Widget build(BuildContext context) {
return Text(
'PROJECTION',
style: GoogleFonts.karla(
color: AppColors.textTertiary,
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 3.2,
),
);
}
}