Navegação no Flutter: Rotas, Named Routes e Navigator 2.0

Navegação no Flutter

A navegação é uma parte fundamental do desenvolvimento de aplicativos móveis, permitindo que os usuários se movam entre diferentes telas e funcionalidades. O Flutter oferece várias abordagens para gerenciar a navegação, incluindo rotas, named routes e o Navigator 2.0.

1. Rotas Básicas

No Flutter, uma rota é simplesmente uma tela ou página no aplicativo. Para navegar entre as rotas, você pode usar o Navigator e o método push para adicionar uma nova rota à pilha:

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

Este exemplo navega de uma tela atual para uma nova tela chamada NovaTela.

2. Named Routes

As named routes permitem que você defina rotas com nomes, facilitando a navegação em todo o aplicativo. Para usar named routes, você deve definir suas rotas no widget MaterialApp:

MaterialApp(
  routes: {
    '/': (context) => TelaInicial(),
    '/nova': (context) => NovaTela(),
  },
);

Para navegar usando named routes, você pode usar:

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

3. Passando Dados entre Rotas

É comum precisar passar dados entre rotas. Você pode fazer isso usando o construtor da rota ou com o método ModalRoute.of(context)?.settings.arguments. Aqui está um exemplo:

Navigator.pushNamed(
  context,
  '/nova',
  arguments: 'Dados a serem passados',
);

E na nova tela, você pode acessar os argumentos:

final args = ModalRoute.of(context)?.settings.arguments as String;

4. Navigator 2.0

O Navigator 2.0 é uma abordagem mais moderna e flexível para navegação no Flutter. Ele permite que você gerencie o estado da navegação de forma declarativa, usando a nova classe Router. Aqui está um exemplo básico:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: MyRouterDelegate(),
      routeInformationParser: MyRouteInformationParser(),
    );
  }
}

5. Criando um Router Delegate

O RouterDelegate é responsável por fornecer as rotas para o seu aplicativo. Aqui está um exemplo simples:

class MyRouterDelegate extends RouterDelegate
    with ChangeNotifier, PopNavigatorRouterDelegateMixin {
  final List pages = [];

  @override
  Widget build(BuildContext context) {
    return Navigator(
      pages: pages,
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        pages.removeLast();
        notifyListeners();
        return true;
      },
    );
  }

  @override
  Future setNewRoutePath(RouteSettings configuration) async {
    // Lógica para gerenciar as rotas
  }
}

6. Criando um Route Information Parser

O RouteInformationParser é responsável por interpretar as informações da rota e criar a configuração da rota. Aqui está um exemplo básico:

class MyRouteInformationParser extends RouteInformationParser {
  @override
  Future parseRouteInformation(RouteInformation routeInformation) async {
    // Lógica para converter informações de rota em uma configuração
  }
}

Conclusão

A navegação no Flutter é uma parte essencial para criar aplicativos interativos. Neste artigo, exploramos as rotas básicas, named routes e a nova abordagem com o Navigator 2.0. Cada método tem suas vantagens e desvantagens, e a escolha entre eles depende das necessidades do seu aplicativo.