AppBar — qué es, configuración y widgets de Flutter

Qué es AppBar en Flutter

AppBar es un componente Material estándar de panel superior que se muestra en la parte superior de un Scaffold. Contiene el título de la pantalla, un botón de navegación (generalmente un icono de “hamburguesa” o una flecha “Atrás”) y acciones (iconos que abren búsqueda, configuración u otras funciones). AppBar se adapta automáticamente a la plataforma: en Android usa la sombra inferior Material estándar, en iOS, un diseño más plano con transparencia.

AppBar implementa la interfaz PreferredSizeWidget, lo que significa que su altura es fija y se conoce antes de la construcción. Por defecto, la altura de AppBar es de 56dp en Android y 44dp en iOS en orientación vertical, teniendo en cuenta SafeArea en la parte superior. Esta característica permite que Scaffold calcule el espacio disponible para body de antemano, evitando la recomposición durante el renderizado.

Según Flutter Material Library Guide (2026), AppBar ha pasado por varias iteraciones: en Flutter 1.x era un contenedor simple con texto, en Flutter 2.x obtuvo soporte para Material 3 y flexibleSpace, y en Flutter 3.x, integración con System UI (color de la barra de estado, transparencia). El AppBar moderno admite Dynamic Color de Material You en dispositivos Android 12+.

Estructura de AppBar: propiedades y parámetros

AppBar proporciona un conjunto de parámetros que controlan cada parte del panel superior. Comprender estas propiedades permite personalizar el panel de manera flexible para cualquier requisito de diseño sin crear soluciones personalizadas.

Title y leading: configuración del título y la navegación

La propiedad title acepta cualquier widget, pero lo más común es usar Text con configuración de estilo mediante TextStyle. Para títulos largos, se recomienda envolver title en Flexible para que el texto se trunque correctamente cuando falte espacio. La propiedad leading se reemplaza automáticamente por BackButton al navegar a una pantalla anidada mediante Navigator.push, si no se establece explícitamente.

Actions: colocación de iconos de acción

La lista actions contiene widgets alineados al borde derecho de AppBar. Cada elemento no debe ser más ancho de 48dp (estándar de Material Design). Para agrupar acciones, use PopupMenuButton: esto oculta las opciones menos importantes en un menú desplegable y cumple con las recomendaciones de Material sobre densidad de interfaz.

Personalización de AppBar: estilos, colores y comportamiento

AppBar admite una personalización profunda a través de propiedades de color, sombra y relleno. El estilo básico se hereda del tema de la aplicación, pero cada propiedad se puede anular individualmente. Veamos los principales escenarios de configuración.

El color de fondo de AppBar se establece mediante backgroundColor. Si no se especifica, se usa appBarTheme de ThemeData. En Material 3, el color de AppBar se calcula automáticamente a partir de ColorScheme.primary, pero se puede anular para una pantalla específica. Para un AppBar transparente (a menudo usado en perfiles), establezca backgroundColor: Colors.transparent con elevation: 0.

La propiedad elevation controla la sombra debajo de AppBar. Un valor de 0 elimina la sombra, creando un efecto de panel “plano”, relevante para Material 3. Un valor de 4 proporciona la sombra estándar de Material Design. Para un control personalizado de la sombra, use shadowColor: el color de sombra que separa visualmente el panel del contenido.

Para controlar el color del texto en AppBar, use foregroundColor. Esta propiedad afecta el color del título, los iconos y el texto en actions. Al cambiar backgroundColor, se selecciona automáticamente un foregroundColor contrastante, pero se puede forzar para diseños no estándar.

SliverAppBar: versión animada de AppBar

SliverAppBar es una extensión de AppBar para usar dentro de CustomScrollView que admite animación al desplazarse: contracción, efecto parallax y fijación. A diferencia de un AppBar estándar, SliverAppBar es un widget sliver y puede cambiar de tamaño dinámicamente según la posición de desplazamiento.

Los modos principales de SliverAppBar se determinan mediante una combinación de las propiedades pinned, floating y snap. En modo pinned, el panel siempre permanece visible en la parte superior de la pantalla. En modo floating, aparece al desplazarse hacia atrás. La combinación floating + snap crea un comportamiento de panel “pegajoso” que aparece al mínimo desplazamiento hacia arriba, utilizado a menudo en feeds de noticias.

Según Flutter API SliverAppBar (2026), para usar SliverAppBar es necesario reemplazar un ListView o Column normal con CustomScrollView que contenga widgets sliver. Scaffold continúa funcionando correctamente, pero la propiedad appBar de Scaffold debe ser null — SliverAppBar se coloca dentro de CustomScrollView como el primer sliver.

Ejemplo de configuración de AppBar en una aplicación

Veamos un ejemplo de AppBar con búsqueda, menú desplegable y TabBar. Este código demuestra una configuración típica del panel superior en una aplicación de producción en Flutter.

Scaffold(
  appBar: AppBar(
    title: const Text('Catálogo'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Configuración')),
          const PopupMenuItem(value: 'about', child: Text('Acerca de')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

En el ejemplo, AppBar contiene un título centrado, un botón para abrir Drawer a la izquierda, un icono de búsqueda y un menú desplegable a la derecha. TabBar en la parte inferior permite cambiar entre categorías de productos. Esta configuración cubre la mayoría de los escenarios de aplicaciones móviles: navegación, búsqueda, opciones adicionales y cambio de secciones, todo en un solo panel superior.