7.4. Navigation and routing in Flutter: Navigation with named routes

Navigation and routing are fundamental aspects of application development. In Flutter, navigation and routing is handled by a navigation object that has a stack of widgets that can be manipulated to navigate between pages. One of the most efficient ways to handle navigation in Flutter is through the use of named routes.

Named routes are essentially strings that are used to identify a page or screen in a Flutter app. They are useful because they allow you to navigate to a page without needing to have a direct reference to it. This makes the code easier to maintain and more flexible, as you can change a page's implementation without having to change all the places the page is referenced.

To start using named routes in Flutter, you need to define a route map in the MaterialApp or WidgetsApp object. This route map is a dictionary where the keys are strings representing the route names and the values ​​are functions that return the widget that should be displayed when the route is navigated.

For example, you might have a route map that looks like this:

{
  '/': (context) => HomePage(),
  '/detail': (context) => DetailPage(),
}

Here, the '/' route corresponds to the HomePage and the '/detail' route corresponds to the DetailPage. You can navigate to these pages using the Navigator.pushNamed method, passing the context and route name as arguments.

For example, to navigate to the DetailPage, you would do this:

Navigator.pushNamed(context, '/detail');

This will push the DetailPage to the top of the navigation stack and display it. If you want to pass arguments to the page, you can pass them as a third argument to the pushNamed method. For example, if you wanted to pass an Item object to the DetailPage, you would do this:

Navigator.pushNamed(context, '/detail', arguments: item);

On the DetailPage, you can then access the arguments using the ModalRoute.of method to get the current route and then access the arguments property. For example:

final item = ModalRoute.of(context).settings.arguments as Item;

This will fetch the Item object you passed as an argument when you navigated to the page.

Named routes make navigation in Flutter much more manageable and flexible. They allow you to define all your routes in one place, making them easier to maintain and change. Also, since routes are just strings, you can easily pass route names as arguments, store them in variables, or even generate them dynamically.

In short, navigation and routing is an essential part of Flutter app development, and using named routes can greatly simplify this process. By understanding how to use named routes, you can make your code more maintainable, more flexible, and easier to navigate.

Next page of the Free Ebook:

90Navigation and routing in Flutter: Navigation with dynamic routes

3 minutes