Using Navigator for Local Page Switching in Flutter: Implementation, Issues, and Solutions

In mobile applications, partial view switching is common; Android uses Fragments and iOS uses UINavigationController. Flutter can achieve similar behavior by leveraging the Navigator widget for localized page transitions.

Navigator is a StatefulWidget whose state, NavigatorState, builds an Overlay containing a stack of OverlayEntry objects. Push and pop operations correspond to stack push and pop, respectively.

During app initialization, MaterialApp builds a WidgetsApp, which in turn creates a Navigator. Consequently, a Navigator instance exists from the start of the Flutter app to manage page navigation.

To perform local page switching, embed a Navigator inside a Row layout: the left side hosts the Navigator for sub‑pages (e.g., SubPage1, SubPage2) while the right side displays other widgets. The overall hierarchy consists of MainPage, SubPage, and the individual sub‑pages.

Several issues arise during this approach. First, using MaterialPageRoute causes animations to originate from the screen edges, which looks odd for dialogs or drawers. Replacing MaterialPageRoute with PageRouteBuilder and applying custom transitions such as FadeTransition or a custom ScaleYTransition resolves the animation problem.

Second, push and pop operations may target the wrong Navigator because Flutter maintains both a root Navigator (created by WidgetsApp) and a local Navigator. Setting the rootNavigator parameter to true directs the operation to the root Navigator; leaving it false (or omitted) targets the local Navigator. This distinction prevents blank screens after popping dialogs.

Third, on Android devices the system back button may bypass the local Navigator, causing the entire app to exit instead of returning to the previous sub‑page. Handling this requires wrapping the main page with a WillPopScope, assigning a GlobalKey to the local Navigator, and invoking NavigatorState.maybePop() when canPop() is true, thereby ensuring the sub‑page processes the back event.

The article concludes that using Navigator for localized page switching is feasible, and the presented solutions for animation, rootNavigator handling, and back‑button management work across Flutter versions, including the newer 2.5 release.