Posted on Feb 26, 2022

Flutter & Nuvigator: Intro com routers e parâmetros

#flutter #nuvigator #mobile #braziliandevs

Olá!

Este artigo tem como objetivo explicar um pouco sobre o nuvigator, construindo uma aplicação simples para mostrar como navegar de uma tela para outra e como enviar parâmetros.

O que é o nuvigator?

Nuvigator é um pacote flutter para navegação, feito em cima do flutter navigation. É um pacote que foi criado pelo Nubank e que tem como objetivo adicionar novas funcionalidades, como deep links, também tem suporte a rotas aninhadas e pode ajudar com aplicativos modulares. Confira aqui mais sobre o pacote

Exemplo

Para este exemplo, nós criaremos um app nuvigatorexample usando a cli do flutter:

flutter create nuvigatorexample

Instalando o pacote

A versão atual do nuvigator é 0.7.2, que não tem suporte ao null safety, e irá disparar um erro ao tentar rodar o app, então é necessário mudar a versão do sdk.

Dentro do arquivo pubspec.yaml, mude a versão do sdk:

sdk: ">=2.11.0 <3.0.0"

e adicione o nuvigator nas dependências:

dependencies: flutter: sdk: flutter nuvigator:

Agora instale o pacote, você pode usar sua IDE ou digitar o seguinte comando no terminal:

flutter pub get

Construindo o app

Vamos criar um exemplo usando nuvigator para navegar entre duas telas.

A primeira tela, Home, vai ter um botão que navega para a segunda tela, Details.

Nossa home_screen.dart:

import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget { final Function onPressed; const HomeScreen({Key key, this.onPressed}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Home')), body: Center( child: ElevatedButton( onPressed: onPressed, child: const Text('Navigate to details'), )), ); } }

Nossa details_screen.dart:

import 'package:flutter/material.dart'; class DetailsScreen extends StatelessWidget { const DetailsScreen({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Details')), body: const Center(child: Text('Details screen')), ); } }

Nosso main.dart:

import 'package:flutter/material.dart'; import 'package:nuvigator/next.dart'; import 'package:nuvigatorexample/screens/details_screen.dart'; import 'package:nuvigatorexample/screens/home_screen.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Nuvigator.routes(initialRoute: 'home', routes: [ NuRouteBuilder(path: 'home', builder: (BuildContext contextNuvigator, __, ___) => HomeScreen(onPressed: (){ Nuvigator.of(contextNuvigator).open('details'); },), screenType: materialScreenType), NuRouteBuilder( path: 'details', builder: (_, __, ___) => const DetailsScreen(), screenType: materialScreenType) ]), ); } }

Commit com essas mudanças

Usando um router

Dentro da nossa home_screen, vamos adicionar uma nova classe que estende NuRoute:

import 'package:nuvigator/next.dart'; class HomeRouter extends NuRoute { @override Widget build(BuildContext context, NuRouteSettings<Object> settings) { return HomeScreen(onPressed: (){ nuvigator.pushNamed('details'); },); } @override String get path => 'home'; @override ScreenType get screenType => materialScreenType; }

Vamos fazer o mesmo para a details_screen:

import 'package:nuvigator/next.dart'; class DetailsRoute extends NuRoute { @override Widget build(BuildContext context, NuRouteSettings<Object> settings) { return DetailsScreen(); } @override String get path => 'details'; @override ScreenType get screenType => materialScreenType; }

Agora devemos criar nosso router dentro do main.dart, criando uma nova classe que estende NuRouter e mudando o MaterialApp home:

class Router extends NuRouter{ @override String get initialRoute => 'home'; @override List<NuRoute<NuRouter, Object, Object>> get registerRoutes => [ HomeRouter(), DetailsRoute() ]; } class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Nuvigator(router: Router()), ); } }

Isto deve ter o mesmo resultado que a navegação anterior.

Commit com as mudanças

Passando parâmetros para a tela de details

Agora, vamos enviar um texto personalizado para a tela details.

Primeiro, nos devemos definir um texto como parâmetro na função pushNamed:

nuvigator.pushNamed('details', arguments: {'message': 'Hello world'});

Então, conseguimos recuperar este parâmetro dentro da tela details, usando os raw parameters do nuvigator settings.

Vamos recuperar a mensagem dentro do método build do DetailsRoute:

final String message = settings.rawParameters['message'];

E então dentro da nossa DetailsScreen, vamos adicionar uma nova prop chamada message e usar para renderizar a mensagem:

class DetailsScreen extends StatelessWidget { final String message; // text from route const DetailsScreen({Key key, this.message}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Details')), body: Center(child: Text(message)), ); } }