ayushyaandClaude Opus 5.5
c2540ec2ce
The viewer's top/bottom bars still used the pre-rework FrostedGlassContainer verbatim: a floating inset pill with a Material colorScheme tint, an outline border and a drop shadow (violating the design system's no-shadow rule), and theme-derived icon colors that went near-invisible against the new dark panel in light mode. The video transport controls were a second, separate floating pill above the action bar instead of one continuous panel. - FrostedGlassContainer: drop the shadow/border/ColorScheme tint for a fixed dark translucent fill matching the approved design canvas: no shadow anywhere in this screen now. - file_viewer_screen.dart: top/bottom bars sit flush edge-to-edge (no floating-pill inset) with a gradient scrim behind each, and use fixed white (not theme-derived) text/icon color, since this chrome always sits over a black media stage regardless of app theme. - ViewerIconButton: same fix - fixed white by default instead of colors.fg1. - MediaActionBar: takes an optional transportControls slot so video's transport row renders inside the same panel as the action row, above a thin divider, instead of as a separate floating pill. - MediaVideoPreview: renders only the video surface now; reports its controller up via onController (only when active, so a neighboring PageView page can't steal the transport row) instead of owning a floating panel. VideoTransportControls is the extracted, chrome-less transport row content, rendered by the parent via MediaActionBar's new slot. Verified live on device: photo and video viewing, favorite/delete coloring, and the merged transport+action panel all match the approved canvas (https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
58 lines
2.1 KiB
Dart
58 lines
2.1 KiB
Dart
import 'dart:ui';
|
|
import 'package:flutter/material.dart';
|
|
|
|
/// The blurred/translucent chrome for the media viewer's overlay bars
|
|
/// (`file_viewer_screen.dart`'s top bar, `MediaActionBar`, the video
|
|
/// transport row) - the one deliberate exception to the design system's
|
|
/// flat, no-shadow product UI (DESIGN_SYSTEM.md 1.4), since this chrome
|
|
/// floats over photo/video content rather than over the app's own
|
|
/// surfaces. No shadow, no outline, no `ColorScheme` tint: a fixed dark
|
|
/// translucent fill (`color`) that reads correctly over any media,
|
|
/// regardless of the app's light/dark theme - matching the canvas at
|
|
/// https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4.
|
|
class FrostedGlassContainer extends StatelessWidget {
|
|
final Widget child;
|
|
final double borderRadius;
|
|
|
|
/// Blur sigma for the backdrop filter. Defaults to a fixed value; pass an
|
|
/// explicit value (e.g. from user settings) to make it adjustable.
|
|
final double blurSigma;
|
|
|
|
/// Opacity (0-1) of the tonal fill behind the blur. Defaults to a fixed
|
|
/// value; pass an explicit value (e.g. from user settings) to make it
|
|
/// adjustable.
|
|
final double opacity;
|
|
|
|
/// The tint under the blur. Defaults to the design's fixed dark tone
|
|
/// (`#141311`, the spec's `fg-1` dark value) - deliberately not a
|
|
/// `ColorScheme`/`NooColors` lookup, since this chrome always sits over a
|
|
/// black media stage, not over a themed surface.
|
|
final Color color;
|
|
|
|
const FrostedGlassContainer({
|
|
super.key,
|
|
required this.child,
|
|
this.borderRadius = 0,
|
|
this.blurSigma = 20,
|
|
this.opacity = 0.55,
|
|
this.color = const Color(0xFF141311),
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return ClipRRect(
|
|
borderRadius: BorderRadius.circular(borderRadius),
|
|
child: BackdropFilter(
|
|
filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: color.withValues(alpha: opacity),
|
|
borderRadius: BorderRadius.circular(borderRadius),
|
|
),
|
|
child: child,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|