Navigator | route

• Navigator | route

Se você deseja trabalhar com navegação em Flutter sem utilizar pacotes externos, as opções principais são:

1. Navegação com Navigator e MaterialPageRoute

É a forma mais básica e direta para empilhar e desempilhar rotas usando o Navigator.

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

Navigator.pop(context); // Volta para a tela anterior

2. Navegação Nomeada (Named Routes)

Essa abordagem facilita o gerenciamento de várias rotas, especialmente quando se trabalha com uma quantidade maior de telas.

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => PrimeiraTela(),
    '/segunda': (context) => SegundaTela(),
  },
);

// Navegação
Navigator.pushNamed(context, '/segunda');

3. Navegação com onGenerateRoute

Útil para criar rotas dinamicamente ou quando você precisa passar argumentos para as telas.

MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name == '/detalhes') {
      final int id = settings.arguments as int;
      return MaterialPageRoute(
        builder: (context) => DetalhesTela(id: id),
      );
    }
    return null; // Se nenhuma rota combinar
  },
);

4. Navegação com onUnknownRoute

Usada para capturar e tratar rotas que não foram definidas, direcionando o usuário para uma tela de erro ou uma tela alternativa.

MaterialApp(
  onUnknownRoute: (settings) {
    return MaterialPageRoute(
      builder: (context) => TelaErro(),
    );
  },
);

5. Navegação com PageRouteBuilder

Permite criar transições personalizadas entre telas, oferecendo mais controle sobre a animação durante a navegação.

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SegundaTela(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(0.0, 1.0);
      var end = Offset.zero;
      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  ),
);

6. Navegação com Navigator 2.0

Essa abordagem, também conhecida como API de navegação declarativa, é mais avançada e permite um controle mais fino sobre o estado de navegação. É especialmente útil para aplicações complexas e para integração com a web.

class MyRouterDelegate extends RouterDelegate
    with ChangeNotifier, PopNavigatorRouterDelegateMixin {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: [
        MaterialPage(child: HomeScreen()),
        if (showDetails) MaterialPage(child: DetailScreen()),
      ],
      onPopPage: (route, result) {
        if (!route.didPop(result)) {
          return false;
        }
        showDetails = false;
        notifyListeners();
        return true;
      },
    );
  }
}

Essas são as abordagens nativas disponíveis para construção de rotas no Flutter, sem utilizar pacotes externos. Cada uma dessas abordagens tem suas vantagens dependendo do cenário e da complexidade da navegação que você precisa implementar.