fix(alarma-sonando): pulsing halo, hero-time metrics, art size, snooze icon
Tier 4 visual fidelity, audit 9.1/9.5/9.6/9.8 (t4 lines 411-428): - 9.1: new _HaloPulsante renders the prototype's 420px amber radial gradient behind the hero content. Deliberately BOUNDED (one grow-and-settle cycle), not the prototype's literal `infinite` CSS animation: this screen's protected dismiss-guard test calls pumpAndSettle() after every mount/interaction, and a genuinely infinite AnimationController.repeat() would hang it forever with no way to fix it. Skips its Animate wrapper under reduced motion, same as every other entry animation in this app. - 9.5: the hero time gets a local letterSpacing/height override (-4/0.95) instead of the shared heroTime token's -2.0/1.0 — the alarm editor's hour block is the token's other consumer and still wants height:1, so the shared style is untouched. - 9.6: ringing-screen art grows from 168/radiusLg(30) to 180/36 (t4 line 421), a local constant like the existing stop-button radius. - 9.8: the POSPONER eyebrow regains its 19px warmCoral snooze icon. All 5 protected files (including the dismiss-guard test) remain empty-diff against main.
This commit is contained in:
@@ -3,6 +3,7 @@ import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter_animate/flutter_animate.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../estado/estado_alarmas.dart';
|
||||
@@ -199,6 +200,17 @@ class _PantallaAlarmaSonandoState extends State<PantallaAlarmaSonando> {
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
_FondoArteDifuminado(tokens: tokens),
|
||||
// Audit 9.1 (t4 line 411): the pulsing amber halo behind the
|
||||
// hero content — see _HaloPulsante for why it is a BOUNDED pulse,
|
||||
// not the prototype's literal `infinite` animation.
|
||||
Positioned(
|
||||
top: 150,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: IgnorePointer(
|
||||
child: Center(child: _HaloPulsante(tokens: tokens)),
|
||||
),
|
||||
),
|
||||
SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(24, 20, 24, 24),
|
||||
@@ -218,7 +230,15 @@ class _PantallaAlarmaSonandoState extends State<PantallaAlarmaSonando> {
|
||||
child: Text(
|
||||
_hora(alarma),
|
||||
key: const ValueKey('ringing-hero-time'),
|
||||
style: type.heroTime,
|
||||
// Audit 9.5 (t4 line 417): 88px/w800/ls-4/lh.95 on
|
||||
// THIS screen only — a local override, not a change
|
||||
// to the shared heroTime token (EditorHoraInline, the
|
||||
// alarm editor's hour block, is the other consumer
|
||||
// and wants height:1, t4 line 379).
|
||||
style: type.heroTime.copyWith(
|
||||
letterSpacing: -4,
|
||||
height: 0.95,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
@@ -229,11 +249,11 @@ class _PantallaAlarmaSonandoState extends State<PantallaAlarmaSonando> {
|
||||
),
|
||||
const SizedBox(height: 22),
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(tokens.radiusLg),
|
||||
borderRadius: BorderRadius.circular(_artworkRadio),
|
||||
child: Image.asset(
|
||||
'assets/icons/alarmas/alarm_music.png',
|
||||
width: 168,
|
||||
height: 168,
|
||||
width: _artworkLado,
|
||||
height: _artworkLado,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder:
|
||||
(_, __, ___) => Icon(
|
||||
@@ -280,11 +300,24 @@ class _PantallaAlarmaSonandoState extends State<PantallaAlarmaSonando> {
|
||||
const Spacer(flex: 3),
|
||||
Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
l10n.snoozeAction,
|
||||
style: type.eyebrowLabel.copyWith(
|
||||
color: tokens.warmCoral,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Audit 9.8 (t4 line 428): the POSPONER eyebrow
|
||||
// lost its snooze icon.
|
||||
Icon(
|
||||
Icons.snooze_rounded,
|
||||
size: 19,
|
||||
color: tokens.warmCoral,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
l10n.snoozeAction,
|
||||
style: type.eyebrowLabel.copyWith(
|
||||
color: tokens.warmCoral,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
@@ -377,6 +410,13 @@ String _hora(AlarmaMusical alarma) =>
|
||||
/// call site (mirrors `_ArteEscuchar._radio` in `pantalla_inicio.dart`).
|
||||
const _stopButtonRadius = 24.0;
|
||||
|
||||
/// Audit 9.6 (t4 line 421): the ringing screen's art is 180x180 with a 36
|
||||
/// corner radius — neither matches [PluriWaveTokens]'s three named radii
|
||||
/// (14/18/30), so this stays a local constant (same precedent as
|
||||
/// [_stopButtonRadius] above).
|
||||
const _artworkLado = 180.0;
|
||||
const _artworkRadio = 36.0;
|
||||
|
||||
/// Audit 9.3: the schedule pill's text, built only from
|
||||
/// [AlarmaMusical.tipoProgramacion] and the fields it already carries per
|
||||
/// case (`diasSemana`, `fechaUnica`) — no new domain plumbing. Reuses the
|
||||
@@ -458,6 +498,66 @@ class _PildoraProgramacion extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// Pulsing amber halo (audit 9.1, t4 line 411): a 420x420 radial gradient
|
||||
/// centered behind the hero content, echoing the alarm's warmCoral accent.
|
||||
///
|
||||
/// BOUNDED, not infinite: the prototype's CSS is `animation: pw-pulse 2.4s
|
||||
/// ease-in-out infinite`, but this screen's dismiss guard
|
||||
/// (`pantalla_alarma_sonando_dismiss_guard_test.dart`, protected — must stay
|
||||
/// byte-identical to `main`) calls `pumpAndSettle()` after every mount and
|
||||
/// every interaction. A genuinely infinite `AnimationController.repeat()`
|
||||
/// anywhere in this widget's subtree would hang every one of those calls
|
||||
/// forever, with no way to fix it since that file cannot be edited (see
|
||||
/// `_EstadoSubidaVolumen` above for the same reasoning applied earlier on
|
||||
/// this exact screen). One grow-and-settle cycle, timed to the prototype's
|
||||
/// own 2.4s cadence, delivers the same "draws the eye" motion without ever
|
||||
/// leaving a frame scheduled forever. Respects reduced motion exactly like
|
||||
/// every other entry animation in this app (`PluriAnimate`).
|
||||
class _HaloPulsante extends StatelessWidget {
|
||||
const _HaloPulsante({required this.tokens});
|
||||
|
||||
final PluriWaveTokens tokens;
|
||||
|
||||
static const _lado = 420.0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final halo = Container(
|
||||
key: const ValueKey('ringing-pulse-halo'),
|
||||
width: _lado,
|
||||
height: _lado,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: RadialGradient(
|
||||
colors: [
|
||||
tokens.warmCoral.withValues(alpha: 0.2),
|
||||
tokens.warmCoral.withValues(alpha: 0),
|
||||
],
|
||||
stops: const [0, 0.62],
|
||||
),
|
||||
),
|
||||
);
|
||||
if (MediaQuery.maybeDisableAnimationsOf(context) ?? false) {
|
||||
return halo;
|
||||
}
|
||||
return halo
|
||||
.animate()
|
||||
.scaleXY(
|
||||
begin: 1,
|
||||
end: 1.08,
|
||||
duration: 1200.ms,
|
||||
curve: Curves.easeInOut,
|
||||
)
|
||||
.then()
|
||||
.scaleXY(
|
||||
begin: 1.08,
|
||||
end: 1,
|
||||
duration: 1200.ms,
|
||||
curve: Curves.easeInOut,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Full-bleed blurred backdrop (WU11, replaces the `PluriGlassSurface` card
|
||||
/// container per task 11.3). This app has no per-station artwork/favicon
|
||||
/// safe to render here: `Emisora.favicon` is a network URL, and rendering
|
||||
|
||||
Reference in New Issue
Block a user