Dominando las Barras de Navegación en Flutter: Guía y Ejemplos Prácticos

Fecha: 27 de Abril de 2025

La navegación es la columna vertebral de cualquier aplicación móvil...

Aunque la documentación oficial de Flutter es extensa...

¿Por Dónde Empezar? Recursos Oficiales Clave

Como se resume a partir de la documentación oficial...

Catálogo de Widgets: ... AppBar, BottomNavigationBar, Drawer...
Guías sobre Construcción de Layouts: ...
Artículos Específicos y el Cookbook: ...
API Docs: ...

Ahora, ¡vamos a los ejemplos prácticos!

Ejemplo 1: `AppBar` - La Barra de Aplicación Superior

La AppBar es probablemente la barra de navegación más común...

Características Principales:

Se coloca en la propiedad appBar de un Scaffold.
Puede contener un título (title), acciones (actions), un icono principal (leading)...

Simulación HTML/CSS:

Ejemplo de AppBar

Contenido de la página aquí...

¡Pruébalo tú mismo! Copia el código de abajo y pégalo en DartPad para verlo en acción.

Código Flutter (Editable en vista Redactar):

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'AppBar Example',
  theme: ThemeData(
    colorSchemeSeed: Colors.blue,
    useMaterial3: true,
  ),
  home: const MyHomePage(title: 'Ejemplo de AppBar'),
  debugShowCheckedModeBanner: false,
);
}
}

class MyHomePage extends StatelessWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.primaryContainer,
    foregroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
    title: Text(title),
    leading: IconButton(
      icon: const Icon(Icons.menu),
      tooltip: 'Abrir menú de navegación',
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('Menú presionado!')),
        );
      },
    ),
    actions: <Widget>[
      IconButton(
        icon: const Icon(Icons.search),
        tooltip: 'Buscar',
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Búsqueda presionada!')),
          );
        },
      ),
      IconButton( // Cambiado a puntos verticales para coincidir simulación
        icon: const Icon(Icons.more_vert),
        tooltip: 'Más opciones',
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Más opciones presionado!')),
          );
        },
      ),
    ],
  ),
  body: const Center(
    child: Text('Contenido de la página aquí', style: TextStyle(fontSize: 20)),
  ),
);
}
}

Ejemplo 2: `BottomNavigationBar` - Navegación Inferior

La BottomNavigationBar aparece en la parte inferior de la pantalla...

Características Principales:

Se coloca en la propiedad bottomNavigationBar de un Scaffold.
Requiere una lista de BottomNavigationBarItem.
Necesita gestionar el estado (currentIndex)...

Simulación HTML/CSS:

Ejemplo BottomNav

Contenido de la página seleccionada (Inicio)

Inicio

Favoritos

Perfil

¡Pruébalo tú mismo! Copia el código de abajo y pégalo en DartPad para verlo en acción.

Código Flutter (Editable en vista Redactar):

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'BottomNavigationBar Example',
  theme: ThemeData(
    colorSchemeSeed: Colors.teal,
    useMaterial3: true,
  ),
  home: const HomePage(),
  debugShowCheckedModeBanner: false,
);
}
}

class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;
static const List<Widget> _widgetOptions = <Widget>[
Center(child: Text('Página: Inicio', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
Center(child: Text('Página: Favoritos', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
Center(child: Text('Página: Perfil', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
];
void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); }
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
     backgroundColor: Theme.of(context).colorScheme.primaryContainer,
     foregroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
    title: const Text('Ejemplo de BottomNavBar'),
  ),
  body: Center( child: _widgetOptions.elementAt(_selectedIndex) ),
  bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Inicio', ),
      BottomNavigationBarItem( icon: Icon(Icons.favorite), label: 'Favoritos', ),
      BottomNavigationBarItem( icon: Icon(Icons.person), label: 'Perfil', ),
    ],
    currentIndex: _selectedIndex,
    selectedItemColor: Theme.of(context).colorScheme.primary,
    unselectedItemColor: Theme.of(context).colorScheme.onSurfaceVariant,
    onTap: _onItemTapped,
  ),
);
}
}

Ejemplo 3: `Drawer` - El Menú Lateral Desplegable

Un Drawer es un panel que se desliza horizontalmente...

Características Principales:

Se coloca en la propiedad drawer de un Scaffold.
Generalmente contiene un ListView con ListTiles...
Flutter maneja automáticamente la animación...

Simulación HTML/CSS (Drawer Abierto):

Ejemplo Drawer

Contenido principal detrás del drawer...

Inicio

Ajustes

Contacto

Cerrar Sesión

¡Pruébalo tú mismo! Copia el código de abajo y pégalo en DartPad para verlo en acción.

Código Flutter (Editable en vista Redactar):

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Drawer Example',
  theme: ThemeData(
    colorSchemeSeed: Colors.green,
    useMaterial3: true,
  ),
  home: const MyHomePage(title: 'Ejemplo de Drawer'),
  debugShowCheckedModeBanner: false,
);
}
}

class MyHomePage extends StatelessWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
     backgroundColor: Theme.of(context).colorScheme.primaryContainer,
     foregroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
    title: Text(title),
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
         DrawerHeader(
          decoration: BoxDecoration( color: Theme.of(context).colorScheme.primary, ),
          child: Text( 'Menú de Navegación', style: TextStyle( color: Theme.of(context).colorScheme.onPrimary, fontSize: 24, ), ),
        ),
        ListTile(
          leading: const Icon(Icons.home), title: const Text('Inicio'),
          onTap: () { Navigator.pop(context); /* Muestra SnackBar */ ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Navegando a Inicio...'))); },
        ),
        ListTile(
          leading: const Icon(Icons.settings), title: const Text('Ajustes'),
          onTap: () { Navigator.pop(context); /* Muestra SnackBar */ ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Navegando a Ajustes...'))); },
        ),
         ListTile(
          leading: const Icon(Icons.contacts), title: const Text('Contacto'),
          onTap: () { Navigator.pop(context); /* Muestra SnackBar */ ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Navegando a Contacto...'))); },
        ),
        const Divider(),
         ListTile(
          leading: const Icon(Icons.exit_to_app), title: const Text('Cerrar Sesión'),
          onTap: () { Navigator.pop(context); /* Muestra SnackBar */ ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Cerrando sesión...'))); },
        ),
      ],
    ),
  ),
  body: const Center(
    child: Padding(
      padding: EdgeInsets.all(16.0),
      child: Text( 'Desliza desde la izquierda o pulsa el icono ☰ para abrir el menú.', textAlign: TextAlign.center, style: TextStyle(fontSize: 18), ),
    ),
  ),
);
}
}

Combinando y Navegando

Estos widgets (AppBar, BottomNavigationBar, Drawer) son los componentes visuales...

Conclusión Final

Crear barras de navegación efectivas en Flutter es sencillo...

Estos ejemplos te proporcionan un punto de partida sólido...

¡Feliz codificación!