El chrome superior de toda pantalla en MiCapi. 56dp de alto, edge-to-edge sobre el status bar del sistema. Cambia su contenido según el contexto: marca en home, título + back en pantallas interiores, título + close en flujos modales. Material 3 AppBar como referencia, ajustado al sistema cromático del DS.
Tres slots horizontales: leading (48dp), title (expandido, alineado a la izquierda) y trailing (1–3 acciones de 48dp). Status bar del sistema vive arriba.
Hora · señal · WiFi · batería. Vive sobre el app bar, no es parte del componente. Edge-to-edge — el fondo del app bar se extiende debajo del status bar.
Back arrow (Android arrow-left, no iOS chevron-left) · close · menú · o vacío en home. Touch target 48dp con InkResponse circular.
Convención Material 3 — el título no se centra. Body-large / title-medium, peso 600. En home, este slot lo ocupa el wordmark "MiCapi".
Cada ícono ocupa 48dp × 48dp para garantizar touch target. Más de 2 acciones → menú overflow (more-vertical). En MiCapi rara vez más de 2.
Material 3 standard. Padding horizontal 4dp — los íconos ya incluyen su propio padding interno para llegar al touch target.
--surface en light · --surface-dark en dark. No translúcido, no blur — el contenido detrás no se debe leer. Border-bottom 1dp aparece al scrollear.
Misma estructura, distinto contenido. La variante depende de dónde en la jerarquía vive la pantalla y de qué tipo de salida ofrece (atrás vs. cerrar).
arrow-left (no chevron-left iOS). Title = nombre de la pantalla. Trailing contextual.x), no back. Indica que el usuario está en un flujo modal — KYC, registrar wallet, agregar cuenta — que puede abandonar, no navegar atrás.Tabla de referencia. Máximo 2 acciones visibles — más, se agrupan en menú overflow.
lightImpact).more-vertical que abre un menú. En el MVP de MiCapi es improbable — la app es sobria, las acciones contextuales son pocas.Default pinned — el app bar siempre visible, gana elevación sutil al scrollear. La variante scroll-off es solo para pantallas de lista larga (historial) donde el espacio vertical importa.
Permanece visible al scrollear. Al desplazarse el contenido bajo el bar, aparece border-bottom 1dp + shadow sutil elev.2 para separar visualmente.
El bar se oculta cuando el usuario scrollea hacia abajo, reaparece al scrollear hacia arriba. Solo para listas largas (Historial) donde cada dp vertical cuenta. Usa SliverAppBar(floating: true, snap: true).
El fondo del app bar se extiende hasta el borde superior real, detrás del status bar del sistema. Los íconos y title del app bar viven en una zona más baja, dentro de la safe area.
El app bar y el status bar comparten la misma superficie cromática, pero el status bar es del sistema operativo, no del componente. La continuidad visual es deliberada.
Flutter — SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge) en main(). SystemUiOverlayStyle define iconos del status bar oscuros en light mode, claros en dark mode.
El leading icon es el control más tappeado del app bar. Estados explícitos.
Ícono color fg. Touch target 48dp.
Ripple circular Material (InkResponse). Sin haptic — navegación atrás no requiere feedback táctil.
No existe estado disabled. Si no hay atrás (pantalla raíz), el ícono no se renderiza — slot vacío.
Misma estructura. Cambian fondo, color de texto/íconos, color del wordmark (primary-300 en lugar de primary-700 para contraste).
Dos pantallas reales: dashboard de Inicio (home variant + bottom nav) y detalle de BTC (interior variant, sin bottom nav).
Home muestra el wordmark, no un título genérico tipo "Inicio". La marca es el ancla cuando el usuario está en la raíz.
Interior usa back arrow + nombre del activo. Trailing: star para favorito (roadmap futuro).
Bottom nav presente en Home, oculto en detalle de BTC. Patrón consistente con components-bottom-nav.
Status bar continuo. La hora y los íconos del sistema viven sobre el mismo fondo que el app bar — sin escalón cromático.
Gesture nav en la base se ve translúcido sobre el bottom nav (home) o sobre el contenido (interior).
Usar AppBar (Material 3) con leading, title, actions. Para scroll-off: SliverAppBar(floating: true, snap: true) dentro de CustomScrollView.
title: SvgPicture.asset('assets/brand/wordmark.svg', height: 24). Centrar a la izquierda con centerTitle: false (Material 3 default).
Material 3 lo hace automático con AppBar.scrolledUnderElevation y surfaceTintColor. En MiCapi preferimos border-bottom 1dp por sobriedad — override con un NotificationListener<ScrollNotification>.
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge) en main(). AppBar nativo respeta MediaQuery.padding.top — no envolver en SafeArea.
SystemUiOverlayStyle.dark en light mode (íconos oscuros), SystemUiOverlayStyle.light en dark mode (íconos claros). Set via AppBar.systemOverlayStyle.
leading: BackButton() o IconButton(icon: Icon(Icons.arrow_back), onPressed: () => context.pop()). Sin haptic — navegación atrás no requiere.
// Interior screen — variante b AppBar( leading: IconButton( icon: const Icon(LucideIcons.arrowLeft), onPressed: () => context.pop(), ), title: const Text('Bitcoin'), centerTitle: false, scrolledUnderElevation: 0, // preferimos border-bottom propio shape: Border( bottom: BorderSide( color: scrolled ? colors.outlineVariant : Colors.transparent, width: 1, ), ), actions: [ IconButton( icon: const Icon(LucideIcons.star), onPressed: _toggleFavorite, ), ], systemOverlayStyle: theme.brightness == Brightness.dark ? SystemUiOverlayStyle.light : SystemUiOverlayStyle.dark, )