Basic Routing with Flutter Navigator 2.0 Example

Introduction to Basic Routing with Flutter Navigator 2.0

The new Flutter Navigator 2.0 API has been released with the latest version of Flutter, and provides developers with a more powerful and flexible way to navigate between pages in an application. Navigator 2.0 can help you easily switch between screens and create complex animations with just a few lines of code. In this tutorial, we will show you how to use Navigator 2.0 to set up basic routing in a Flutter app.

Requirements

• Flutter SDK
• Android Studio/Visual Studio Code

Creating a New Application

To get started, create a new Flutter application using the following command:

flutter create routing_app

This will create a new application called “routing_app” which will contain all of our code for this tutorial.

Adding Routes

Now that our project has been created, let’s add some routes. Routes are basically paths from one page to another and they are defined as follows:

final routes = {
  '/home': (context) => HomePage(),
  '/about': (context) => AboutPage(),
  '/contact': (context) => ContactPage()
};

We have added three routes here which will correspond to our home page (“/home”), about page (“/about”), and contact page (“/contact”). We also need to provide a builder function which returns a widget when the route is called. You can see these in the above code snippet.

Navigating Between Routes

We can now navigate between routes using the Navigator object. To do so, we must pass the routes object we just created to the Navigator, like so:

Navigator.of(context).pushNamed('/home');

This will take us to the home page of our application. We can also pass arguments to the routes, such as the following:

Navigator.of(context).pushNamed('/about', arguments: {'name': 'John Doe'});

This will take us to the about page with a name argument of “John Doe” passed to it.

Conclusion

In this tutorial, we have seen how to use the new Flutter Navigator 2.0 API to set up basic routing in a Flutter application. We have looked at how to define routes, how to navigate between them, and how to pass arguments to them. We hope that you have found this tutorial useful and that you are now able to start creating your own navigation systems and routes.