mirror of
https://github.com/block/buzz.git
synced 2026-11-13 04:41:12 +00:00
962b3fdd88
Adds a blurred, saturated backdrop to mobile’s **Choose avatar** screen that crossfades with the selected avatar or emoji color. Enlarged artwork keeps the effect abstract; the upper fade leaves the bottom controls clear. Supports reduced motion and high contrast. Validated with analysis, the full mobile suite (4,518 passed), light/dark widget previews, and an iPhone Air install with the existing account preserved. ### Snapshots Flutter widget captures: | | Before | After | |---|---|---| | Light |  |  | | Dark |  |  | buzz-review-completed Signed-off-by: kenny lopez <klopez4212@gmail.com> Co-authored-by: Terp <5856f6900e8e0a4e0ea1f4f8d2ee33e4753d2119bc122f94ecafc660b46c0511@buzz.block.builderlab.xyz>
105 lines
4.1 KiB
Dart
105 lines
4.1 KiB
Dart
import 'dart:ui' as ui;
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
import 'agent_avatar_picker.dart';
|
|
|
|
/// A soft artwork tint behind the avatar editor, matching desktop creation.
|
|
class AgentAvatarBackdrop extends StatelessWidget {
|
|
const AgentAvatarBackdrop({super.key, required this.selection});
|
|
|
|
final AgentAvatarSelection selection;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
if (MediaQuery.highContrastOf(context)) return const SizedBox.expand();
|
|
return IgnorePointer(
|
|
child: ExcludeSemantics(
|
|
child: ClipRect(
|
|
child: ShaderMask(
|
|
blendMode: BlendMode.dstIn,
|
|
shaderCallback: (bounds) => const LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
// Keep the wash near the portrait; the lower controls sit clear.
|
|
colors: [Colors.white, Color(0x66FFFFFF), Colors.transparent],
|
|
stops: [0, 0.25, 0.68],
|
|
).createShader(bounds),
|
|
child: AnimatedSwitcher(
|
|
duration: MediaQuery.disableAnimationsOf(context)
|
|
? Duration.zero
|
|
: const Duration(milliseconds: 240),
|
|
layoutBuilder: (current, previous) => Stack(
|
|
fit: StackFit.expand,
|
|
children: [...previous, ?current],
|
|
),
|
|
child: RepaintBoundary(
|
|
key: ValueKey((
|
|
selection.url,
|
|
selection.bytes,
|
|
selection.color,
|
|
)),
|
|
child: Opacity(
|
|
opacity: selection.emoji != null ? 0.14 : 0.64,
|
|
child: ImageFiltered(
|
|
imageFilter: ui.ImageFilter.blur(sigmaX: 40, sigmaY: 40),
|
|
child: Transform.scale(
|
|
// Crop into the artwork so it reads as abstract color.
|
|
scale: 3.5,
|
|
alignment: const Alignment(0, 0.12),
|
|
child: selection.emoji != null
|
|
? ColoredBox(color: Color(selection.color!))
|
|
: ColorFiltered(
|
|
// The desktop backdrop uses saturate(4).
|
|
colorFilter: const ColorFilter.matrix([
|
|
3.3622,
|
|
-2.1456,
|
|
-0.2166,
|
|
0,
|
|
0,
|
|
-0.6378,
|
|
1.8544,
|
|
-0.2166,
|
|
0,
|
|
0,
|
|
-0.6378,
|
|
-2.1456,
|
|
3.7834,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
]),
|
|
child: selection.bytes != null
|
|
? Image.memory(
|
|
selection.bytes!,
|
|
fit: BoxFit.cover,
|
|
cacheWidth: 256,
|
|
excludeFromSemantics: true,
|
|
errorBuilder: (_, _, _) =>
|
|
const SizedBox.expand(),
|
|
)
|
|
: Image.network(
|
|
selection.url!,
|
|
fit: BoxFit.cover,
|
|
cacheWidth: 256,
|
|
excludeFromSemantics: true,
|
|
errorBuilder: (_, _, _) =>
|
|
const SizedBox.expand(),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|