Component · Bottom Nav — Variante flotante

Floating Nav · scroll-aware (estilo Uber)

Una barra flotante que no toca los bordes: vive sobre el lienzo blanco con márgenes laterales y elevación — un «componente flotante» legítimo según §4.7b. Fill sólido (bg-elevated al 94%), sin blur: la medición E3 en device de gama baja (Redmi Note 9, 2026-07-17) mostró que el backdrop-filter del nav ponía el raster 24% sobre presupuesto en el scroll de Historial — y con la paleta clara el glass era imperceptible. Al hacer scroll hacia abajo se hunde con aceleración (easeIn) liberando pantalla; al subir, reaparece suave (easeOutCubic). La velocidad del scroll modula la duración. Hacé scroll en el teléfono para sentirlo.

Floating card Hide on scroll-down Velocity-aware Canvas-first interior
9:41
Balance total
$18.432.900COP
+4,8% · últimas 24h

Mis activos

Ver todo

Movimientos recientes

Historial
Hacé scroll

Scroll ↓ esconde · scroll ↑ revela · cerca del tope siempre visible. Tocá un tab para cambiar de sección.

Comportamiento

Ajustá la física en vivo. Todo se refleja en el teléfono al instante.

Esconder al bajarSi está off, la barra siempre queda visible
Velocity-awareFlick rápido → se esconde más rápido
8 px
Cuánto hay que mover el dedo antes de reaccionar (evita parpadeo).

Apariencia

«Flotante» = estilo Uber. «Edge-to-edge» = la barra Material 3 original del DS, para comparar.
94%
Fill sólido, sin blur (decisión E3 · 2026-07-17). El default vive en 94%.
24 px
20 px
24 px

Motion

Duraciones de entrada y salida. La salida usa una curva con aceleración (easeIn) — por eso «se hunde». La entrada usa easeOutCubic para asentar suave.

300 ms
420 ms

Tokens en uso

Interior
--surface-canvas + --divider-hairline
Salida
--motion-ease-accelerate · easeIn
Entrada
--motion-ease-drawer · easeOutCubic
Fondo nav
bg-elevated @ 94% · sin blur
Elevación
≈ --elev-3 (sombra propia, flota)
Coherencia con el DS: el interior es canvas-first (§4.7b) — sin cards, hairlines entre secciones, jerarquía tipográfica. El nav flota como excepción declarada para componentes flotantes (elevación + borde), igual que un sheet o popover — pero sin blur: el fill es sólido al 94% (medición E3, 2026-07-17).
Implementación Flutter: AnimatedSlide dentro de un Stack escuchando un ScrollController. ScrollDirection.reverse (bajando) → offset.dy ≈ 1.2 con Curves.easeIn; al subir vuelve a 0 con Curves.easeOutCubic.