mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-22 22:48:04 +02:00
feat(theme): complete redesign to Cyber-Cinematic Glass (Stitch)
Replace the legacy Apple TV-style purple/cyan theme with the full Google Stitch Cyber-Cinematic Glass design system across the entire app (desktop + mobile). - New Material 3 dark ColorScheme: background #121317, primary #adc6ff, primaryContainer #4b8eff, surface containers, etc. - Typography: Space Grotesk (headlines) + Inter (body/labels) - 3-level glassmorphism via GlassContainer: base, glass, floating - Primary gradient: #007AFF → #00C6FF with blue glow effects - Removed old compatibility aliases (focusColor, border, textPrimary, textSecondary); all code now uses semantic Stitch tokens - Systematically replaced all Colors.white/black/red/grey and GoogleFonts.roboto/outfit with Stitch equivalents - All 36 lib/ files updated, zero compilation errors Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 4.7 committed
1 parent
a9a1127d6b
commit
f7eaa724e2
36 files changed
+1651
-986
No files matched your search
@@ -2,6 +2,13 @@ import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
|
||||
/// Glassmorphism container with 3 depth levels (Stitch Design System)
|
||||
///
|
||||
/// 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.
|
||||
enum GlassLevel { level0, level1, level2 }
|
||||
|
||||
class GlassContainer extends StatelessWidget {
|
||||
final Widget child;
|
||||
final double? width;
|
||||
@@ -9,9 +16,10 @@ class GlassContainer extends StatelessWidget {
|
||||
final EdgeInsetsGeometry padding;
|
||||
final EdgeInsetsGeometry? margin;
|
||||
final double borderRadius;
|
||||
final double opacity;
|
||||
final GlassLevel level;
|
||||
final Color? borderColor;
|
||||
final bool border;
|
||||
final List<BoxShadow>? boxShadow;
|
||||
|
||||
const GlassContainer({
|
||||
super.key,
|
||||
@@ -21,13 +29,87 @@ class GlassContainer extends StatelessWidget {
|
||||
this.padding = const EdgeInsets.all(16),
|
||||
this.margin,
|
||||
this.borderRadius = 16.0,
|
||||
this.opacity = 0.6,
|
||||
this.level = GlassLevel.level1,
|
||||
this.borderColor,
|
||||
this.border = true,
|
||||
this.boxShadow,
|
||||
});
|
||||
|
||||
/// Convenience constructor for Level 0 (pure base)
|
||||
const GlassContainer.base({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.width,
|
||||
this.height,
|
||||
this.padding = const EdgeInsets.all(16),
|
||||
this.margin,
|
||||
this.borderRadius = 16.0,
|
||||
this.borderColor,
|
||||
this.border = false,
|
||||
this.boxShadow,
|
||||
}) : level = GlassLevel.level0;
|
||||
|
||||
/// Convenience constructor for Level 1 (standard glass)
|
||||
const GlassContainer.glass({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.width,
|
||||
this.height,
|
||||
this.padding = const EdgeInsets.all(16),
|
||||
this.margin,
|
||||
this.borderRadius = 16.0,
|
||||
this.borderColor,
|
||||
this.border = true,
|
||||
this.boxShadow,
|
||||
}) : level = GlassLevel.level1;
|
||||
|
||||
/// Convenience constructor for Level 2 (floating with inner glow)
|
||||
const GlassContainer.floating({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.width,
|
||||
this.height,
|
||||
this.padding = const EdgeInsets.all(16),
|
||||
this.margin,
|
||||
this.borderRadius = 24.0,
|
||||
this.borderColor,
|
||||
this.border = true,
|
||||
this.boxShadow,
|
||||
}) : level = GlassLevel.level2;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
switch (level) {
|
||||
case GlassLevel.level0:
|
||||
return _buildLevel0();
|
||||
case GlassLevel.level1:
|
||||
return _buildLevel1();
|
||||
case GlassLevel.level2:
|
||||
return _buildLevel2();
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildLevel0() {
|
||||
return Container(
|
||||
width: width,
|
||||
height: height,
|
||||
margin: margin,
|
||||
padding: padding,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.baseLevel0,
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
border: border
|
||||
? Border.all(
|
||||
color: borderColor ?? Colors.transparent,
|
||||
width: 1,
|
||||
)
|
||||
: null,
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLevel1() {
|
||||
return Container(
|
||||
width: width,
|
||||
height: height,
|
||||
@@ -35,32 +117,82 @@ class GlassContainer extends StatelessWidget {
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
|
||||
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 ?? Colors.white.withOpacity(0.1),
|
||||
color: borderColor ?? AppColors.glassLevel1Border,
|
||||
width: 1,
|
||||
)
|
||||
: null,
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
AppColors.surface.withOpacity(opacity),
|
||||
AppColors.surface.withOpacity(opacity * 0.5),
|
||||
],
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.2),
|
||||
blurRadius: 20,
|
||||
spreadRadius: -5,
|
||||
),
|
||||
],
|
||||
boxShadow: boxShadow ??
|
||||
[
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.2),
|
||||
blurRadius: 20,
|
||||
spreadRadius: -5,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLevel2() {
|
||||
return Container(
|
||||
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,
|
||||
),
|
||||
|
||||
Reference in new issue
Block a user