feat: add mobile scaffold layout and dedicated mobile video player implementation

This commit is contained in:
Michael committed 2026-03-29 12:07:14 +02:00
1 parent 36a7658cf9
commit ddb8110c40
3 files changed
+201 -244

No files matched your search

+49 -44
View File
@@ -55,56 +55,61 @@ class GlassContainer extends StatelessWidget {
final finalBgColor = backgroundColor ?? AppColors.glassBackground;
final finalBorderColor = borderColor ?? AppColors.glassBorder;
// BackdropFilter is extremely expensive in Flutter Web on mobile Safari.
// On mobile web (width < 600), skip the blur entirely.
final screenWidth = MediaQuery.of(context).size.width;
final useBlur = blur > 0 && !(Theme.of(context).platform == TargetPlatform.iOS && screenWidth < 600);
final inner = Container(
padding: padding,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(borderRadius),
gradient: showGradient
? LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
finalBgColor.withOpacity(finalOpacity * 1.2),
finalBgColor.withOpacity(finalOpacity * 0.6),
],
)
: null,
color: showGradient ? null : finalBgColor.withOpacity(finalOpacity),
border: hasBorder
? Border.all(color: finalBorderColor, width: borderWidth)
: null,
boxShadow: showShadow
? [
BoxShadow(
color: Colors.black.withOpacity(0.15),
blurRadius: 24,
spreadRadius: -6,
offset: const Offset(0, 8),
),
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 12,
spreadRadius: -3,
offset: const Offset(0, 4),
),
]
: [],
),
child: child,
);
return Container(
width: width,
height: height,
margin: margin,
child: ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
child: Container(
padding: padding,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(borderRadius),
// Subtle gradient overlay for depth
gradient: showGradient
? LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
finalBgColor.withOpacity(finalOpacity * 1.2),
finalBgColor.withOpacity(finalOpacity * 0.6),
],
)
: null,
border: hasBorder
? Border.all(
color: finalBorderColor,
width: borderWidth,
)
: null,
// Premium shadow
boxShadow: showShadow
? [
BoxShadow(
color: Colors.black.withOpacity(0.15),
blurRadius: 24,
spreadRadius: -6,
offset: const Offset(0, 8),
),
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 12,
spreadRadius: -3,
offset: const Offset(0, 4),
),
]
: [],
),
child: child,
),
),
child: useBlur
? BackdropFilter(
filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
child: inner,
)
: inner,
),
);
}
+2 -8
View File
@@ -1,7 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:google_fonts/google_fonts.dart';
import 'dart:ui';
import '../../core/theme/app_colors.dart';
class MobileScaffold extends ConsumerWidget {
@@ -42,12 +41,9 @@ class MobileScaffold extends ConsumerWidget {
child,
],
),
bottomNavigationBar: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
bottomNavigationBar: Container(
decoration: BoxDecoration(
color: AppColors.surface.withOpacity(0.9),
color: AppColors.surface,
border: const Border(
top: BorderSide(
color: AppColors.border,
@@ -90,8 +86,6 @@ class MobileScaffold extends ConsumerWidget {
],
),
),
),
),
);
}
}