September 03, 2023

Flutter Routes and Navigator: Navigate Between Screens (With Examples)

Flutter routes are like URLs of Flutter applications, allowing users to jump from one screen to another. In this post, you will understand Flutter routes and how to navigate between different Flutter screens.

Flutter Routes and Navigator

Routes in Flutter are navigation paths to different screens or pages that are represented by a widget. Whereas Flutter navigation is process of moving between different screens or pages. Flutter routes help users navigate from one screen to another or navigate to different sections of the Flutter application. In Flutter, routes can be generated automatically based on certain conditions by using a route generator function and handling navigation logic. We will learn in this post how to define Flutter routes, how to define Flutter routes with a route generator and how to navigate between different Flutter screens and pages in simple and easy steps with example code snippets.

 

Basic Example of Flutter Routes

The basic Flutter route definition is to define an initial route in the MaterialApp() widget and different routes using the routes parameter of MaterialApp(). The example of basic Flutter routes is as follows:

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/product': (context) => ProductScreen(),
  },
);
 

Navigate to a Different Screen in Flutter

To navigate to the product screen defined in routes of MaterialApp(), we would use Flutter's Navigator class, either with pushNamed() route approach or push() approach for anonymous routes that are not defined in MaterialApp(), like this:

# Using named routes approach
Navigator.pushNamed(context, '/product');

# Using anonymous route approach
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => ProductScreen()),
);
 

Navigate to The Previous Screen in Flutter 

We would use the pop() method of Flutter Navigator class to return to the previous screen or page.

Navigator.of(context).pop();
 

Dynamic Flutter Routes with onGenerateRoute

One useful approach to define Flutter routes is using the onGenerateRoute parameter of MaterialApp(). This approach is more advanced routing logic and can be used for dynamic routing in Flutter. This approach involves generating routes based on certain conditions using a function. This function can then be assigned to the onGenerateRoute parameter of the MaterialApp(). The flow or logic involves the following steps:

  • Create a class ApplicationRouter and define the Route instance as a function.
  • Handle the routes based on a switch statement, clearly indicating which route name should handle navigating to a specific Flutter screen or page.
  • Create another Route instance method for missing routes or an error route in case the application tries to navigate to a screen for which a route has not been defined yet.
class ApplicationRouter {
  static Route onGenerateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return HomeScreen.route();
      
      case ProductScreen.routeName:
        return ProductScreen.route(arguments: settings.arguments);
     
      default:
        return errorRoute();
    }
  }

  static Route errorRoute() {
    return MaterialPageRoute(
      settings: const RouteSettings(name: '/error'),
      builder: (_){
        return const Scaffold(
            body: Center(
              child: Icon(Icons.warning, size: 100.0, color: Colors.red),
            ),
          );
      },
    );
  }
}

 

Create MaterialPageRoute in Flutter for Dynamic Routing 

After creating an application router class like in the above code snippet, we also need to define MaterialPageRoute in each widget i.e. the home screen widget and product screen widget. The code should be something like below to define MaterialPageRoute() in screen widgets. The builder parameter in MaterialPageRoute defines the widget that should be built or navigated to, while the settings parameter defines the route settings, which accepts a RouteSettings instance with name and arguments parameters.

# Route of home screen widget
static const routeName = '/';

static Route route() {
	return MaterialPageRoute(
	  builder: (_) => const HomeScreen(),
	  settings: RouteSettings(name: routeName),
	);
}

# Route of product screen widget
static const routeName = '/product';

static Route route({required productId}) {
	return MaterialPageRoute(
	  builder: (_) => ProductScreen(productId: productId),
	  settings: const RouteSettings(name: routeName),
	);
}

After we are done creating our Flutter application router class for dynamic routes and defining MaterialPageRoute in each widget, we can now pass the class method to the onGenerateRoute parameter of MaterialApp() like this:

initialRoute: HomeScreen.routeName,
onGenerateRoute: ApplicationRouter.onGenerateRoute,

We explained in this post how to define routes in a Flutter application and how to use Flutter Navigator to navigate to different screens in a Flutter application. We used the home screen and product screen as an example. The routes can increase in number as a Flutter application grows. That is why it is a good practice to keep the ApplicationRouter class in a separate file to keep the code of your application clean.

Home