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.

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.