Custom fade-and-scale transition with PageRouteBuilder and GoRoute

WHAT THIS TESTS: This question evaluates your understanding of Flutter's navigation stack at two levels: the imperative Navigator API where PageRouteBuilder lives, and declarative router packages like GoRouter. The interviewer wants to see that you know how animations are wired into route transitions, how to avoid rebuilding the destination page on every animation frame, and how to bridge custom transitions into a router-driven architecture.

A GOOD ANSWER COVERS: First, describe a custom PageRouteBuilder with a pageBuilder that returns the destination widget, and a transitionsBuilder that receives the animation, secondaryAnimation, and child. Inside transitionsBuilder, chain a CurvedAnimation off the primary animation and wrap the child in both a FadeTransition and a ScaleTransition, nesting them so the child is passed through exactly once. Second, for global application, mention setting a PageTransitionsTheme inside the MaterialApp theme, overriding the default buildTransitions for the target platform. Third, for GoRouter, explain that GoRoute has both a builder and a pageBuilder; to supply a transition you must use pageBuilder and return a CustomTransitionPage from the go_router package, passing the same transitionsBuilder and a transitionDuration. Fourth, note performance: the child parameter in transitionsBuilder is the built page, so animating that cached widget avoids rebuilding the route on every frame.

COMMON WRONG ANSWERS: A major red flag is constructing the destination widget directly inside transitionsBuilder instead of using the child parameter, which causes the entire page to rebuild every animation tick. Another mistake is trying to set the transition on GoRoute.builder instead of pageBuilder; builder only controls the widget, while pageBuilder controls the route wrapper. Candidates sometimes suggest wrapping every individual screen with an animation widget, which misses the route-level abstraction and breaks deep linking behavior. Finally, ignoring secondaryAnimation or the reverse transition leads to jarring pops where the outgoing page snaps away.

LIKELY FOLLOW-UPS: The interviewer might ask how you would make the transition reversible or how to drive it from a user gesture. They could ask about the difference between CupertinoPageRoute and MaterialPageRoute under the hood, or how to disable transitions entirely for a specific route in GoRouter. Another follow-up is how to share the same transition across every route without duplicating code, which leads to a helper function that returns a CustomTransitionPage.

ONE CONCRETE EXAMPLE: Suppose you want a three hundred millisecond fade and scale. You define a PageRouteBuilder with transitionDuration set to three hundred milliseconds. In transitionsBuilder, you create a CurvedAnimation using Curves.easeInOut from the animation parameter. You return a FadeTransition with opacity set to the curved animation, wrapping a ScaleTransition with scale set to the same animation, passing the child as the child of ScaleTransition. For GoRouter, you extract this into a helper CustomTransitionPage factory that every route can call. For global MaterialApp behavior, you create a PageTransitionsTheme with a custom PageTransitionsBuilder that reuses the same logic.