---
title: 🧭 Barra de navegación inferior
description: "## 🧭 Escoller unha sección Unha barra inferior permite cambiar entre as seccións principais dunha aplicación. Colocámola no parámetro `bottomNavigationBar` de `Scaffold`. Usaremos `BottomNavigationBar` para continuar cos exemplos dos apuntamentos. Flutter tamén ofrece `NavigationBar`, a opción recomendada para o deseño…"
url: "https://www.drodicio.com/docs/flutter/tema-4-scaffold/barra-inferior/"
updated: "2026-10-12"
category: Tema 4. Estrutura dunha pantalla. Scaffold
---

# 🧭 Barra de navegación inferior

## 🧭 Escoller unha sección

Unha barra inferior permite cambiar entre as seccións principais dunha aplicación. Colocámola no parámetro `bottomNavigationBar` de `Scaffold`.

Usaremos `BottomNavigationBar` para continuar cos exemplos dos apuntamentos. Flutter tamén ofrece `NavigationBar`, a opción recomendada para o deseño Material 3; veremos a equivalencia en «Para saber máis».

Esta captura mostra a idea dunha barra inferior con dúas opcións:

![Localización da barra de navegación inferior](https://www.drodicio.com/wp-content/uploads/2026/10/bottomNavigationBar.png)
Localización da barra de navegación inferior

## 🔄 Aplicar o estado á selección

Para cambiar de sección precisamos lembrar cal está seleccionada. Ese dato é o **estado** da pantalla.

Aplicamos as tres pezas que vimos no **Tema 3.3**:

- `StatefulWidget` representa un widget con estado asociado.
- A clase `State` garda `_indiceActual`: `0` para a primeira sección e `1` para a segunda.
- `setState` avisa a Flutter de que cambiou o dato e hai que volver construír a interface.

O método da clase `State` que cambia a selección é:

```dart
void seleccionar(int indice) {
  setState(() {
    _indiceActual = indice; // Cambiamos o dato e solicitamos actualizar a pantalla.
  });
}
```

Non abonda con cambiar o número: a barra debe recibir ese valor en `currentIndex`, e o `body` debe escoller o contido correspondente.

## ⚙️ Propiedades principais

| Propiedade | Para que serve? |
| --- | --- |
| `items` | Lista de opcións, cada unha cunha icona e unha etiqueta. |
| `currentIndex` | Índice da opción seleccionada. |
| `onTap` | Callback que recibe o índice premido. |
| `type` | `fixed` mantén a distribución; `shifting` engade transicións entre opcións. |
| `selectedItemColor` / `unselectedItemColor` | Cores das opcións seleccionadas e restantes. |

## 🧪 Exemplo completo

As dúas seccións comparten o mesmo `Scaffold`. Ao premer «Centro» ou «Perfil», cambiamos o contido do `body`. A barra superior e a barra inferior seguen sendo as mesmas.

> 🔗 DartPad:
>
>
>
> - [`https://dartpad.dev/?id=0d1f536c60c8220cb96a881b14db84cc`](https://dartpad.dev/?id=0d1f536c60c8220cb96a881b14db84cc).

[https://dartpad.dev/embed-inline.html?id=0d1f536c60c8220cb96a881b14db84cc](https://dartpad.dev/embed-inline.html?id=0d1f536c60c8220cb96a881b14db84cc)

Comeza cun número pequeno de seccións. A navegación entre pantallas independentes e o paso de datos quedan para o Tema 3.5.

![Cambiar entre Centro e Perfil coa barra inferior](https://www.drodicio.com/wp-content/uploads/2026/10/bottomNavigationBar_exemplo-scaled.png)
Cambiar entre Centro e Perfil coa barra inferior

### 🔍 Que sucede ao premer «Perfil»?

1. `onTap` chama a `seleccionar(1)`, porque «Perfil» é a segunda opción.
2. Dentro de `setState`, gardamos `1` en `_indiceActual`.
3. Flutter volve executar `build`.
4. `currentIndex` fai que a barra marque «Perfil».
5. `_contidos[_indiceActual]` selecciona o segundo widget da lista e móstrao no `body`.

> 💡 A orde debe coincidir: a primeira opción da barra corresponde ao primeiro elemento de `_contidos`, a segunda ao segundo, etc.
>
>
>
> 📚 Consulta:
>
>
>
> - [BottomNavigationBar → `https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html`](https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html).