Understanding Null Safety in Flutter using real world example - Part 2 (coderzheaven.com)

hello welcome back to the second part of understanding null safety in flutter in the first part of the video we had learned how to implement null safety and make our application stable with data types like string integer etc so in this video we will focus more into complex objects for example in this demo we had the address object and the company object so we will try to implement null safety with these kind of complex objects to understand how null safety works in flutter please watch the first part of this tutorial because this is the continuation of that part let's focus on the company object here for the null safety we have made the company object no nullable without the question mark so that means it cannot accept null so we can just simply remove the checking and here also we can remove the question mark so that means it can proceed to convert it to json because it can never be no so that's our assumption so we think that a proper value will come from the server so if you go to the declaration part in the constructor it's showing some error so it's saying it cannot be null so we need to have a default value for the company so how do we set a default value so just like we did for the string and the integer we can just assign it in the constructor so let's see how we can do it so this dot company is equal to company object but it's showing an error that means we need to provide a constant value but it still shows an error because our company constructor is not a constant so let's make it a constant and the error goes away if you want you can set the values for each member inside the company with a default value so we can set the catchphrase and the name and everything else to an empty value so that you can access it anywhere and it will not be a null so let's extract it and create a variable default company is equal to and paste it there and let's copy it let me format it a little bit all right now let's copy the company default company and paste it in the constructor so there is an error that's because default company is not a constant variable so let's make it a constant and remove the constant from the right hand side okay so that's good so that's how we can provide a default value for an object you can use a similar method for the address object as well here we have made the address object nullable so that means it can accept in our value so here this approach will work even if the company key from the server is not present in the response so we are parsing the response and using the json company value and if the if the key itself is not present it's just taking the default company and what if the json company the value itself is a null from the service from the back end so in that case we need to do a null check just like we did for the name and id in the previous video so we can just use the check here is equal to null if it is equal to null we can set it to the default company that we had declared earlier so we are taking care of the null value from the server here so if you take the json name from the previous video you can you can see that we are checking the null using this shorthand operator double question mark so that will check for the null and it will set it to empty so let's see um what if we let me go to the user list row where we are setting the name so that's how we set the name in the ui so what if the name itself is a nullable variable so i'm making it a nullable variable so that means the ui will complain because it cannot accept a null and we are setting it to an empty value and here also it will complain because is not empty will be called on a null value so we are unwrapping it assuming that it will not be null so we shouldn't do it even if we think if it is null we need to add a null check as well here so which makes our ui logic much more complex and it doesn't look good we shouldn't be doing this we have to avoid all kind of null checks in the ui so so that the code is much cleaner to look at and maintain so let's go back to our parsing logic and let me undo all these things let's go back to our model file and undo the name so the error is gone now so let me show one more thing here i'm wrapping the container with an inkwell and adding the tab so we had made the ontap function nullable so that means we can send null to this function this function variable so it's complaining that it cannot call a function which can be null so we'll just unwrap it for now and what if it is null and the user is tapping on the row let's try it by sending a null value to the on tab so here it's nullable and we are unwrapping in our value and calling the function refresh the ui and tap on the list so it's same we are trying to do a null check operator on a null value so let's fix this so here we can simply check if the variable is a null so we can just add a if condition if one tab is not null just call the function by unwrapping it so that's going to prevent the crash we still need to unwrap it okay refresh the ui and let's see if it is working tap on the list so there is no error so that means the on tab is being it's not being called so if we put a breakpoint there it's null so it's not going to call that function let's go back to the place where we are calling this on tap method and pass in a function a proper function and just print it out on tab all right so when we tap on the list row so it will print on tab next let's try to send some parameter back when we tap on the this row we'll try to send the user object itself so accept the parameter so i want to show that even the parameter can be nullable so here the user can be null and let's try to print out the values when we tap on a list row user.name so you can see that it's showing some error that's because the user can be null right so flutter is saying that you're trying to call name on a variable that can be null so we can unwrap it in two ways either using the exclamation mark or the question mark so i'm using question mark here so if it is null it's not going to crash your application it will just gracefully stop there they're using the exclamation mark it will try to unwrap even if it is null and it may crash your application so here we are getting the proper username on which we are tapping now let's try to send the null value itself what if the parameter itself is null and if we tap it will just print now because we are using the question mark let's try to use the exclamation mark and tap on the list row so it's going to crash your application so you can see the crash log it's trying to say the same error and i'll check operator on another value so we should be very careful when we use the exclamation operator and again if you want to really use the exclamation operator you can just wrap the user with a the statement with a null check so i'm just replacing the exclamation with a question mark and you can use like this it is not null and put it inside now flutter is going to say that we don't need the cushion mark because we already have the null chuck so refresh the ui and tap on it so since it is null it's not going to print anything so it will not go inside so let's change it back to the user and tap on it you can see that it's trending the values because it it's not null now now what if uh let's set the let's try to print the user.email tab okay it's printing well now i'll remove the question mark from the parameter now plotter is going to say that we don't need the if condition because it can now be null alright and let's go to the user list row and uh we want you can have a null check here but that's unnecessary for this widget so we don't need this and also here it's saying that user can now be now so we don't need this refresh all right let me align the ui a little bit all right after this let's try to show the error that's coming from the service and for that i'm gonna declare a variable string error and it will be an error because we haven't initialized it yet so to fix it we can just add a late keyword in front of it so that way we are promising the compiler that we will be initializing it before we are accessing it so what if we are trying to access it without initializing save it so it's going to say late initialization error because we have initialized it so let's initialize it in the init state i am initializing it to empty refresh the ui now there is no error because it has some value so for now let me remove the late keyword and directly initialize it here itself and remove the statement in the unit state and we are gonna display the error in the ui whatever is coming from the service so we may need to break the service to display the error in the textview here now let's go to the function that actually calls this service to get the data that's get services and in the failure block we are gonna assign the error variable to result dot that would be error response as string because our errors were assigned a string let's go to the function so here we had assigned error response as a string it can't be anything because it's an object so as i need to stream and call set state to refresh the ui the next thing is we need to make some error in the service so that it should it will fail so okay so that's gonna fail it says invalid response so that's error that we are getting and it is displayed in the text here so let's wrap it inside a visibility widget and we are going to say if the error is empty then we are gonna hide it refresh now it's error so it is visible and let's go to user services and undo the error reload the ui now there is no error so it is invisible and it displays the data so the next thing we are going to do is we will create a new screen that will display the user details when the user tabs on the list row so let's create a new status widget that is user underscore details dot dot user details screen and import the material package so this widget requires a user object so user i'm gonna not make it nullable because we need it in this screen so i'm gonna make it required so required this story user let's create a ui cisco food the body container and it's going to have a child which is a column and children let's display the name let's move the name to the app bar so our bar with a title let's copy that and paste it in the up bar so that's the title and in the body we will display the email this is an error because email is nullable so the textview cannot accept a null value so it's complaining so we can fix it by using the exclamation mark at the end by unwrapping it or you can use the double question mark and which is a shorthand for nutshell and if it is not set it md all right now let's open the user details screen when the user taps on the list row so navigator dot push pass into context and a material page route and the builder will have the context so return the user detail screen and pass in the user so that's it for navigation refresh the ui and tap on the list row you can see the email and the name there let me give you the padding the padding of 20 all right looks good okay now let's go to the home screen and when the user taps on the list row let's try to make the email none so user dot email is equal to null it's an error because the email is a final string so for now i'm just removing the final keyword so that will remove the error for now in the home screen and when we tap on the list row let's see what happens so there is an error because we are trying to unwrap a non-value and user.email is null so if it is now we are trying to set it empty now so it is empty let's give it some value let's say no email so it's going to display no email so that's one way we have already learned it so i just showed it once more so i'm undoing it and remove the email from here let me try to refresh the ui so that will clear off this error okay okay good so the next thing is let's go to the user details and we'll try to display the user address so we made the address as nullable so user dot address dot let's say city so it's it will be an error because the text we cannot accept a null value so let's try to unwrap each value so you know that city is nullable and also address is nullable so unwrap the city all right but still there is an error because address can be null right so we can put a question mark there but still it's going to return it won't crash it but it's going to return an analog value which is not acceptable by the text so we can just use the exclamation mark to unwrap it for now so that will clear our error and it will display the data in the ui because we already have the data it's not actually now so later we'll try to make it null and see what happens and how and see how we can fix it so so address you know that it's not local city is also nullable now let's try to do the same thing with the the company object which was actually non-nullable but the name inside the company object is actually nullable so it can be now so the text cannot accept a null and it's throwing the error so we made it we added an exclamation to unwrap it so let's fix it the proper way we'll give it a default value and make it non-nullable and in the service where we are parsing the data if it is null we will try to set it to empty instead of null so even if the service returns a null we want to turn on we'll just set it to empty so we can just remove the exclamation mark because it was showing a warning because the name is not nullable now and we don't need any kind of operators there so the next thing is um i'll show something that you commonly see in some of the applications which actually doesn't properly handle null values and it might result in an improper ui so i just appended a company string to the company name and let me go to the string name i'll make it nullable and let's go to the i'm gonna remove the final for now just to assign it to a different value and let me go to the go to the address let's go to the address city also remove the final from there because i want to assign it to null and show you something so let me assign it so user dot address dot city is equal to null let's unwrap the address okay and refresh the ui and when we tap on the list because we are trying to unwrap a l value it's resulting in error so let me append it to a string city colon and displace the city refresh the ui and tap on the list and we will we're trying still trying to unwrap the city which is null that's why this error so we'll remove the exclamation mark from the city and don't try to unwrap it and if i resume you can see that city is actually printing in now string so this you might see in some of the other applications which is not handling the null properly so you must be careful in handling this give it a proper value or check for nulls if it is a null value don't try to display it or whatever the logic may be so this is one one thing i want to show you and one more final tip so let me declare a class i'm gonna say class test and declare in x is equal to 0 and another variable in y is equal to i'm going to say x plus 1 so this is going to result in error and if i want to fix this i can simply make the integer y in late so it will initialize it later when x is initialized and what if i want to give x a default value so let me write a function integer get default value and that's going to return let me say hundred sorry i need to make it a function okay and if i use the default value in x it's going to result in the error because it is not a late initializer so you can easily fix it like this so this is an extra tip if you want to use it somewhere in the ui or anywhere so that's all about non-safety and flutter so um if you want to watch the first part of the tutorial i'll be providing the link to it in the description the link to the source code also will be provided in the description so please don't forget to check it out you can switch to the nursery branch and simply run it you don't need any extra changes there so if you found this video useful please don't forget to like subscribe and share that will be a big support for me and if you have any any kind of doubts you can just comment it below the you know this video i can i will try to reply as soon as possible yeah so thanks for watching and see you in the next video until then bye

Channel: Mobile Programmer

Views: 1,088

Keywords: Flutter, Google, Android, iOS, Tutorials, Code, Study code, Cross Platform, Dart, null safety, null check flutter, null safety errors

Id: K5EqIYkEEPs

Length: 25min 49sec (1549 seconds)

Published: Sun Jan 09 2022