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)
]),
);
}
}
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.
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)),
);
}
}
Resultado:
Top comments (0)