fix(nav,favoritos): unclip the overflow menu and smooth the tab transition
Two user-reported bugs from on-device testing. The favourites overflow menu carried `constraints: tightFor(38x42)`, which sizes the POPUP rather than the button -- every item was clipped to its first letter, so users saw "M" and "E" instead of the labels. The existing test passed throughout because find.text matches a Text widget whether or not it is visually clipped; the new guard measures the laid-out width instead. The bottom bar's ink splash had no shape, painting a hard square over the icon, and the active tab's lift, dim, icon size and label all changed instantly while the balloon slid -- the balloon glided and its contents teleported. All four now share the balloon's duration and curve.
This commit is contained in:
@@ -465,7 +465,13 @@ class _FilaFavorito extends StatelessWidget {
|
||||
context,
|
||||
).colorScheme.onSurface.withValues(alpha: 0.45),
|
||||
),
|
||||
constraints: const BoxConstraints.tightFor(width: 38, height: 42),
|
||||
// NO `constraints:` here. That property sizes the POPUP MENU, not
|
||||
// the button — a tightFor(38x42) clipped every menu item down to
|
||||
// its first letter ("M" for "Mover a lista", "E" for "Eliminar de
|
||||
// favoritos"), which is what users actually saw. Constrain the
|
||||
// tap target instead.
|
||||
padding: EdgeInsets.zero,
|
||||
iconSize: 20,
|
||||
onSelected: (accion) {
|
||||
if (accion == 'assign') _asignar(context);
|
||||
if (accion == 'remove') _eliminar(context);
|
||||
|
||||
@@ -192,7 +192,10 @@ class PluriBottomNavigation extends StatelessWidget {
|
||||
/// the balloon's opaque fill already covers the seam where the bar's own
|
||||
/// shadow would otherwise show through.
|
||||
List<BoxShadow> get _shellShadows => [
|
||||
BoxShadow(color: Colors.white.withValues(alpha: 0.17), offset: const Offset(0, -1.5)),
|
||||
BoxShadow(
|
||||
color: Colors.white.withValues(alpha: 0.17),
|
||||
offset: const Offset(0, -1.5),
|
||||
),
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.5),
|
||||
offset: const Offset(0, 14),
|
||||
@@ -214,6 +217,7 @@ class _PluriNavButton extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final t = context.pluriTokens;
|
||||
final motion = context.pluriMotion;
|
||||
return Semantics(
|
||||
button: true,
|
||||
selected: selected,
|
||||
@@ -222,6 +226,11 @@ class _PluriNavButton extends StatelessWidget {
|
||||
type: MaterialType.transparency,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
// Without a shape the ink splash and hover highlight paint as a
|
||||
// full-bleed RECTANGLE over the cell — a hard square sitting on
|
||||
// top of the icon, which is what users reported. The whole bar is
|
||||
// built on 999-radius pills; the splash has to follow.
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
child: Align(
|
||||
alignment: Alignment.bottomCenter,
|
||||
// t4/4a spec: the items row itself is 52px tall — this inner
|
||||
@@ -238,54 +247,75 @@ class _PluriNavButton extends StatelessWidget {
|
||||
// Flutter joins merged labels with `\n`, so screen readers
|
||||
// would announce "Alarmas\nAlarmas" instead of "Alarmas".
|
||||
child: ExcludeSemantics(
|
||||
child: Transform.translate(
|
||||
// t4/4a spec: active item lift `translateY(-15px)`.
|
||||
offset: Offset(0, selected ? -15 : 0),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Opacity(
|
||||
// t4/4a spec: active icon full colour; inactive
|
||||
// `rgba(242,247,250,.46)` — .46 applied here as
|
||||
// uniform opacity dims both the fallback Icon
|
||||
// (already `onSurface` from
|
||||
// PluriIconVariant.filled) and the real raster
|
||||
// badge asset identically.
|
||||
opacity: selected ? 1 : 0.46,
|
||||
child: PluriIcon(
|
||||
glyph: item.glyph,
|
||||
variant: PluriIconVariant.filled,
|
||||
// t4/4a spec: icon `font-size:25px`/`23px`.
|
||||
size: selected ? 25 : 23,
|
||||
color: selected ? t.electricMagenta : null,
|
||||
// Same ARB string the outer Semantics already
|
||||
// uses — passing it explicitly skips
|
||||
// PluriIcon's own AppLocalizations.of lookup
|
||||
// (excluded from the tree above regardless).
|
||||
semanticLabel: item.label,
|
||||
),
|
||||
),
|
||||
if (selected) ...[
|
||||
const SizedBox(height: 3),
|
||||
Text(
|
||||
item.label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
// t4/4a spec: label `font-size:11px;
|
||||
// font-weight:800; line-height:1.25`, brand
|
||||
// colour.
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.labelSmall?.copyWith(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w800,
|
||||
height: 1.25,
|
||||
letterSpacing: 0,
|
||||
color: t.electricMagenta,
|
||||
// t4/4a spec: active item lift `translateY(-15px)`. Every
|
||||
// property here used to change INSTANTLY while the balloon
|
||||
// behind it slid with AnimatedPositioned — the balloon
|
||||
// glided and its contents teleported, which read as a
|
||||
// broken transition. All four now share the balloon's own
|
||||
// duration and curve so the whole tab moves as one.
|
||||
child: AnimatedSlide(
|
||||
duration: motion.normal,
|
||||
curve: Curves.easeOutCubic,
|
||||
// Slide is expressed in fractions of the child's size;
|
||||
// the icon column is ~40 tall, so -15px is about -0.375.
|
||||
offset: Offset(0, selected ? -0.375 : 0),
|
||||
child: AnimatedSize(
|
||||
duration: motion.normal,
|
||||
curve: Curves.easeOutCubic,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
AnimatedOpacity(
|
||||
duration: motion.normal,
|
||||
curve: Curves.easeOutCubic,
|
||||
// t4/4a spec: active icon full colour; inactive
|
||||
// `rgba(242,247,250,.46)` — .46 applied here as
|
||||
// uniform opacity dims both the fallback Icon
|
||||
// (already `onSurface` from
|
||||
// PluriIconVariant.filled) and the real raster
|
||||
// badge asset identically.
|
||||
opacity: selected ? 1 : 0.46,
|
||||
child: TweenAnimationBuilder<double>(
|
||||
duration: motion.normal,
|
||||
curve: Curves.easeOutCubic,
|
||||
tween: Tween<double>(end: selected ? 25 : 23),
|
||||
builder:
|
||||
(context, size, _) => PluriIcon(
|
||||
glyph: item.glyph,
|
||||
variant: PluriIconVariant.filled,
|
||||
// t4/4a spec: `font-size:25px`/`23px`.
|
||||
size: size,
|
||||
color: selected ? t.electricMagenta : null,
|
||||
// Same ARB string the outer Semantics
|
||||
// already uses — passing it explicitly
|
||||
// skips PluriIcon's own
|
||||
// AppLocalizations.of lookup.
|
||||
semanticLabel: item.label,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (selected) ...[
|
||||
const SizedBox(height: 3),
|
||||
Text(
|
||||
item.label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
// t4/4a spec: label `font-size:11px;
|
||||
// font-weight:800; line-height:1.25`, brand
|
||||
// colour.
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.labelSmall?.copyWith(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w800,
|
||||
height: 1.25,
|
||||
letterSpacing: 0,
|
||||
color: t.electricMagenta,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user