Navegue com o GoRouter no Flutter
Um pacote de roteamento declarativo para Flutter que usa a API do roteador para fornecer uma API conveniente baseada em URL para navegar entre telas diferentes.
Conteudo
Introdução:
O objetivo do pacote go_router é simplificar o uso do roteador no Flutter conforme especificado pelo construtor MaterialApp.router. Por padrão, requer uma implementação das classes Router Delegate e Route Information Parser. Essas duas implementações implicam na definição de um tipo personalizado para manter o estado do aplicativo que impulsiona a criação do Navigator. Você pode ler uma excelente postagem no blog sobre esses requisitos no Medium. Essa separação de responsabilidades permite que o desenvolvedor do Flutter implemente várias políticas de roteamento e navegação ao custo da complexidade.
Adicionar dependência:
Abra o terminal em seu projeto Flutter. Em seguida, execute o seguinte comando para instalar o pacote go_router em seu projeto Flutter.
$ flutter pub add go_router
ou você adicionará esta linha ao arquivo pubspec do seu pacote. yaml e execute “flutter pub get”
dependencies: go_router: ^6.0.1
Recursos:
GoRouter tem muitos recursos:
- > Analisar caminho e parâmetros de consulta usando uma sintaxe de modelo (por exemplo, “user/:id’).
- > Exibição de várias telas para um destino (sub-rotas).
- > Suporte de redirecionamento — você pode redirecionar o usuário para uma URL diferente com base no estado do aplicativo, por exemplo, para um login quando o usuário não está autenticado.
- > Compatibilidade com versões anteriores com a API Navigator
- > Suporte para aplicativos Material e Cupertino
Implementação:
Olá a todos…!!!! Hoje aprendemos sobre roteamento no aplicativo flutter. Para integrar o go_router em seu aplicativo, primeiro você deve adicionar MaterialApp.router no lugar do MaterialApp. Este construtor aceita muitas propriedades como routeInformationParser, routerDelegate, etc.
MaterialApp.router( debugShowCheckedModeBanner: false, routeInformationParser: NyAppRouter.returnRouter(false).routeInformationParser, routerDelegate: NyAppRouter.returnRouter(false).routerDelegate, );
Depois disso, criamos um app_route_config.dart. Neste arquivo, passamos todas as rotas. Primeiro, adicionamos a rota padrão que é a página inicial. Nas rotas, adicionamos um nome, caminho e anúncio pageBuilder. Depois disso, criamos uma rota para a página de perfil na qual passamos o userId e o userName. E também criamos o GoRoute para a página sobre e para a página de contato.
class NyAppRouter { static GoRouter returnRouter(bool isAuth) { GoRouter router = GoRouter( routes: [ GoRoute( name: MyAppRouteConstants.homeRouteName, path: '/', pageBuilder: (context, state) { return const MaterialPage(child: Home()); }, ), GoRoute( name: MyAppRouteConstants.profileRouteName, path: '/profile/:username/:userid', pageBuilder: (context, state) { return MaterialPage( child: Profile( userid: state.params['userid']!, username: state.params['username']!, )); }, ), GoRoute( name: MyAppRouteConstants.aboutRouteName, path: '/about', pageBuilder: (context, state) { return const MaterialPage(child: About()); }, ), GoRoute( name: MyAppRouteConstants.contactUsRouteName, path: '/contact_us', pageBuilder: (context, state) { return const MaterialPage(child: ContactUS()); }, ) ], errorPageBuilder: (context, state) { return const MaterialPage(child: ErrorPage()); }, ); return router; } }
E também adicione errorPageBuilder no qual retornamos MaterialPage e passamos ErrorPage como filho. e devolva o roteador. É assim que criamos as rotas para os navegadores.
Também criamos as constantes de rota para GoRouters. Em que passamos todas as rotas como uma string.
class MyAppRouteConstants { static const String homeRouteName = 'home'; static const String aboutRouteName = 'about'; static const String profileRouteName = 'profile'; static const String contactUsRouteName = 'contact_us'; }
Por fim, criamos a interface do usuário do projeto e, na parte da interface do usuário, também aprendemos o go_router e como navegar na interface do usuário. Em casa. dart retornamos o scaffold e passamos a appbar na qual passamos o título. Passe a Coluna no corpo e adicione os botões pelos quais navegamos de uma tela para outra tela.
Podemos navegar de várias formas como push, pushNamed em que passamos os parâmetros como userName e UserId ou podemos passar diretamente o caminho da rota que já definimos no arquivo route_config.dart. É assim que usamos o go_router. Espero que você aprenda muitas coisas como criar caminhos ou rotas e como passar parâmetros facilmente.
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( centerTitle: true, title: const Text('Go Router Demo'), ), body: Column( children: [ ElevatedButton( onPressed: () { GoRouter.of(context).push(Uri(path: '/about').toString()); }, child: const Text('About Page')), ElevatedButton( onPressed: () { GoRouter.of(context) .pushNamed(MyAppRouteConstants.profileRouteName, params: { 'username': 'Text user', 'userid': 'uhfhfhfdghfk' }); }, child: const Text('Profile Page')), ElevatedButton( onPressed: () { GoRouter.of(context) .pushNamed(MyAppRouteConstants.contactUsRouteName); }, child: const Text('ContactUs Page')), ], ), ); }
Conclusão:
Neste artigo, aprendemos como implementar o go_router no aplicativo Flutter. Aprendemos muitas coisas como criar o arquivo de configuração e como passar parâmetros para outra tela e muitas outras coisas.