Flutter Navigator 2.0

Episode - 22 Support Web Urls

Now that our router is connected with routerInformation parser and is parsing the information, we have to map the URL path woth the pages so that our router displays them when needed. Firstly we have add the AppLink type to our BookRouterDelegate so that we can use it inside our delegate function.

BookRouterDelegate extends RouterDelegate<AppLink>

In the BookRouterDelegate we had function called setNewRoutePath which was returning a null value. We are going to write our code insode this function. The setNewRoutePath functoion passes the AppLink as the parameter that we can use inside our application. We check the location of the link that we get from the appLink and then map the conditions as per our needs.

  @override
  Future<void> setNewRoutePath(AppLink newlink) async {
    switch (newlink.location) {
      case AppLink.homePath:
        appStateManager.login('anyusername', 'anypassword');
        break;
      case AppLink.itemPath:
        final itemId = newlink.itemId;
        if (itemId != null) {
          bookManager.setSelectedBookItem(itemId);
        }
    }
  }

This setNewRoutePath function is called when a new route is pushed. We use the switch case to check the location and the case which matches we push that screen. We also check if the location is itemPath. If the location is itemPath and itemId is not null we pass the itemId into our MovieManagers setSelectedBookItem(itemid). This lets the movie manager set the detail book as per the id of the movie.

Now our app working perfectly as intended with all the navigation and routers. But if you run the application on web and check the browers address bar you will notice that we only see the base URL. Nothing else is displayed. That is cause we are not converting the AppState to URl to display it on the browsers wed address bar. Let us get started with that.

So when the users navigates to other screen we want to the URL to update and show the new path in the URL.

When the user modifies the state, a notifyListenres() are called updating this change. The Route information parser asks for current navigation configuration so that it converts the appState into the AppLink. RouteInformationParser then calls the restoreRouteInformation and converts the AppLink to a URL string. Still we have to write a function that will take thsi chanage and notify the browser to update the URL.

For this create a new function below in routerDelegate called AppLink getCurrentPath(){}

  AppLink getCurrentpath() {
    if (appStateManager.isSignUp && !appStateManager.onSignUpComplete) {
      return AppLink(location: AppLink.signUpPath);
    } else if (!appStateManager.isLoggedIn &&
        appStateManager.isInitialized &&
        !appStateManager.onSignUpComplete) {
      return AppLink(location: AppLink.loginPath);
    } else if (appStateManager.onCheckout) {
      return AppLink(location: AppLink.checkoutPath);
    } else if (appStateManager.onMyBooks) {
      return AppLink(location: AppLink.myBookPath);
    } else if (appStateManager.onSettings && !appStateManager.onMyBooks) {
      return AppLink(location: AppLink.settingsPath);
    } else if (appStateManager.onCart) {
      return AppLink(location: AppLink.cartPath);
    } else if (bookManager.selectedBookItem != null &&
        appStateManager.onReadBook) {
      final id = bookManager.selectedBookItem?.id;
      return AppLink(location: AppLink.readBookPath, itemId: id);
    } else if (bookManager.selectedBookItem != null) {
      final id = bookManager.selectedBookItem?.id;
      return AppLink(location: AppLink.itemPath, itemId: id);
    } else if (appStateManager.onSignUpComplete && !appStateManager.isSignUp ||
        appStateManager.isLoggedIn) {
      return AppLink(location: AppLink.homePath);
    } else {
      return AppLink(location: AppLink.splashPath);
    }
  }

In this function just like we use conditional to set the pages we use the conditions to return the AppLink. Now pass this function on

  @override
  AppLink get currentConfiguration => getCurrentpath();

Here our RouterDelegates call the getCurrentConfiguration the time screen changes. We have passed our getCurrentPath function there. So when ever the navigation changes the getCurrentConfiguration function is called and then our getCurrentPath return the converted the URL String from the app link that we created