Flutter Navigator 2.0

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

Now that our router is connected with Route Information Parcel and is parceling the information, we have to map the URL path with the pages so that our router displays them when needed. Firstly, we have to add the applying type to our book_router_delegate so that we can use it inside our delegate function. Navigate to book router delegate and scroll to the top and instead of BookManager pass the app link over there. In the book router delegate, we had a function called Set New Route Path, which was returning a null value. We are going to write our code inside this function. The set new Route Path function passes the app link as a parameter that we can use inside our application. We need to check the location of the link that we get from the app link and then map the condition as per our needs. Scroll down to set new route path function and let us update this function. Instead of configuration that we're passing in our set new route path function, we will pass App Link. Now we will use the Switch case inside to configure our new route path. This set new route path 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. So we are, if our new link location is splashPath, then we want to initialize our app. That's why we call the appStateManager Initialize function. If the new link location is cartPath then we want to make sure that our on cartTapped function is called and we set the value through from our abstract manager Just like that, we do same for all the cases. If our new link is equal to itemPath then we extract the itemID from our new link and assign it to a variable called as itemID. We make sure that itemID is not equal to null. Then we pass this itemID in our set selected_book_item function from our bookManager. Now let us check if our app is working perfectly as expected. Our app is running exactly as we expected. Now let us check once on web as well so I will choose Chrome from here. I will pause our previous instance and hit the play button again. So you can see our app is running exactly as expected on web. But, if you will look at the address bar you will find that it is not getting update. This is cause we are not converting the app state to URL to display it on the browser web address bar. Let us get started with that. So now when the user navigates to other screen we want the URL to update and show the new path in the URL. When the user modifies the state notify listeners are called updating this change. The route information parser asks for current navigation configuration so that it converts the app state into the app link. The route information parser then calls the restore route information and converts the app link to a URL screen. Still we have to write a function that will take this change and notify the browser to update the URL. For this, let us create a new function in route delegate called As Get Current Path which has a written type of app link. So what we're doing, we are checking the condition. If app state manager isSignUp and if appStateManager on SignUpComplete is false, then we want to return the app link, which states sign up else if App state manager isLoggedIn, is false and is initialized is true and on SignUp is false then we want to make sure that the Applink is loginPath else if the app state manager is on checkout we want to return the checkout as our AppLink. If it is onmybooks, then we want to return my books as the app link. If it is on settings and on my books is false then we want to return settingsPath. The same goes with our cartPath. Now if book manager selected book item is not equal to null and if abstract manager on read book is true that means we are on Read book. So we will get the ID from our book manager dot selected book item ID because we have to pass this ID into our item ID. When we call the read book path same goes with our detail page. If book manager dot selected book item is not equal to null then we want to get the ID from our book manager selected item ID and pass that into our app link ID parameter, homePath and splashPath. It is normal. Now we have to pass this function on get current configuration. So scroll up to our build widget function and on top of our build widget we will call the get current configuration function. And we will pass our get current path over here and let us override this function. Now if I will play our application in our Chrome browser let's see what we get. We had the splash screen, now we have the login screen. After logging, I'll have the slash for the home. I can go book ID is equal to one. Pressing back, it'll change again. Book ID three. If I'll go to cart, it'll change to cart. If I'll go to settings, this will change to settings. My books will take me to my books. Settings. Even if I change the number of a year from two. If I say if I'll click three and press enter, the book will change as well because our URL parsing is also working as intended. Let's see if I write directly cart it should take me to cart screen. If I write Settings, it should take me to setting screens. My book will take me to my book pages. So everything is working as expected. Let us just copy this number from here. Coming to our home screen. If I just paste this and let's say I change it to two I want us to go to our flatter Apprentice details page hitting enter, we are at detailed screen and you can see this flatter apprentice sample will take me to the read book ID two. So you can see everything is working as expected. Here are a router delegate cause the get current configuration function When the screen changes. We have passed our get current path function there. So whenever the navigation changes the get current configuration function is called and then our get current path returns the converted URL string from the app link that we have created.