7.9. Navegación y enrutamiento en Flutter: Navegación con barra de navegación inferior

Uno de los aspectos más cruciales del desarrollo de aplicaciones es la capacidad de navegar entre diferentes pantallas y secciones. En Flutter, esta funcionalidad se proporciona a través del concepto de enrutamiento y navegación. En este contexto, centrémonos en uno de los componentes más comunes utilizados para la navegación: la barra de navegación inferior.

La barra de navegación inferior es una barra de navegación horizontal que generalmente se coloca en la parte inferior de una aplicación. Permite a los usuarios cambiar entre diferentes secciones de la aplicación con un solo toque. Esta barra de navegación inferior se usa comúnmente en aplicaciones a gran escala donde se requiere navegación entre diferentes secciones.

Cómo implementar la navegación con la barra de navegación inferior

Para implementar la navegación de la barra de navegación inferior en Flutter, primero debemos definir una barra de navegación inferior en nuestra aplicación. Para hacer esto, podemos usar el widget BottomNavigationBar de Flutter. Este widget recibe una lista de elementos (BottomNavigationBarItem) que representan las diferentes secciones de la aplicación.

Primero, necesitamos establecer un estado para el índice de la página actual. Este estado cambiará cada vez que se seleccione un nuevo elemento en la barra de navegación inferior.

int _currentIndex = 0;

A continuación, definimos la lista de páginas que representan las diferentes secciones de la aplicación. Cada página está representada por un widget.

Lista final _pages = [
  Pagina principal(),
  Página de búsqueda(),
  Página de perfil(),
];

A continuación, definimos la barra de navegación inferior dentro del método de compilación del widget principal. Aquí, definimos los elementos de la barra de navegación inferior y manejamos la lógica de cambio de página cuando se selecciona un elemento.

Barra de navegación inferior (
  índiceactual: _índiceactual,
  onTap: (índice) {
    establecerEstado(() {
      _currentIndex = índice;
    });
  },
  elementos: [
    Elemento de barra de navegación inferior (
      icono: Icono(Iconos.home),
      etiqueta: 'Inicio',
    ),
    Elemento de barra de navegación inferior (
      icono: Icono(Iconos.búsqueda),
      etiqueta: 'Buscar',
    ),
    Elemento de barra de navegación inferior (
      icono: Icono(Iconos.persona),
      etiqueta: 'Perfil',
    ),
  ],
),

Finalmente, mostramos la página actual en el cuerpo del widget principal. Usamos el estado _currentIndex para determinar qué página mostrar.

cuerpo: _páginas[_currentIndex],

Conclusión

La navegación con la barra de navegación inferior es una parte esencial del desarrollo de aplicaciones en Flutter. Permite a los usuarios cambiar fácilmente entre diferentes secciones de la aplicación, mejorando la experiencia del usuario. Con Flutter, implementar la navegación de la barra de navegación inferior es fácil y directo, gracias al widget BottomNavigationBar y la flexibilidad del sistema de enrutamiento de Flutter.

Para crear aplicaciones más complejas y avanzadas, puede combinar la navegación de la barra de navegación inferior con otras técnicas de enrutamiento y navegación, como la navegación por cajones, la navegación por pestañas y la navegación por pilas. Esto le permitirá crear aplicaciones con una navegación más rica y una experiencia de usuario más inmersiva.

En conclusión, la navegación y el enrutamiento son aspectos cruciales del desarrollo de aplicaciones de Flutter, y dominar estos conceptos es esencial para convertirse en un desarrollador de Flutter competente.

Siguiente página del libro electrónico gratuito:

95Navegación y enrutamiento en Flutter: Navegación con vista de página

3 minutos