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 difference screens or pages that are represented by 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 section of flutter application. In flutter, routes can be generated automatically based on certain conditions by using a route generator function and handle navigation logic. We will learn in this post how to define flutter routes, how to define flutter routes with 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 MaterialApp() widget and different routes using the routes parameter of MaterialApp(). The example of basic flutter routes is as below:

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

Navigate to Different Screen in Flutter

In order to navigate to product screen defined in routes of MaterialApp() we would use flutter 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 Previous Screen in Flutter 

We would use pop() method of flutter navigator class to return back to 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 be then assigned to onGenerateRoute parameter of MaterialApp(). The flow or logic involves following steps:

  • Create a class ApplicationRouter and define the Route instance as function.
  • Handle the routes based on switch statement clearly indicating which route name should handle navigating to certain flutter screen or page.
  • Create an other Route instance method for missing routes or error route in case application tries to navigate to a screen for which 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 above code snippet, we also need to define MaterialPageRoute in each widget i.e. 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 settings parameter defines the route settings which accepts RouteSettings instance with name and arguments parameter.

# 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 onGenerateRoute parameter of MaterialApp() like this:

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

We explained in this post how to define routes in flutter application and how to use flutter navigator to navigate to different screens in flutter application. We used 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 ApplicationRouter class in a separate file to keep code clean of your application.

Home