Usando o contexto de go_router para lidar com rotas desconhecidas em Flutter.context versus goNamed.Take a rota de redirecionamento de erro.

Redirecionando para uma página de erro no Flutter usando go_router: múltiplas soluções

Solução Dart usando context.go com validação de rota e tratamento de erros

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
class ErrorPage extends StatelessWidget {
  const ErrorPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Error')),
      body: const Center(
        child: Text('404 - Page Not Found', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            if (context.canGo('/non-existent')) {
              context.go('/non-existent');
            } else {
              context.go('/error');
            }
          },
          child: const Text('Go to Non-Existent Page'),
        ),
      ),
    );
  }
}
class MyApp extends StatelessWidget {
  final GoRouter _router = GoRouter(
    routes: <RouteBase>[
      GoRoute(path: '/', builder: (context, state) => const HomePage()),
      GoRoute(path: '/error', builder: (context, state) => const ErrorPage()),
    ],
    errorBuilder: (context, state) => const ErrorPage(),
  );
  MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: _router.routerDelegate,
      routeInformationProvider: _router.routeInformationProvider,
      routeInformationParser: _router.routeInformationParser,
    );
  }
}
void main() {
  runApp(MyApp());
}

Usando rotas nomeadas e tratamento de erros para navegação go_router

Solução Dart alternativa usando context.goNamed com tratamento de erros personalizado

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
class ErrorPage extends StatelessWidget {
  const ErrorPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Error')),
      body: const Center(
        child: Text('404 - Page Not Found', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            try {
              context.goNamed('nonExistentRoute');
            } catch (e) {
              context.go('/error');
            }
          },
          child: const Text('Go to Non-Existent Page'),
        ),
      ),
    );
  }
}
class MyApp extends StatelessWidget {
  final GoRouter _router = GoRouter(
    routes: <RouteBase>[
      GoRoute(path: '/', builder: (context, state) => const HomePage()),
      GoRoute(path: '/error', builder: (context, state) => const ErrorPage()),
    ],
    errorBuilder: (context, state) => const ErrorPage(),
  );
  MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: _router.routerDelegate,
      routeInformationProvider: _router.routeInformationProvider,
      routeInformationParser: _router.routeInformationParser,
    );
  }
}
void main() {
  runApp(MyApp());
}

Testando o tratamento de erros com testes unitários

Testes unitários para verificação de roteamento e tratamento de erros no Flutter

import 'package:flutter_test/flutter_test.dart';
import 'package:go_router/go_router.dart';
import 'package:your_app/main.dart';
void main() {
  testWidgets('Navigate to non-existent page using context.go()', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    expect(find.text('Home'), findsOneWidget);
    await tester.tap(find.text('Go to Non-Existent Page'));
    await tester.pumpAndSettle();
    expect(find.text('404 - Page Not Found'), findsOneWidget);
  });
  testWidgets('Handle exception with context.goNamed()', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    expect(find.text('Home'), findsOneWidget);
    await tester.tap(find.text('Go to Non-Existent Page'));
    await tester.pumpAndSettle();
    expect(find.text('404 - Page Not Found'), findsOneWidget);
  });
}

Perguntas frequentes sobre o uso do Flutter go_router

1. Qual é o objetivo principal context.go em go_router?
2. O context.go O comando é usado para navegação direta na rota, especificando um caminho, redirecionando os usuários para uma página de erro se a rota não existir.
3. Por que context.goNamed lançar uma exceção ao acessar uma rota inexistente?
4. O context.goNamed O comando depende de nomes de rotas definidos, portanto, se um nome não for definido, ele não poderá localizar o caminho e gerará um erro em vez de redirecionar.
5. Como posso lidar com erros de rota com uma página de erro personalizada no go_router?
6. Configurando o errorBuilder O parâmetro nas configurações go_router permite que você especifique uma página de erro personalizada para qualquer rota indefinida.
7. É possível usar os dois context.go e context.goNamed no mesmo aplicativo?
8. Sim, ambos context.go e context.goNamed pode ser usado no mesmo aplicativo, mas com tratamento cuidadoso de erros para evitar exceções inesperadas para nomes indefinidos.
9. O que é pumpAndSettle em testes de Flutter?
10. O pumpAndSettle A função no teste Flutter espera que todas as animações sejam concluídas, garantindo que a interface esteja estabilizada antes de fazer afirmações.
11. Como é que testWidgets ajuda no teste de manipulação de rotas?
12. O testWidgets O comando permite testar interações como pressionamentos de botão e transições de rota, ajudando a verificar se a página de erro carrega conforme esperado em rotas inválidas.
13. Posso navegar condicionalmente para uma rota usando go_router?
14. Sim, usando context.canGo antes de navegar, você pode verificar se existe uma rota e evitar erros acessando apenas caminhos válidos.
15. Qual é a vantagem de usar MaterialApp.router com go_router?
16. MaterialApp.router é otimizado para configurações de roteamento, permitindo alterações dinâmicas de páginas e integração de tratamento de erros via routerDelegate e routeInformationParser.
17. Há um impacto no desempenho ao usar o errorBuilder no go_router?
18. Nenhum impacto significativo. O errorBuilder A função é chamada apenas quando uma rota inválida é acessada, tornando-a eficiente para lidar com casos extremos sem afetar o desempenho geral.
19. Como defino uma rota nomeada em go_router?
20. Em go_router, defina uma rota nomeada adicionando name parâmetro na configuração da rota e use context.goNamed para navegar usando este nome.
21. Qual é a utilidade findsOneWidget em testes de Flutter?
22. findsOneWidget é usado em testes de Flutter para verificar se uma única instância de um widget está presente na tela, como verificar se uma mensagem de erro aparece uma vez.
23. É necessário usar errorBuilder para lidar com rotas desconhecidas no go_router?
24. Embora não seja obrigatório, o uso errorBuilder melhora a experiência do usuário, fornecendo feedback claro sobre rotas desconhecidas, orientando os usuários para longe de caminhos quebrados.

Gerenciamento eficaz de rotas no Flutter

Flutter go_router O pacote oferece uma maneira dinâmica de controlar a navegação com validação de rota confiável. Ao usar context.go e context.goNamed com tratamento de erros personalizado, os desenvolvedores podem garantir que rotas desconhecidas levem os usuários a uma página de erro amigável em vez de lançar exceções. Essa abordagem agiliza a navegação no aplicativo e mantém os usuários informados.

Compreender a configuração e as diferenças entre context.go e context.goNamed permite um melhor controle de navegação, especialmente para aplicações com estruturas de rotas complexas. Com essas ferramentas, o tratamento de erros fica mais fácil, melhorando a confiabilidade do aplicativo e melhorando a jornada geral do usuário com menos interrupções. 🌟