🧭 Dar un nome a cada ruta

No apartado anterior aprendemos a navegar entre pantallas utilizando MaterialPageRoute. Para abrir unha pantalla, creabamos a súa ruta directamente no botón.

Outra posibilidade é asignar un nome a cada ruta e utilizar ese nome para abrir a pantalla correspondente.

Por exemplo, nunha aplicación do IES San Mamede podemos utilizar:

• / para identificar a pantalla de inicio.
• /grupo para identificar a pantalla de 2º DAM.
• /profesorado para identificar unha pantalla coa información do profesorado.

Estes nomes escollémolos nós. Non son nomes de ficheiros nin temos que crear cartafoles con eses nomes.

💡 A vantaxe é que podemos definir as rutas nun único lugar e despois abrir as pantallas utilizando simplemente o seu nome.

🗂️ Rexistrar as rutas en MaterialApp

Para utilizar rutas nomeadas, primeiro debemos rexistralas na propiedade routes de MaterialApp.

Esta propiedade recibe un mapa no que relacionamos o nome de cada ruta coa pantalla que queremos mostrar:

routes: {
  '/': (context) => const PantallaInicio(),
  '/grupo': (context) => const PantallaGrupo(),
},

Neste exemplo:

• '/' identifica a ruta de inicio e relaciónaa con PantallaInicio.
• '/grupo' identifica a ruta do grupo e relaciónaa con PantallaGrupo.
• (context) => ... é unha función que devolve a pantalla correspondente cando Flutter necesita abrila.

Deste xeito, cando solicitemos a ruta /grupo, Flutter saberá que debe mostrar PantallaGrupo.

Para indicar que a aplicación debe comezar na pantalla inicial utilizamos:

initialRoute: '/',

Neste caso non necesitamos a propiedade home, porque a pantalla inicial xa está definida na ruta /.

💡 No programa completo verás (_) => ...: _ indica que non necesitamos utilizar o parámetro que recibe a función. Equivale aquí a escribir (context) => ... sen usar ese contexto.

➡️ Abrir polo nome e volver

Unha vez rexistradas as rutas, podemos abrir unha pantalla utilizando o seu nome mediante Navigator.pushNamed().

Por exemplo, para abrir a pantalla de 2º DAM:

Navigator.pushNamed(context, '/grupo');

Nesta instrución:

• context é o contexto do widget desde o que realizamos a navegación.
• '/grupo' é o nome da ruta que queremos abrir.

Flutter busca ese nome nas rutas rexistradas en MaterialApp e abre a pantalla correspondente.

É importante escribir o nome exactamente igual que no mapa routes, xa que /Grupo e /grupo son diferentes.

Para volver á pantalla anterior seguimos utilizando:

Navigator.pop(context);

🧪 Exemplo completo

Substitúe lib/main.dart por este programa. Preme «Abrir grupo» e despois «Volver» para comprobar o percorrido.

🔗 DartPad:

• https://dartpad.dev/?id=047635045853689ca2378507ecc5ccc6.

🔍 Que sucede ao premer o botón?

1. pushNamed recibe o nome da ruta que queremos abrir: /grupo.
2. Flutter busca esa ruta no mapa routes de MaterialApp.
3. Atopa a función asociada, que devolve PantallaGrupo, e mostra esa pantalla.
4. Ao premer «Volver», executamos Navigator.pop(context) e regresamos á pantalla inicial.

📚 Consulta:

• Navegación e rutas nomeadas → https://docs.flutter.dev/ui/navigation.