Example Usage To use the Router with the new Navigator API, developers will basically only have to implement their own custom RouterDelegate. For all other delegates, the defaults should be sufficient. This section demonstrates how the Router and new Navigator API can be used for a Stock app. For this example we assume that the stocks app has three screens: A homepage displaying a list of favorited stock symbols (clicking on a symbol goes to its details page) and a search icon (clicking on the search icon goes to the search page). A details page showing details about a particular stock with a back button to go back to the previous screen. A search page with a search bar, a back button, and a list of results. Clicking on a result goes to its details page. Clicking on the back button goes back to the previous screen. The app state (or model) for this app would look something like the following. It is made available within the app using an InheritedWidget as explained in this article. The app state is a change notifier to allow the RouterDelegate to listen for changes. class StockAppState extends ChangeNotifier { // If non-null: show the search page with this initial query. String get searchQuery; String _searchQuery; set searchQuery(String value) { if (value == _searchQuery) { return; } _searchQuery = value; notifyListeners(); } // If non-null: Show the details page for this symbol. String get stockSymbol; String _stockSymbol; set stockSymbol(String value) { if (value == _stockSymbol) { return; } _stockSymbol = value; notifyListeners(); } // Show these symbols on the home screen. final List favoriteStockSymbols; // Loaded from e.g. a database. } This app state can now be used by the custom RouterDelegate that developers will have to implement. The RouterDelegate is passed to the Router. All other delegates of the Router can keep their default implementation. class StockAppRouteDelegate extends RouterDelegate> with PopNavigatorRouterDelegateMixin { StockAppRouteDelegate(this.state) { state.addListener(notifyListeners); } void dispose() { state.removeListener(notifyListeners); } final StockAppState state; @override // From PopNavigatorRouterDelegateMixin. final GlobalKey navigatorKey = GlobalKey(); @override void setNewRoutePath(List configuration) { if (configuration.length != 1 || configuration.single.name != '/') { // Don't do anything if the route is invalid. return; } // Update state; if this modifies the state it will call our listener, // which will cause a rebuild. state.searchQuery = configuration.single.arguments['searchQuery']; state.stockSymbol = configuration.single.arguments['stockSymbol']; } @override Widget build(BuildContext context) { // Return a Navigator with a list of Pages representing the current app // state. return Navigator( key: navigatorKey, onPopPage: _handlePopPage, pages: [ MaterialPageBuilder( key: ValueKey('home'), builder: (context) => HomePageWidget(), ), if (state.searchQuery != null) MaterialPageBuilder( key: ValueKey('search'), builder: (context) => SearchPageWidget(), ), if (state.stockSymbol != null) MaterialPageBuilder( key: ValueKey('details'), builder: (context) => DetailsPageWidget(), ), ], ); } bool _handlePopPage(Route route, dynamic result) { Page page = route.settings; if (page.key == ValueKey('home')) { assert(!route.willHandlePopInternally); // Do not pop the home page. return false; } final bool result = route.didPop(result); assert(result); // Update state to remove the page in question; if this modifies the state // it will call our listener, which will cause a rebuild. if (page.key == ValueKey('search')) { state.searchQuery = null; return true; } if (page.key == ValueKey('details')) { state.stockSymbol = null; return true; } assert(false); // We should never be asked to pop anything else. return true; } }