Flutter Quick Tip: Using the "mounted" property | Flutter Developers must Know

[Music] hey hello friends and welcome to another quick tip video on retro portal studio and today we're going to take a look at a fix for the error called set state calls after dispose well this is one of those errors that every flutter developer will probably see at least once so let's have a look at it what causes this and how you can solve it okay so right now i'm in a simple photo app in which i have this view users button in the center of the screen and when i click on this we move to the second screen which in a couple of seconds loads the list of users so i'll go back from the screen and once again i'll click on this view users and now if i go back before the list of the users is loaded i can go to this run window and you can see that we have an error here called set state called after dispose so let's take a look at why we're getting this error for this i'll go to the second screen that is the users screen and in this you can see that i have this fake api call that waits for four seconds and after four seconds it gives us the list of users which we're displaying in this list view and for loading the list we're using this load data function in the init state and in the load data function we're setting the state to loading and once the data is loaded we're using the set state function to set the loading to false now what happens is is when we move to the second screen and before the data is loaded we go back this set state function is still called after four seconds even when the widget is actually disposed and that's why we get the error that the set state is called after dispose so how do you solve this for this we need to check if the widget is still on the screen and is not disposed well for this what we can simply do is we can use a simple property called mounted so we can use an if check and we can check if mounted is true and if the widget is mounted only in that case we can use the set state function now i'll run the app once again and i'll open up the run window and now i'll also click on view users and go back before the users list is loaded and this time you can see that we don't get any errors in the run window it can be tedious to use this check every time you're using the set state function so instead what we can do is we can override this set state function and in this just before the super dot set state function we can use this if check and we can check if the widget is mounted and only in that case we'll call the function so let's remove the amount of check from here and now i'll run the app once again and open up the run window and now i'll click on the view users button and this time if i go back before the users list is loaded so this time also you can see that we don't get any errors in the console so this is a simple way in which you can prevent memory leaks in your flutter apps and avoid getting the error of set state used after dispose i hope you'll find this video useful and if you do please make sure to hit the like and subscribe button and also consider following me on twitter for future updates see you next time [Music] peace you

Channel: RetroPortal Studio

Views: 29,018

Keywords: flutter, flutter development, flutter setstate, setState called after dispose, flutter tutorial for beginners, flutter 2.8, flutter app development, mounted flutter, flutter mounted setState, flutter mounted property, flutter mobile app development, flutter tutorial, flutter quick tutorial, flutter tips and tricks, flutter pro tips, flutter course, mounted property in flutter, check if widget is mounted flutter, flutter setState called after dispose

Id: ZwDEHhD00c8

Length: 3min 4sec (184 seconds)

Published: Sat Dec 11 2021