AppBar Widget

El AppBar en Flutter: La Corona de Tus Pantallas

El AppBar es un widget fundamental en Flutter que se utiliza para crear una barra superior en tus pantallas. Es como el encabezado de una página web, pero con muchas más posibilidades de personalización.

¿Para qué sirve un AppBar?

• Título: Muestra el título de la pantalla actual, brindando al usuario una clara indicación de dónde se encuentra.
• Acciones: Permite agregar botones o íconos para realizar acciones específicas, como buscar, compartir, crear elementos, etc.
• Menús: Puedes incluir menús desplegables o iconos de menú para ofrecer opciones adicionales al usuario.
• Indicadores de estado: Muestra información sobre el estado de la aplicación, como la carga de una página o la notificación de mensajes sin leer.

¿Cómo funciona?

El AppBar se coloca dentro de la propiedad appBar de un Scaffold. El Scaffold es la estructura básica de una pantalla en Flutter.

Ejemplo básico:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Mi Primera App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mi Página'),
        ),
        body: Center(
          child: Text('¡Hola, mundo!'),
        ),
      ),
    ),
  );
}

En este ejemplo, creamos una aplicación simple con una pantalla que tiene un AppBar con el título "Mi Página".

Personalizando tu AppBar

El AppBar es altamente personalizable. Puedes:

• Cambiar el color:
  Dart

  appBar: AppBar(
    backgroundColor: Colors.deepPurple,
    title: Text('Mi Página'),
  ),
  

• Agregar acciones:
  Dart

  appBar: AppBar(
    title: Text('Mi Página'),
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {
          // Lógica para la búsqueda
        },
      ),
    ],
  ),
  

• Usar un título flexible:
  Dart

  appBar: AppBar(
    flexibleSpace: Center(
      child: Text('Mi Título Flexible', style: TextStyle(fontSize: 25)),
    ),
  ),
  

• Agregar un leading:
  Dart

  appBar: AppBar(
    leading: IconButton(
      icon: Icon(Icons.menu),
      onPressed: () {
        // Abrir un menú lateral
      },
    ),
    title: Text('Mi Página'),
  ),
  

Casos de uso comunes

• Navegación: El AppBar puede contener un botón "Atrás" para navegar a la pantalla anterior.
• Acciones contextuales: Puedes agregar botones para compartir, editar o eliminar elementos.
• Búsqueda: Un campo de búsqueda es común en los AppBars.
• Indicadores de estado: Muestra una barra de progreso, un icono de notificación o un botón de actualización.

En resumen

El AppBar es una herramienta esencial en Flutter para crear interfaces de usuario intuitivas y consistentes. Al personalizarlo, puedes crear experiencias de usuario únicas y adaptadas a tu aplicación.