Flutter's onGenerateRoute for Dynamic Routes
onGenerateRoute is Flutter's central switchboard for creating routes on the fly, especially when they need data. Use it to pass arguments to new screens or handle routes not statically defined in the routes map.
Why it exists
Apps often need more than static, pre-defined routes. You might need to navigate to a user profile using an ID like '/profile/123' or pass complex objects to a new screen. onGenerateRoute provides a centralized, dynamic way to handle these cases, intercepting route requests and building the correct screen with the necessary data.
The mental model
Think of onGenerateRoute as a factory function for your app's pages. When Navigator.pushNamed('/some/route', arguments: ...) is called, Flutter first checks its static routes map. If the route isn't there, it knocks on onGenerateRoute's door and says, "Build me a page for '/some/route' with these arguments." Your function is then responsible for returning a valid Route object.
How it works
You assign a function to the onGenerateRoute property of your MaterialApp. This function receives a RouteSettings object, which contains the name of the route being requested and any arguments passed to it. Inside your function, you typically use a switch statement on settings.name. For each case, you instantiate the corresponding widget, wrap it in a MaterialPageRoute, and return it.
When to use it
Use onGenerateRoute whenever you need to pass data to a new route during navigation or handle dynamic route paths (e.g., '/user/123'). It keeps your routing logic clean and centralized. It is called only for named routes that are not found in the routes map.
When not to use it
For simple apps with a small, fixed set of pages that don't require arguments, the static routes map is simpler. If you only need a catch-all for routes that don't match anything else (a 404 page), use onUnknownRoute, which runs after onGenerateRoute fails to produce a route.
One canonical example
In your MaterialApp, you define onGenerateRoute. When a user taps an item, you call Navigator.pushNamed(context, '/item/3'). Your onGenerateRoute function receives the RouteSettings with name: '/item/3'. You can then parse the ID '3' from the name, construct an ItemDetailsPage with the correct data, and return it inside a MaterialPageRoute.
Interview question
For which scenario is Flutter's onGenerateRoute primarily designed?
- a.Optimizing route transitions for improved performance on low-end devices.
- b.Defining a static mapping of all possible route names to their corresponding widgets.
- c.Providing a centralized mechanism to build routes that require dynamic data or path segments.Correct
- d.Catching and handling any route request that no other routing mechanism could resolve.
Why? this is the answer
onGenerateRoute is specifically designed to intercept route requests not found in the static routes map, allowing for the dynamic creation of routes that need to pass data or parse dynamic path segments. Option D describes the role of onUnknownRoute, which acts as a final fallback.
Just read this? Test yourself on what you have been reading.
Read the original → api.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.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles