Flutter Navigator 2.0

Episode - 20 Create a Navigation State Object

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.

In our Router Directory let us create a new file called as app_link.dart and create an AppLink class inside that file. This file will help us in linking the URL and state of the app that we will have. Linking the URL and 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 the constant for each URL path. open the book_pages.dart screen and copy the pages String and paste theme here. Just add Static const keywork before all the variables.

Apart from these URL path constant.We will also need two variables called as itemPath and idParam. itemPath will hold the path of the screen that will show when a book is selected. and idParam is a parameter that is passed it the URL of a specific book.

We will also create Two more optional variables String location and itemId; These variables will hold the location that we will get from the route and itemId of the books that will be selected. Create an AppLink constructure and initailise the last two varibales that we have created. like this

AppLink is an object that helps us to store the route infromation. It helps to the URl Sting to route onbject and vice versa. Here AppLink will convert the URl that user add in the web address bar and parse the URL.

Create a new static function below where we have declare the variable, named static AppLink fromLocation(String? location){} inside this function we will be writing all the logic to convert the link.

The parameter location that we pass inside thi function gets the value from router which fetches the location of the screen from the url. The location is in URl format and we have to decode this URL. Many of the times the URl consists of a question mark or percent symbol which we do not need. To decode the URL write

location = Uri.decodeFull(location ?? ''); 

Now the decoded URl that we get we need to parse it into URI so that we can pass a query parameter Key - value paires object.

final uri = Uri.parse(location); 

Now we create a variable named param where we extract the queryParameter from the URI

final params = uri.queryParameters;

finally we need the itemId from the URL to get the selectedBook object

final itemId = params[AppLink.idParam]; 

As I have said before our main moto of this message is to convert the URL String object into AppLink object. For that let is pass the location and itemId in out AppLink constructure and construct an AppLink object which we are going to return.

final link AppLink(
	location: uri.path,
	itemId: itemId
	);

return link;

After converting the URL String to AppLink our next goal is conver the the AppLink to String URL so that when we change the screens the AppLink object is converted to URL which can be displayed in the Web Adress bar.

Create a String toLocation function below the fromLocation function. We have the location variable present in the applink and we are going to run a switch a case to figure our what we are going to return.

We are going to return the String constant variable of the paths that we have created at top, depending the current location. so if the location is loginPath we want to return the loginPath as a String URl.

case loginPath: 
	return loginPath;

Just like this we will write use case for all the screens except for details screen and read bookScreen. the return statement is quite different here.

We first check if the location is itemPath in our switch case, if the location is itemPath we create a new variable to store the string value of itemPath

case itemPath:
var loc = '$itemPath?';

Now we have to append the parameter key and its value to our string. for that we are going to create a new String functin inside our current function which will return a String value of key and value. This function takes two parameters which takes the key and value.

	String addKeyValuePair({required String key, String? value}){
		value == null ? '${key}=$value';
	}

This function converts the key and value as a string. We have to append this new keyValue String to the path so that we will come to know on which screen we are in our web browser. So call this function in the switch case where we have to append this key value string to the itemPath String. Before we sent this link to the browser we have encode it. So we will call uri.encodeFull and pass the loc variable. return our ecodedFull(l0c);

	loc += addKeyValuePair(key: idParam, value: itemId);
	return Uri.encodeFull(loc);

Same goes for our readMyBook Screen where we check the readBookPath can convert the appLink object to URL String.