Flutter: Rotas Nomeadas (Com parâmetros)

Já precisou passar parâmetros em sua rota nomeada? ou ainda nem usa rotas nomeadas? Esse é o lugar certo para você!

Photo by Artur Shamsutdinov on Unsplash

Primeiro devemos relembrar a forma mais usual de levar o usuário de uma tela A para uma tela B:

 Navigator.push(
     context,
     MaterialPageRoute(builder: (context) => TelaB()),
 ); 

Mas este meio não é o melhor caminho para fazer o roteamento dento de nossa aplicação.

1º Passo

Vá para o arquivo main.dart

MaterialApp(                             
    title: 'Flutter Demo',                             
    theme: ThemeData(                               
        primarySwatch: Colors.blue,
    ),                             
    initialRoute: '/',                             
    routes: {                               
        '/': (_) => HomePage(),
        '/telab': (context) => TelaB(),    
    },                           
);

Como você pode ter notado, nos omitimos o argumento home, ele foi trocado por initialRoute, que pega a referencia do map em routes.

2º Passo

Agora, na sua função para enviar o usuário para outra tela, faça:

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

Como você pode ver, fica bem mais legível assim que comparamos com o código que estávamos acostumados.

Mas e se eu quiser passar parâmetros? É bem simples.

1º Passo

Edite o map em routes.

Esta parte:

'/telab': (context) => TelaB(),

Substituiremos por:

'/telab': (context) {                                 
    final args = ModalRoute.of(context).settings.arguments as Map;
    return TelaB(id: args['id'], title: args['title']);                               }

Os argumentos “id” e “title” foram usados para didática, no seu caso, use os próprios de sua classe.

2º Passo

Agora, na função:

Navigator.of(context).pushNamed('/telab', arguments: {
    'id': 234,  
    'title': "Exemplo de Title",                                         
});

Pronto, parabéns, agora você já sabe como trabalhar com notas nomeadas e com parâmetros.