Hi there!
This article intends to explain a bit about nuvigator, building a simple application to demostrate how to navigate from one screen to another and how to send parameters. Enjoy it!
What's nuvigator?
Nuvigator is a flutter package for navigation, written on top of flutter navigation. It's a package that was created by nubank and wants do add new functionalities, such as deep links, also have support for nested routes and can help with modular apps. Check additional info here
Example
For this example, we're going to create an app nuvigatorexample using the flutter cli:
flutter create nuvigatorexample
Installing the package
The current version of nuvigator is 0.7.2, that's does not support null safety and will throw an error when trying to run the app, so it's necessary to change the sdk version.
Inside pubspec.yaml, change the sdk version:
sdk: ">=2.11.0 <3.0.0"
and add nuvigator to dependencies:
dependencies:
flutter:
sdk: flutter
nuvigator:
Now install the package, you can use your ide or type the following command on terminal:
flutter pub get
Building the app
Let's build an example using nuvigator to navigate between two screens.
The first screen, Home, will have a button that navigates to the second screen, Details.
Our 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'),
)),
);
}
}
Our 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')),
);
}
}
Our 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)
]),
);
}
}
Using a router
Inside our home_screen, we gonna add a new class that will extend a 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;
}
We're going to do the same for our 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;
}
Now we must create our router inside main.dart, creating a new class that extends NuRouter and changing the 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()),
);
}
}
This should have the same result as the previous navigation.
Passing parameters to details screen
Now, let's send a personalized text to our details screen.
First, we must define the text as a parameter in the pushNamed function:
nuvigator.pushNamed('details', arguments: {'message': 'Hello world'});
Then, we must get this parameter inside our details screen, using nuvigator settings raw parameters.
Insider the DetailsRoute build method, let's get the message:
final String message = settings.rawParameters['message'];
and then inside our DetailsScreen, we're going do add a new prop called message and use it to render:
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)),
);
}
}
Result:
Top comments (0)