🧭 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:

🔄 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 é:

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

🧪 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.

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.

🔍 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.