Flutter & Nuvigator: Intro with routers and parameters

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)
      ]),
    );
  }

}

Commit with these changes

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.

Commit with changes

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)),
    );
  }
}

Commit with changes

Result: