How to get the current page in Flutter Navigator 2.0

A Beginner's Guide to Flutter Navigator 2.0

Flutter Navigator 2.0, a new navigation structure, introduces a more declarative approach, replacing the imperative routing method of Navigator 1.0. Understanding the key components and concepts of Navigator 2.0 is crucial for effective navigation.

Essential Components of Flutter Navigator 2.0

Flutter Navigator 2.0 comprises several key components responsible for routing:

1. RouteInformation: This component links the location within the app to the URI in a web browser.
2. RouteInformationParser: This class transforms RouteInformation into a data structure (developer-defined form) used within the application.
3. RouterDelegate: This class manages the app's routing table and adjusts it based on dynamic changes in pages.
4. Router: This component collaborates with the above three elements to control page navigation.

Linking URLs with Page Navigation in Flutter

Unlike Navigator 1.0, where routing had to be invoked directly using custom-defined names, Navigator 2.0 allows the app's state to be displayed in an address format, similar to a URL in the browser.

RouterDelegate and RouteInformationParser are essential for managing the dynamically changing routing state within the app based on user actions.

In the following sections, we delve into the details of RouterDelegate and RouteInformationParser, which are crucial for identifying the current page.

Understanding RouterDelegate & RouteInformationParser for Page Identification

RouterDelegate and RouteInformationParser are vital components of Navigator 2.0. They manage and identify your app's current page and routing state. To identify the current page, it's important to understand the roles of these components and how to use them effectively.

RouterDelegate in Flutter

RouterDelegate manages the routing state and page changes. To use this class, you need to inherit from the RouterDelegate<T> class and replace T with your app state in a custom class. The RouterDelegate requires the implementation of the following methods:

class CustomRouterDelegate<T> extends RouterDelegate<T> with ChangeNotifier, PopNavigatorRouterDelegateMixin<T> {
  // Returns the current state
  @override
  T get currentConfiguration {...}

  // Method to update the navigation table when a new state is set
  @override
  Future<void> setNewRoutePath(T configuration) {...}

  // Method pointing to the current stack of the navigator
  @override
  GlobalKey<NavigatorState> get navigatorKey {...}

  // Method returning the current page
  @override
  Widget build(BuildContext context) {...}
}

RouteInformationParser in Flutter

RouteInformationParser is used to convert the browser URL and app routing information. To use this class, inherit from the RouteInformationParser<T> class and replace T with your app state in a custom class:

class CustomRouteInformationParser<T> extends RouteInformationParser<T> {
  // Method to convert URL into app state
  @override
  Future<T> parseRouteInformation(RouteInformation routeInformation) {...}

  // Method to convert app state into a URL
  @override
  RouteInformation restoreRouteInformation(T configuration) {...}
}

With the CustomRouterDelegate and CustomRouteInformationParser, you are now prepared to identify the current page in your app. The next section provides examples and conclusions for identifying the current page.

Example & Conclusion: Identifying the Current Page in Flutter

Let's illustrate an example using the CustomRouterDelegate and CustomRouteInformationParser to identify the current page. For this example, let's consider an app with a "home" page and a "detail" page.

Defining Custom Routing Classes

enum AppPage { home, detail }

class CustomRouterDelegate extends RouterDelegate<AppPage> with ChangeNotifier, PopNavigatorRouterDelegateMixin<AppPage> {
  GlobalKey<NavigatorState> _navigatorKey;
  AppPage _currentPage;

  CustomRouterDelegate() : _navigatorKey = GlobalKey<NavigatorState>() {
    //...
  }

  @override
  AppPage get currentConfiguration => _currentPage;

  //...

  @override
  GlobalKey<NavigatorState> get navigatorKey => _navigatorKey;

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: _navigatorKey,
      pages: [if (_currentPage == AppPage.home) Home(), else Detail()],
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        _currentPage = AppPage.home;
        notifyListeners();
        return true;
      },
    );
  }
}

class CustomRouteInformationParser extends RouteInformationParser<AppPage> {
  @override
  Future<AppPage> parseRouteInformation(RouteInformation routeInformation) async {
    switch (routeInformation.location) {
      case '/detail': return AppPage.detail;
      default: return AppPage.home;
    }
  }

  @override
  RouteInformation restoreRouteInformation(AppPage configuration) {
    switch (configuration) {
      case AppPage.detail: return RouteInformation(location: '/detail');
      default: return RouteInformation(location: '/');
    }
  }
}

How to Identify the Current Page

To identify the current page within the app, refer to the currentConfiguration property of the CustomRouterDelegate class:

final currentPageRoute = customRouterDelegate.currentConfiguration;

This property returns information about the current page (AppPage enum value), helping you identify the current page.

Conclusion

With the help of Flutter's Navigator 2.0, the CustomRouterDelegate, and CustomRouteInformationParser, you can effectively identify the current page. They provide a powerful way to declaratively route and manage pages while implementing custom routing logic.