AppBar en Flutter - Guía Completa

Aprende a crear y personalizar la barra superior de tus aplicaciones Flutter

Descargar Código de Ejemplo

¿Qué es un AppBar en Flutter?

El AppBar es uno de los widgets más utilizados en Flutter. Representa la barra superior de una aplicación que generalmente contiene el título, acciones y otros elementos de navegación.

Mi Aplicación

Contenido de la aplicación aquí...

AppBar Básico

Empecemos con la implementación más simple de un AppBar:

Código Flutter - AppBar Básico

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mi Aplicación'),
        ),
        body: Center(
          child: Text('¡Hola Mundo!'),
        ),
      ),
    );
  }
}

Explicación del Código:

  • MaterialApp: Widget raíz que proporciona el tema material design
  • Scaffold: Proporciona la estructura básica de la pantalla
  • AppBar: Widget que crea la barra de aplicación
  • title: Propiedad que define el texto del título

AppBar con Acciones

Añade botones de acción al AppBar para funcionalidades adicionales:

AppBar con Iconos de Acción

AppBar(
  title: Text('Mi Aplicación'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Acción de búsqueda
      },
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {
        // Acción del menú
      },
    ),
  ],
)

Personalización del AppBar

Personaliza el color, elevación y otros aspectos visuales:

AppBar Personalizado

AppBar(
  title: Text('Mi Aplicación Personalizada'),
  backgroundColor: Colors.deepPurple,
  elevation: 4.0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(
      bottom: Radius.circular(15),
    ),
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.favorite),
      onPressed: () {},
    ),
  ],
)
Mi Aplicación Personalizada

Personalizador de AppBar

Prueba diferentes configuraciones en tiempo real:

4
Mi Aplicación

Contenido de la aplicación aquí...

Propiedades del AppBar

Propiedad Tipo Descripción
title Widget El título principal del AppBar
actions List<Widget> Iconos o widgets de acción
backgroundColor Color Color de fondo del AppBar
elevation double La elevación (sombra) del AppBar
leading Widget Widget al inicio (normalmente ícono de navegación)
flexibleSpace Widget Widget que se coloca detrás de la toolbar

Ejercicios para Practicar

Ejercicio 1: AppBar con Imagen

Crea un AppBar que use una imagen como título en lugar de texto.

Solución sugerida:
AppBar(
  title: Image.asset(
    'assets/logo.png',
    height: 40,
  ),
  // ... resto de propiedades
)

Ejercicio 2: AppBar Transparente

Crea un AppBar transparente que se superponga al contenido.

Solución sugerida:
AppBar(
  backgroundColor: Colors.transparent,
  elevation: 0,
  // ... resto de propiedades
)

Ejercicio 3: AppBar con Búsqueda

Implementa un AppBar que se expanda para mostrar un campo de búsqueda.

Solución sugerida:
// Necesitarás usar un StatefulWidget
// y controlar el estado de expansión

Consejos y Mejores Prácticas

🎨 Diseño Consistente

  • Mantén el mismo estilo de AppBar en toda tu aplicación
  • Usa los colores de tu marca
  • Considera la accesibilidad en la elección de colores
  • Sigue las guidelines de Material Design

⚡ Rendimiento

  • Evita widgets complejos en el título si no son necesarios
  • Usa const constructores cuando sea posible
  • Considera usar SliverAppBar para scroll complejos
  • Optimiza las imágenes usadas en el AppBar