Flutter State Management - Using Provider to read JSON data

welcome back in this video we will look at the provider in order to provide us with data online in order for you to follow what i'm going to do in this video i am assuming that you have worked through these previous videos of mine so if if you did not i've got three videos from my dart playlist so you can see in the in my dart playlist is i explain what is a future the second video there i explain how to read data online and in the third video there i show you how to read json data in dot so i'm going to build on those three videos so if you have not watched them or let's say you already know how to read data from the internet and in specific also json data then it's fine you don't need to go through them again and in the previous video in this playlist that we're currently busy with i talked about the provider package so you'll need to know the basics of the provider package also to understand this video so make sure that you've gone through all of these videos in order to make sure that you will follow along nicely in this example nonetheless i will go through this one slowly so even though you have not gone through these i'm sure you will be able to pick up fast right so what i've done in this video called i think it's using futures to read data online or online data this video there in that video i show you how to create your own dropbox environment or to install dropbox and then use dropbox to provide some json files for you so i'm in my dropbox folder i'm under a folder called json and i've created stories so there's a stories.json file and if i open up the stories.json file you will see that is just a few stories that i took from www.cbsnews.com and this is the json file basically so you will see that the json file opens and closes with curly bracket and then it's got key value base so i've got a key called stories and then the value is a list of maps again and every map here inside of this list of stories will basically just be a new story and every single one of these stories has got a key and a value pay and it's a string and a string so for example we have the heading we've got the story we've got the date and we've got an image link so what i want to do in this example for today is we want to read from this file from anyway now because this file is in dropbox it is in fact online and i can get its online location by just saying copy the dropbox link for me so we will use that link now inside of this video and you can then also type it on your site if you want to try and read from the exact same file or you can just go and create your own file and see if you can also do this and by having your own dropbox folder then you can actually provide your own json files for your own applications that just read some static data well it's static unless you go and change it i mean i've got access to this file and i can go and change something on this file and then when somebody refreshes my application he will see the new data so yes it is static data that we read which means we cannot update the data from the app but i can update it from my own pc by just going into the file and saving it again okay so what we will do is we will read from these stories and we're going to display or create an app we will show the picture right at the top so that will become the picture for the new story we will have the heading and then underneath that we will have the story we will also use some refresh buttons and also the drag down to refresh just to show you how that part works as well okay so enough talking now let's get into the application so i'm going to keep open this stories file so we can actually refer back to it so i'm just going to move it down the bottom and get rid of this page okay so make sure that you've gone through these videos please in order to have a basic background of what we will do now okay so i created a new folder called provider json video or new project folder and inside of that project folder i have got my main. my main dot dot is just a material app there that goes to storage page and storage pays you can see it's under pages stories so i've got under my lib folder a folder called pages and there's my first page it's called stories. it's a stateless widget it's got a scaffold with an app bar and it says top stories cbs news and this is what you see now there's two packages that we will be using so if you go to your pubspec.yaml you can add these two packages so we will be using the provider package so it's provider 500 and then http 013 3. so make sure you include that into your pubspec.yaml file and you save so it gets included in your project so next let's go and create another folder so in your lib folder i'm going to create a new folder and i'm going to call this one models now we will only have one model here so i'm going to create this file and call it news underscore data dot dot and this is the model that the provider package should provide for us in our application so i'm going to use this as a normal class called news data and as you've seen in my video in order to use this class to be provided by provider we need to use with change notifier so i'm going to get this one from foundation. and then let's just create our opening and closing brackets so this is a mixin that we that we are using here okay so if you remember again this change notifier will basically just notify us of any changes that was made inside of this class okay so i'm going to start with this class now and look at what we need to get provided so if you remember then if we look at this file again you will remember that any json file basically is a map or similar to a map in dart or in flutter and this map will have normally keys and you can see all of the keys i've got a key called source there also but all of the keys are strings but the values can be a list in this case there it's a map so it can be different okay so the first thing that i want to get provided here because we're going to read from a json file i want to get a map provided throughout my application so this map we're going to read back now but we will need this map to be the key of type string and the values that we get back from those keys can be then dynamic which means anything i'm going to use this as a private map and i'm going to initially set it to just an empty map then i'm going to also have a boolean error so if there's an error that takes place then we can set this boolean to true and we know that there was an error that took place and alongside that error we also need an error message so we can also set that error message to something for now i'm just going to initialize it with nothing right and these are basically the only values that we will need provided so we will read back the map if we've got the map then it's fine but if something went wrong then we will set error to true and we'll set our error message to something that happened there some error message if you follow those videos of mine you see that we use the future also to get back that data from using a link so i'm going to do something similar that i did in those videos i'm going to use a future but i'm not really going to return back any data i'm just going to set that maps data to it so i'm not going to return back any data so it's just going to be a future void it's going to be a getter method inside of this class and i'm going to call it fetch data now this fetch data will be an asynchronous function and let's open up that function okay so it's just a normal getter it's called fetch data and we are using an asynchronous function in order to return back or get back a future value although our future value will basically not be returned so all we're going to do inside of here is we're going to say final response equals we're going to wait for the result to come back and we're going to use the get function here so on this get function you can just use control dot and make sure that you import that http package okay so it's going to be get and what do we want to get we want to go to uri dot pass and then the data that we're going to pass in here will just be that link of ours okay so where do i get that link okay so if i go back to my json folder inside of dropbox you can see all's got the check mark next to it which means my data is live and i can directly read now from it so i'm gonna go to the stories and i'm going to right click and say copy dropbox link and that's the link that i want to start pasting now in yet and then i'm going to use instead of www i'm going to replace it with a dl so if you want to use the exact same file as i'm i'm using now you can just type this value also there for yourself and that will include that same file as the json file that you will then also read from okay so we created a getter called fetch data that will just fetch the data it won't actually return anything back for me it was just a future void but it's still the future so we will still be waiting for the result to come back why does it need to be a future because we need this function to be asynchronous okay so let's just go down after this we need to check this response now so there will be some sort of response and this is where we can get some errors so if the response status code is in fact a 200 like on a normal web page if the response is 200 then we know that everything went fine so the connection to this link was then fine and now we want to try and pass the data on that file so it could be that inside of this file as an example i left out let's say that comedy and by leaving out that comma it will actually throw me an exception so we need to catch those type of exceptions also just to make sure that our application is working as expected okay so i'm going to start with a try and a catch block here and i'm just going to catch some sort of exception there and we will get back to that now okay so in the try block what we want to try and do here is to get a value for this map now so we declared the map at the top it is currently an empty map but as soon as this connection is done and we've got a response code of 200 we know the connection was successful then we can start getting back this map so in order to get back the map i'm going to use json decode and i need to provide a source for this json d code and as you've seen in my previous videos we will use response dot body and that response dot body will then basically read all the data for me inside of this file and decode it as json data and we get it back as a map so now we know inside of this map we now have the data of this json file so you can see that it starts off with an opening and a closing brace so that's the map that we're getting back whatever is inside we will look at that now but for now we've got this entire map back by just calling jsondecoderesponse.body okay so if this line then worked because if this line doesn't work and there's something wrong for example i left out a comma then there's an exception that will occur and what we can do then in the exception is we can say error should now be true that's one thing that should happen and we should also get the error message so that error message will then be set to and this exception the e there will contain that message so instead of providing my own error there i will say e dot get message or not e dot to string and that will contain that error message for me so setting the error to true setting error message to what type of error gets returned by that e that exception that occurred and then inside of this map so if this line did not go through there something wrong there then it's going to catch this exception it's going to set error to true and the error message to the error message but if that is all fine then we go to the next line and here we can actually set that error again to false just to make sure it is still false remember we have it as false at the top but maybe something else could have happened so i'm just making sure that the error is in fact false okay then after the try and the catch block i will go and call notify listeners so wherever in my app i'm listening for this map the error or the error message it will be updated because i'm changing map there i'm changing area and in the catch i'm changing error an error message so maybe something that we should also do inside of this exception is maybe to set this map again as just an empty map just to make sure that we did not get some null or what type of data back there so i'm just setting it back to an empty map and then all the listeners will be notified okay so this is all still inside of the first if so if that if statement is then not true which means that there's an actual error we could not get to that connection so this could be where i've left out something on this link and we actually cannot make that connection to the link or there's no internet connection or whatever so again i'm gonna set that error to true basically the same as that we did yes i'm just going to copy this part just to make sure that we get that same type of data back and now we don't have e dot get string we don't know really what the exception was so we can we can try and go and test some different status codes and so forth i'm not going to go into that now so i will just show a message like it could be your internet connection or let's say error at the front first error it could be your internet connection so you can maybe go and check his internet connection and then try again or refreshing okay so we've got errors set to true we've got error message set to a specific message and then we've got this map set to an empty map again just to make sure that we still have an empty map and then the same thing again we will need to start notifying all the listeners so probably we are repeating too much lines of code here so i'm going to take this one out notify the listeners cut it out there and we can just do it once at the end so when this whole coding stops either the if or the else that happened we can then notify the listeners of these changes in the data okay and that is basically it for this function called fetch data so what is it going to do it's going to fetch the data try and fetch this data if the status code is 200 everything was fine and then we try and get the map but if something goes wrong with getting the map it will catch we will set the error and the error message and the map do basically nothing again if it worked we will have the map and we set error to false if the status code is not 200 which means the connection did not go through as successfully then we will have this else part where we also set error to true error message to something and then we set the map to its initial value again and then we notify listeners okay and then we can also provide maybe something like avoid initial values so i'm going to use this function also in order to just set everything back to the initial values so i'm going to set back the map to an empty map just like we did at the top there we will set error to false again and we'll set error message to nothing again and then we're going to call notify listeners okay so you'll see where we're going to use that function but it's just calling a function to set those initial values back so this is when we will be refreshing it's one way of refreshing just to put those values back to the initial values so that we show nothing on the screen and then when the data gets back again we will have new values right then the last part for this class called news data is we need getters for these three values okay so let's just create those getters right at the bottom there so we will have a map of type string and it will be dynamic for the key or the key will be string and the values will be dynamic so we're going to use the getter and instead of just using underscore map i'm referring to a getter called map and that map will just return back the underscore map for me okay so that's just the getter for this first value there so maybe let's just put it underneath those so i'm going to cut this here and it's easier maybe to understand so there's the getter for the map so we want to get back that one we will just use that news data object and we're going to call dot map and we will get back the map okay and then also the getter for that error so we'll have a boolean get error and we will just be sending back that error well the private one right and then we will also have a string getter for the error message and this one will be returning back that error message okay so what we did now was just to create getter values for these three so if we want to get them back we will just be referring to map to error or to error message so these remain private inside of this class inside of its own file we will not have access directly to underscore map underscore error or error message so we will need to use the getters in order to get back those values and just note that we're not setting anything outside of this class so we don't need setters this fetch data will set the data for me so it's going to set the error and it's going to set the map and the error message depending on what happened okay so this is my news data clause and this is the data that we want to get provided by the provider package so when we start using provider we will refer back to this news data which will contain this map and this is the main data that we are interested in and all the rest is just for a bit of error handling and we get the getters to get back all of those fetch data we'll go to this link check the response if it's 200 we get back the data we actually want and all the rest is just some error handling then we've also got this initial values and you'll see where we're going to use that it's just to set everything back to its initial values when we refresh okay so now let's go and design our stories so in the main. you will see my application starts it runs my app my app is a material app now i've done roots already but because we're going to use only one page it doesn't make sense to actually use that whole roots file because i mean the only thing i'm going to use is one page so then it's not needed for us to use any routes okay so we're gonna just go to the home page or the stories page and it's inside of this stories dot dot so if i go to stories dot dot under pages there i've got it and this is my storage page it's the one that we see here so it's the only page that we're going to use and you can see that it starts with the scaffold and app bar and the text widget then as part of the apple okay now after this we can start with the body now as the top part of my body i'm gonna start with something we call a refresh indicator okay and all the only thing that this refresh indicator will do is that when we drag down from the top it will have that little refresh button okay so the body will start with a refresh indicator so with we can actually refresh the whole page and the refresh indicator must have a function called on refresh and we're going to get back to this one later on now in order to just get rid of this error that we currently have here i'm going to just use an async there so this on refresh will be asynchronous because what we're going to do in this on refresh is actually go back to our news data and we're going to call this fetch data so we'll do that now so this refresh indicator needs an on refresh and it will also have a child and then if you see you see if you specify the child and everything else all the errors disappear okay so i'm going to use a center widget right from the start so basically what we want to start now doing is inside of the center widget we want to have data that will now be updated or provided by our provider so i'm going to go back to the main dot dot and over this storage page i'm going to add a widget and the widget will be a change notifier provider now from my previous videos you know yes you can use the child but it's better to actually use the builder so i'm going to use the builder there i'm going to use this one and for the builder i will just be basically returning the storage page okay and then for the change notifier also we will need a create b and we're going to use the fat arrow there for the create and the create will basically just point to our news data file the one that we have with the change notifier and this is the one we want to get provided throughout our application okay so it's going to be called news data so that's the one that i want to use here so i'm going to say news data and then all errors will disappear okay so we are basically having a change notifier provider right at the top which means that everything underneath this now and that includes everything in the storage page will then be provided when something changes or will be notified when something changes in news data so here we create an instance of this class which means currently our map is at zero or nothing and then we can go and add to it now let's go back to stories now right at the top of this bolt function we want to start now to start running this fetch data so this fetch data here will be called by just going to the object called news data and calling fetch data on it so remember how we do that so inside of here we can refer to that build context on the context we're going to call either watch or read but because we are now outside of the widget tree where we're currently at in this return statement we are in the widget tree so we are out of sight of the widget tree so we're going to use the read function of the provider which means it will not listen for any values but we can just do something and the data that we want to read from is now this news data control dot on it yes let's get that news data and control on dot on it again okay that doesn't want to give us the provider so let's just start typing provider here and just import it so that's at the top and then we can remove that line again and now everything's fine now on that we're going to put the dot and you can see i've got access to error error data i've got access to the map that's currently just an empty map and so forth but the one that we are interested in is called fetch data and notice that i'm not using a weight or anything here because i you can't basically have an async function for your build so that's not allowed so this thing will just run in the background and as soon as it's done and updated our data all of these notifiers or all of these listeners for these will be notified as soon as we're done so this build method will be done before this part is actually done and as soon as this part finishes then it will call notify listeners and everywhere we listen now which we will set up now we will start getting that data right so let's go into this center now for the center widget i'm going to have a child which will now be something that will be listening for data from that news data so i'm going to use consumer the type of this consumer will be the same type that we are referring there at the top and that will be news data again now for a consumer we also need that build function so we're going to use the builder and then we're going to use this one with the opening and closing brackets so we can do a bit more inside of here right so if you look at your consumer now this value that we have there is now in fact news data which means it's this object that was created and now we have got access to this map we've got access to error we've got access to the error message through these getters okay so let's see how we can use them now okay so now inside of this boulder we will return back something and you can see that's why it's giving us this error now so we need to return back a widget that we want to show you but it's not as easy as just showing the widget so what we want to do is to first go and check a few things this value is now an instance of news data and you can see if you put a dot there you've got access to error the error message and you've got access to the map so if the map dot length is equal to zero then we know that this part is not done yet okay because the map is still at zero just an empty map so if the length is zero and also at the same time value dot error is in fact false so i'm gonna say not true so if the map dot length is equal to zero and the value dot error is false okay so we're basically saying if the map's length is zero and we have error still at a false value then question mark so this is your ternary operator here so if this part is true if that whole part is true then we want to start showing our progress bar in the middle of the screen okay so if the map length is still zero and we do not have an error so which means not an error then we can start showing the progress bar so i'm going to use a circular progress indicator otherwise i want to check again for something else so let me just place this to a new line so we can see a bit better okay let's put that one also there okay so we're asking now if the map is empty and there's no error we show the circular progress indicator okay the next part i'm going to test again if the value is in fact an error now so if that part is not true so after the question mark if this part is true then we show a circular progress indicator if that's not true then we first check maybe there was some error so if there's an error i'm going to show a text widget and that text widget should have let's say something like oops something went wrong and we can show that error message so we can go to value dot and you can see there's error and error message and maybe for in order to get this text in the middle of the screen i'm going to add a line property there so it's the text line okay so the text align will be text align dot center okay right so as soon as we save now everything will become a bit clearer okay so we're saying there at the front we're saying if the map's length is zero so it's an empty map and there's no error then we show a circular progress indicator if that part is false then we check if there's an error question mark again so if there's an error then show this text field or text widget which says oops something went wrong and we show the error message then you can see it takes the line and so forth that's still part of the text but if value.error is false which means there's no error then we know so if we know that this one is false then we know the maps length is is not zero or there's an error okay so if we test then if there's an error and there's also no error then the last part here means that we actually got the data back and we need to start showing the data on the screen so this last one then means we actually got the data back and we want to start showing something on the screen right so for this part we're going to use a list view dot builder and for this builder i'm going to use an item builder there so i'm going to say item builder let's use the brackets and for now i'm just going to return back a normal text widget so we will do something now inside of this and let's just say something like hello at the end of our list view builder just make sure that you've got your semicolon as well so if i save now it will nicely format it for me and maybe we can see a bit more okay so you see it it updated and it's giving me an unending list of hellos on the screen but we'll get to that now right so let's quickly recap this because this is a mouthful okay so we've got a consumer right at the top that will be looking at this news data it needs to be providing and we will be returning back uh this whole thing so let's just go through this we will either be returning back a circular progress indicator or a text widget that will contain an error or the actual data okay so how do we get to them so the first part we're testing if the map is still at zero the length of the map is zero so there's no data yet for it which means this part is not done yet that fetch data and there's no error so that's why i'm saying no not value.error no error then we're going to show the circular progress indicator but if this part is false remember both needs to be true for this whole thing to be true so if the length is not equal to 0 or there's an error then this thing will be false then we test again so then we're testing well if there's then an error because it's either the length or it's the error okay so we're testing first for the error so if it's the error then we will show this text widget the text widget will say oops something went wrong and it will show that error message okay but if that is also false if there's no error and this thing is false then it means that the length must not be zero which means we've got some data and then we will show the listview.builder and in our case we're just showing the hello there so for the listview.builder we will also need to have that itemcount and let's set the item count now as seven but we will change that now so if we save this now we should only see seven hellos there okay so at this stage because we see those seven hellos we know that we actually got data in that map so for example if we go to this file now and let's say i'm taking out that heading there and or just that comma and i save this now going back here and running this you'll see right from the start it should now start off with the circular progress bar until the data is got back and then there's the error also oops something went wrong there's a format exception okay so now we know where the error is but we can go and fix it i will save it again and when i go back and we rerun this again then we will see that everything should be fine so we will start off with a circular progress indicator first and there we see the hellos so there was no error so we will be seeing the spot so right at the start when we're still waiting for this this part to finish we will just see the circular in the circular progress indicator when fetch data is done remember what happens when fetch data is done it will call this notify listeners and then we've got this map of data and then it means that map length will change so it will come back to this return statement the consumer will refresh this part and we will start seeing the listview.boulder okay so now what do we want to do in this listview.builder well firstly let's go and have a look at this file so if you look at this file you will see that we've got a key called stories and that stories is returning back a list and there's position 0 position 1 and position 2. so by going to my big map which is the json file and calling the key stories i will get back a list okay so let's go and have a look at that so if i am inside of my boulder year let's just go there so let's get the item count it should actually be three because we've got three stories there so i'm going to refer to this value that's part of the consumer value is that news data so now we've got that map so i'm going to say value dot map and that will now contain something and that's now a whole map but the only thing we need is in fact the key called stories so by calling value.map stories we get back a list so what do we get back we get a list of this is the list beginning back so it's a list of three maps okay so i can actually just go and call dot link now it doesn't really know the type of this and that's why the link doesn't get picked up automatically but you can just type it so the item count will actually be 3d so if we run this or save now again we should only see three hellos because that story's length is only three right great so far so now inside of this return statement this should never be a very long thing so what i would rather do is to go and create another stateless widget and let's call this one a news card so we're going to use a simple card so that's in the container here instead of a container we will start off with a card and that card will display all our data for us so instead of having that text widget there now we will be returning this news card and we will define now how this one looks but basically what we want to do for this newscard is we want to basically send through only one of these depending on the index where we currently are in the boulder so if you look at your builder there's an item count and there's an index so it knows exactly how many times to run it needs to run three times and the index will start at zero one and two so we need that index in order to send through the data to this news card so the only data we want to actually send is a simple map with a key and a value pair where the key is a string and the value is a string as well but now because it comes from a json file i would rather declare it as a map that has a string as the key and dynamic as a value okay so let's declare it in here as a final map that is the map that we're going to pass through to new scott and that map will be of type we know it's going to be string string let's try it string string but we'll probably get a problem there okay so the key and the value will both be string and then we can give it a name like let's just say mapday and because we need to get it back in the constructor i'm going to have it as required map or this dot map okay everything is happy so far okay so now inside of this news card we need to pass through that map now okay so that news card or this item builder we at this stage we have the whole map there so we only want to send through what so if we go back again we've got this whole map okay so what we want to send through is only that stories which will return back a list but the list at a specific index value okay so if we refer to this then we will go to that value on that value i'm going to call map so that's the whole map it's the whole json file the only part that i want is the spot sorry before i continue it's a named argument there so let's just have map there okay so we're going to go to value which is this uh just go there which is this news data okay so value is news data dot map returns back what returns back the whole map from there up until there when i refer to stories it will return back the list okay so now i've got the list but i only want to get that list at a specific index so the index there in the item builder will start at zero then one and then two so every time it passes in there it will pass to me either this one or this one so that one is position zero this one is position one and that one is position two okay so we're passing through a map but that map comes from value.map which is the total json file we go into stories which only gives me a list of maps and we go to a specific index which will be zero one or two to get back a map that is of type string stream okay so now we've got the map this site in our news card and actually you can take this news card now and place it in its own file that will be totally fine because we're just passing through that data that we already got in here and we're passing it along okay so now inside of the score let's set the elevation for this card as a 10 maybe let's have a child there and we will start off with a column now this column will now contain three things it will basically contain the picture and then the heading and the story now let's set the cross axis alignment for this as cross axis alignment dot start so we have everything on the left hand side of the screen and let's add some children here so maybe for this column let's add some padding also so i'm going to add some padding for this and let's set the padding as eight that will be fine and for the card as well let's add some padding for the card and let's leave it at eight wheel check it now okay so for the children then inside of this column we will start with an image dot network so you would see that inside of this file i refer to image here and that image is a network image it's got their own link okay so i'm just going to go into this list now that was or the map that was passed through to that new card i will just refer to the key called image and it will return back this value for me okay so the source then there where's the source now okay so we need to go through this map that was passed in so i'm going to go and say map and from that map give me the key and that key we called image so give me a key back that is called image okay so this will let me just add this as a string it won't pick it up as a string so let's go in there make that a string use string interpolation there and this should be fine okay so let's save now okay and there you can see that dynamic comes through it will basically say string dynamic is not of subtype type map string string okay so that's why i said let's have this one as dynamic as well just to make sure that everything is actually fine okay and there you can see the images start popping up okay so there we have the three images actually showing okay now we just need the stories okay so after that image let's have a sized box and let's have a height of let's say 10. now let's have a text widget and one will be the heading and the other one will be the actual story so now in order to get the heading so we've got the image by saying map image so how will we do the rest let me just copy the spot because that's exactly what we're going to use in here right so now instead of using image there let's go and have a look at this to get the heading we're going to use heading to get the story we're going to use story okay so let's just use heading here let's save and there's all the headings quite nice let's just style the heading a bit because the heading should probably be bold so let's say style text style let's set the font weight to a font weight let's make it 800 and let's set the font size to a 20. let's save okay where we've got a bit bigger headings and now the only thing we'd still need to have is in fact another text widget that looks exactly the same just not the same styling and come on let's paste it there and let's have that same sized box maybe again between these two and maybe we can have that same size box at the end also okay so now we've got the heading there and here we want to have the actual story so just have a look at that file again we need to refer to the story there right so let's save now and see what we get okay so that one is basically too bold so let's remove the font weight or let's just use it as a w400 and this one let's go to 12 and save maybe 12 is too small okay and there we've got our stories so we've got bigger ship and it runs navy catches fire and six and sings under new unclear circumstances and there's the next story and the next story okay everything seems to work so we are actually reading data back from the internet from that json file into our application okay so now let's see if we can do the refreshes quickly so let's go to the refresh indicator you can see it already works if i drag down you can see it's there but it's not doing anything okay so inside of this refresh indicator in the async the only thing i want to actually do in here is to call the await keyword and let me do it without the away it's actually not needed but i'll show you why we actually want to have it there so we will say context dot read so again we're going to read we're not going to listen we're just going to run something and what we want to run in this case it will be that news data of ours that model class of hours and we want to call that fetch data again so as soon as we refresh we want to fetch the newest data again so in order for us to actually see if this works let's just change something so instead of saying the biggest ship let's say the smallest ship here okay i'm going to save that so if we refresh now look at the refresh if i leave it it's done it's gone uh it just disappeared but it did update the data but it seems as if nothing happened so if i add the await there then that refresh if i drag it down it will stay there until that pot is actually done and it's done refreshing okay so let's change it back to biggest save it again it's dragging down so you see now it's connecting the refresh disappears we should see biggest and there we go okay so that's how you can do your refresh indicator by using async and then use your await if you want to have it on the screen while it is refreshing otherwise it will just disappear and you won't see that refresh indicator okay so now we've got a circular progress indicator here that's already working so maybe we can add also refresh button at the top so if you don't like this one that is just the drag refresh you can also have one at the top so on the app bar let's add a few actions there well actually only one action and i'm going to use an icon button for that let's supply an icon for it and we will say icon icons dot there should be a refresh let's use the normal refresh there that's fine and let's go to the on pressed of this icon button and maybe let's just use that one okay and the only thing i need to do here again is exactly what we did there we need to fetch the data so let's do this here as well so i'm going to save now let's click on refresh and you can see now nothing happens okay but i want to show you you can actually go here let's change this biggest to smallest again okay so i'm going to click that seems as if nothing's happening but it updated to smallest okay so if you want to see something happening that is why i have created this initial values so setting the initial values back to an empty map where the length is zero and the error is false it means that in this spot let me just go back to stories in this part where we start checking now the length will be zero again and the value will not be an error which means we will see the circular progress bar so just before this one before we start fetching the data i will call that function that we created what is it on [Music] initial values okay so let's save this one which means that first set everything back to zeros and then get the new data okay so let me just quickly refresh this let's add a bigger stay again save it and let's click the refresh button okay so now the refresh is in the middle of the screen the circular indicator until we get back the new data and then everything's back to normal again okay so two types of refreshes that you can use this one that refreshes the whole page or just the drag down that refreshes while you look at the data store so this drag refresh is not removing the data on the screen but it's still showing that circular indicator this one is showing your whole screen as a circular indicator and then it refreshes okay so like i said what would have been best for this news card is if you go into your lib folder and you create maybe a new folder and you call this one widgets and then we call this widget newscard so i will right click say new widget there or new file and we're going to call this news underscore card dot dot and i can place this thing this news card that whole class i can place in its own file so let me just copy that one i'm going to cut it out here which will give us an error but don't worry go to newscard i will have just an import material dot at the top let's paste it there could have some problems here none okay it's safe no problems go back to stories now it cannot pick up that news card so you just use ctrl dot and you can use your new file you created and it will add new score save it again and we can actually rerun and everything should still work okay so i'm just re-running this and you can see there's it's refreshing now getting the newest data there i can see the data it's loading the pictures now and i can see all the pictures is loaded so there's all my stories now i can still refresh and refresh again okay so the whole app is working as expected now we've got under our lib folder models we will place all our different models our different pages and our different widgets and it's easy then if i want to change something on the layout of this i know it's done in news card so i can just go to news card and make some changes here i hope you've learned from this video see in the next one

Channel: Johan Jurrius

Views: 3,902

Keywords: Flutter, State, State Management, Provider, JSON

Id: CQt91j_MsUw

Length: 50min 27sec (3027 seconds)

Published: Sun Jun 06 2021