Flutter Routes

Different ways to navigate in flutter

Routes

Different ways to navigate in flutter

In flutter pages/ screens are referred as routes. The pages/screens display different types of information. We use navigator to navigate/move to a new route.

How to navigate between two routes

Lets assume we have 2 pages Login page and Registration page. To navigate between the two pages, we will use two methods:

Navigator.push()

push() is used to switch to a new route by adding the route to stack of route managed by the navigator. We need to tap a widget example a button to be able to navigate to another route. This leads to the use of onPressed() method where we will add our navigator method.

This button enables you to navigate to login page(assuming we are in registration page).

To navigate back to registration page from Login page we need to introduce another method Navigator.pop().

Navigator.pop()

This method is used to close a route and return to the previous page.The pop() method removes the current route from the stack of routes managed by the navigator. To implement this method we will utilize onPressed() method. To navigate back to Registration page.

ElevatedButton(
   style: ElevatedButton.styleFrom(
          primary: Colors.red, // background
          onPrimary: Colors.white, // foreground
   ),
onPressed: () {
    Navigator.pop(context);
  },
child: Text('Registration!'),
),

Manage Multiple Routes in flutter App

If your app has multiple routes you need to find a way to easily manage your routes. To do this their are two ways to go around it.

method 1.

Add the routes in your main class. The disadvantage with this method of using string as name of routes, is that it is prone to spelling errors and other errors. The initial is the default route/page that will load when the app launches.

onPressed: () {                                                 Navigator.pushNamed(context, 'login');                                         },

To solve the above error, we will associate the name of the routes with the actual screens that it will point to. Using static keyword in the page will enable us to only get the id property from our page.

///call a route on button click
onPressed: () {                                                 Navigator.pushNamed(context, Login.id);                                         },

Method 2.

We will require 2 classes:routes.dart and router_generator.dart. Your can give them any name of your choice.

router_generator.dart

onGenerateRoute which is a route generator callback used when the app is navigated to a named route. The onGenerateRoute callback is called to generate a route for a given RouteSettings and will only be applied to route names pushed by the application, and so should never return null.

Navigator.pushNamed pushes a named route onto the navigator that most tightly encloses the given context. To use pushNamed an Navigator.onGenerateRoute callback must be provided

MaterialPageRoute A modal route that replaces the entire screen with a platform-adaptive transition. It performs appropriate transition to a new page.

main.dart.

Add the onGenerateRoute to your main.dart inside the MaterialApp

onGenerateRoute: RouterNavigator.generateRoute,

routes

routes.dart, this file will contain all the route constants to be used in the app.

const String loginPageRoute = '/login';
const String registrationPageRoute = '/registration';
const String welcomePageRoute = '/welcome';
const String chatPageRoute = '/chat';

Call the routes from a widget

To navigate between pages, us the format below to call routes. In the example below we are navigating to Login Page.

ElevatedButton(
   style: ElevatedButton.styleFrom(
          primary: Colors.red, // background
          onPrimary: Colors.white, // foreground
   ),
onPressed: () {
    Navigator.pushNamed(context, loginPageRoute);
    },
child: Text('Login!'),
),

The router_generator class above applies to classes that have no arguments. Like the one below.

class Welcome extends StatefulWidget {
    Welcome({Key key}) : super(key: key);
 @override
 _WelcomeState createState() => _WelcomeState();
}
class _WelcomeState extends State<Welcome> {
   @override
 Widget build(BuildContext context) {
  return Container(
   child: null,
      );
  }
}

For classes with arguments, you can pass arguments through the router generator class.

router generator for this class

case resultPageRoute:
 return MaterialPageRoute<ResultPage>(
  builder: (context) => ResultPage(
   bmiResult: bMICalculator.calculateBMI(),
   resultText: bMICalculator.getResult(),
   Interpratation: bMICalculator.getInterpratation(),
));

calling the route

TextButton(
displayText: result,//
onPressed: () {
Navigator.of(context, rootNavigator: true).pushNamed(resultPageRoute);
},
)

Refer to this project for more clarification.

Unit Test for the routes page

we will need a mock plugin for our pubspec.yaml file

dev_dependencies:
 flutter_test:
  sdk: flutter
 mockito: ^5.0.13

then create a mocks.dart file to hold your mock class.Optional, You can add your mock to the router_generator_test.dart class but to keep your code in order just create a different file to hold your mock.

/// your mock file
import 'package:flutter/widgets.dart';
import 'package:mockito/mockito.dart';
class MockBuildContext extends Mock implements BuildContext {}

router generator unit test