Flutter Navigator 2.0

Nov 8 2022 · Dart 2.17.3, Flutter 3.0.2, Android Studio 2020.3

Part 4: Deep Links & Web Urls

20. Create a Navigation State Object

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 19. Setup Deep Links Next episode: 21. Create a Route Information Parser

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

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

Let us start by creating a navigation state object that will hold the state of the navigation. Currently, we have an app state manager that manages the state of the app, but nothing to manage the state of the navigation. So, let us start by doing that. In our router directory, let us create a new file called as app_link.dart, and let us create an applink class inside that file. This file will help us in linking the URL to the state of the app that we have. Linking the URL and the state of the app will help us create a navigation state. The main objective of this class is to parse the navigation configuration to and from a URL string. Now let us create a constant for each URL path. Open the books_page.dart file, and copy the page's string and paste them here. We have to add a const keyword before all the variables. Apart from this URL path constant, we will also need two variables called as itemPath and idParam. The itemPath will hold the path of the screen that will show when a book is selected and idParam is a parameter that is passed in the URL of a specific book. We will also create two more optional string variables, a location and itemId. These variables will hold the location that we get from the route and the itemId of the book that will be selected. Now, let us initialize the last two variables that we have created in our applink constructor. In the first segment, we will understand how we are going to convert a URL string to an applink object. And in the next segment, we will see how we will convert an applink object to a URL string object. What is applink? Applink is an object that helps us to store the route information. It helps our URL string to route an object and vice versa. Here, applink will convert the URL that user adds in the web browser and parse the URL. Let us create a new static function below, where We have declared the variables named from location and having a return type of applink. This function will take the location as a parameter. Inside this function, we will be writing all the logic to convert the string location to our applink object. The parameter location that we pass inside this function gets the value from the router which fetches the location of the screen from the URL. The location is in URL format and we need to decode this URL. Many of times, the URL consists of question marks or person symbols which we do not need and we have to decode this URL. Now, the decoded URL that we get, we need to parse it into a Uri so we can pass a query parameter in key value pairs object. Now we create a variable named Param where we extract the query parameter from the Uri. And we need the itemId from the Uri to get the selected book object. This is how we get our itemId. As I have said before, our main motto of this function is to convert the URL string object into an applink object. For that, let us pass the location and itemId in our applink constructor and construct an applink object which we are going to return. And now, we're going to return this link. So, this is the entire fromLocation function that we have created. Now let us go to the second segment. After converting the URL string to applink, our next goal is to convert the applink to URL string so that when we change the screen, the applink object is converted to URL which can be displayed in the web browser's address bar. Create a string function named as toLocation below the fromLocation function. We have the location variable present in the applink and we're going to run a switch case to figure out which string constant variable of the path that we have created at the top should be returned depending on the current location. So, if the location is loginPath, we want to return the loginPath as a string URL. Just like this, we will write the used case for all the screens except for the read book screen. So, now we will check if our URL contains an itemPath. In our switch case, we create a new variable to store the string value of the itemPath. The question mark is the question mark we have before the query parameter. Now, we have to upend the parameter key and its value to our string. For that, we are going to create a new string function inside our current function, which will return a string value of key and value. This function takes two parameter. One is a key and one is value. So, let us create the function on top. We can also use a lambda function. So, now, let us append the param and value in a key value pair to our itemPath using the above made function. Now, encode this Uri. Before we return it, let us do same with our readPookPath. Now, let us write a default statement. Before we can send this link to the browser, we have to make sure that we have encoded it. So, we call the Uri encodeFull and pass the loc variable. So, this is the applink class which parses the navigation configuration to and from a URL string.