Flutter Navigation and Routes for Switching Screens

If you had done Android development before, you may be very well aware of the concept of the Activities and switching between activitis. Or passing data using bundles between activities. But when it comes to the Flutter we don’t talk about the activities anymore. Because of the more web friendly development, Flutter also call its activities the “Screens”. So when are talking about the switching between screens in the Flutter, it simply means we are taking about launching another activity.

There are different ways of Navigation between screens. Just like the way you do in any Web application, you also create Routes in the Flutter mobile application as well. So whenever you are switching screens, you are actually navigating between routes.

Simplest way of Navigation

The easiest and simplest way of navigation to another screen is by using Navigator.push() method.

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}Code language: JavaScript (javascript)

This method actually pushes another screen and keep the current screen in the stack so that you may able to go back to the previous screen by simply calling the Navigator.pop() method.

//to go back to previous screen
onPressed: () {
  Navigator.pop(context);
}Code language: JavaScript (javascript)

and if you want to pass arguments as well using the Navigator.push() method then you may simply use the following code

onPressed: () {  
    Navigator.of(context).push(
       MaterialPageRoute(
           builder: (context) =>
           SecondRoute(data: 'simple string from previous page'),
       ),
     );
  },Code language: JavaScript (javascript)

Navigation using Named Routes

Next way is to pass some extra property to the material app constructor with the all defined routes and use Navigator.pushedNamed() method. This is makes your routes easy to manage and combine it under single object so that you may simply keep track of all the routes. Here is the working definition of routes map property.

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: <String, WidgetBuilder>{
      '/': (context) => HomePage(),
      '/second': (context) => SecondHome(),
    },
  ));
}Code language: PHP (php)

or according to the documentation you can also use it like this

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Named Routes Demo',
    // Start the app with the "/" named route. In this case, the app starts
    // on the FirstScreen widget.
    initialRoute: '/',
    routes: {
      // When navigating to the "/" route, build the FirstScreen widget.
      '/': (context) => FirstScreen(),
      // When navigating to the "/second" route, build the SecondScreen widget.
      '/second': (context) => SecondScreen(),
    },
  ));
}Code language: JavaScript (javascript)

Now calling the Navigator.pushNamed method is pretty simple just like following

Navigator.pushNamed(context, '/second');Code language: JavaScript (javascript)

Flutter named routes arguments

If you are using the Named Routes and want to pass some arguments to the routes there are two possible ways. First one is used if you want to pass the constant arguments then it is pretty simple just the above example where we used the named routes

Navigation using onGenerateRoutes

There is another way to create routes which is the more manageable way by using the onGenerate Routes. This way is more clear and clean. Also, this allow dynamic routes creation. A simple example is as below

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case '/':
      return MaterialPageRoute(builder: (context) => HomeView());
    case 'login':
      return MaterialPageRoute(builder: (context) => LoginView());
    default:
      return MaterialPageRoute(builder: (context) => HomeView());
  }
}Code language: JavaScript (javascript)

Next simply let the app know about these routes like this

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routing',
      onGenerateRoute: router.generateRoute,
      initialRoute: HomeViewRoute,
    );
  }
}Code language: JavaScript (javascript)