Skip to content
tezvyn:

Flutter Named Routes: Navigate with Strings, Not Widgets

Source: docs.flutter.devEasyHow cards are made

Think of named routes as URL paths for your app's screens. Instead of building a screen widget on the spot, you just tell Flutter "go to '/profile'". This is ideal for centralizing navigation in large apps and for enabling deep linking.

Why it exists

In a growing Flutter app, navigation can become scattered. Pushing MaterialPageRoute instances directly from buttons couples your UI tightly to your navigation logic. This makes it hard to refactor, difficult to get a high-level view of your app's structure, and complicates features like deep linking.

The mental model

Treat your app's screens like web pages with unique addresses. Instead of telling a button how to build the next page, you just give it the address (the route name). A central "router" in your app looks up that address and builds the correct page. You're moving from imperative navigation ("build and push this widget") to a more declarative style ("go to this named location").

How it works

You define a map of routes in your top-level MaterialApp widget. The map's keys are string names (e.g., '/' or '/settings'), and the values are builder functions that return the screen widget for that route. To navigate, you call Navigator.pushNamed(context, '/settings'). The navigator finds the matching string in your routes map and pushes the corresponding widget onto the navigation stack. For passing data or handling dynamic routes, you can use the onGenerateRoute callback.

When to use it

Use named routes in any app with more than a handful of screens to keep navigation logic clean and centralized. It's almost mandatory if you need to implement deep linking, allowing external URLs or push notifications to open specific screens. It creates a self-documenting sitemap of your app.

When not to use it

For a very simple app with only two or three screens, the setup can be overkill; a direct Navigator.push is simpler. Also, the basic named routes system can become clumsy for highly complex navigation flows with lots of conditional logic; a dedicated routing package like go_router might be a better choice in those cases.

One canonical example

In your main.dart, you configure your MaterialApp with an initialRoute and a routes map. For example: MaterialApp(initialRoute: '/', routes: { '/': (context) => HomeScreen(), '/details': (context) => DetailsScreen(), }). Then, from a button's onPressed callback anywhere in the app, you can navigate by calling Navigator.pushNamed(context, '/details');.

Interview question

What is a key benefit of using named routes in a Flutter application, especially as it grows?

  • a.It automatically handles the rebuilding of all widgets on the navigation stack for performance optimization.
  • b.It completely eliminates the need for BuildContext when performing navigation actions.
  • c.It simplifies the process of passing complex data objects directly to a new screen's constructor.
  • d.It allows for a more centralized and maintainable way to manage navigation paths across the entire app.Correct
Why?

The card emphasizes that named routes centralize navigation logic, making it easier to manage in growing apps and providing a high-level view of the app's structure. While named routes can facilitate passing data, direct Navigator.push can also pass arguments, so it's not the primary differentiating benefit.

Just read this? Test yourself on what you have been reading.

Read the original → docs.flutter.dev

Put your scrolling time to good use

Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.

See open roles