Flutter Pull to Refresh | RefreshIndicator | Refresh Data on Pull Down

everyone assalamualaikum well in this  tutorial i'll show you how to use   pull to refresh and flutter built-in  new widget which is called a refresh   indicator okay let's check the case that  where we want to use it well this is our   app that we're building and in this app  we have this information this information   actually they're all coming from server all of  them including this details and things like that   and we also submit it to the server anyway  so we also have various data all right so   a lot of this data are coming from server but now  what i want when the server data has been updated   and user does a pull like this we want to see a  little icon there and it shows that more data or   updated data is being loaded things like that so  that's what we want to do okay right now of course   we don't have any of these things okay well now  see one thing like i have a few files over here   now this is the file which is called home page  body and this dart file or that class over here   is showing this information and the body section  okay from the name we understand so you don't have   to have this code over here it just i'm trying  to explain the logic and how you can solve this   problem or make your app more smooth so now  how to do that now first take a look over here   here i have this main function and from main  function i'm calling get splash route well what   this route does go ahead and calls this this class  over here splash screen dart this one and over   here i have this init state and in the init state  i load resources well now this resources actually   they make network request all right and get the  data from the server and put them in a list so   now these are loading the data and once they load  i can see them over here now i want to do the same   thing which means i want to load the data once  again the same data if if necessary once the user   pull it up and down and how to do that now we told  you that this is the place this is the page where   it shows the data and responsible for drawing the  screen so over here this is the correct place to   uh refresh the data once the user pull it up and  down okay like that so now in flatter we have a   built-in widget which is called refresh indicator  we can use that one so on i'm on mac so what i'll   do all the option enter and i'll wrap it around  the widget and i'll call it refresh i'll call the   refresh indicator uh this widget now of course  there's an error because it takes a required   function like as you can see future function on  fresh and it is required so it means that we need   to go ahead and call this anonymous function and  pass a function body to it now here we need to   pass the function body so in our case what we want  to do we want to put the same code over here the   what the one we have to this file okay so what  i'll do i'll just simply go ahead and copy this   one and first i'll put it here and then i'll copy  the actual function or the method and i'll put it   at the top somewhere here okay all right so now of  course there's the other error because as i said   it returns a future if you take a look at this  on future so we need to use a weight and a sync   keyword otherwise we'll still have error okay now  yeah now the arrow should be gone okay now what we   could do let's see i i didn't really save the code  okay now one live example that i want to show you   so here let's say i change the data say i change  the title okay and i save it now here i see the   title has been changed but now remember i didn't  save the data yet over here so now what i could   do i could go ahead and do a pull to refresh but  you see my title didn't change and however i try   it my data doesn't get updated okay so that's  where refresh indicator comes in so here uh i   already did it right we did it so what we could  do first we will go ahead and restart our app and now over here of course we saw the  updated data but this is after refreshing   right i mean after reloading the whole app but  that's not actually what we wanted but first take   a look here i have this button as you can see at  the top you saw it it's trying to get the latest   data from the app from the backend from the server  okay all right now we can prove it that it's   working so what do you do would come over here  and over here i'll put back this one and i'll say   big onions okay all right and i'll save it and as  you see the date has been updated over here now   i'll come over here and i don't want to restart  the app this time all i would do just i'll do a   pull to refresh okay and i'll let it go you see  the data updated automatically as you can see   the title updated of course there are dots it's  not showing the other letters because it's too   long but you get the idea right so now one might  ask that of course you can do this request call   which is this one okay inside from the build  method of this function of this class so one   can think like okay why don't you call these  resources over here i'm sorry over here inside   the build method okay directly but now this way  to create too many way too many network requests   because every time you things change on the page  build a method would get cold and it would try to   call this one and refresh everything but that's  waste of resources but refresh indicator what   it does it only updates data when you do this  pull-up like this okay yes otherwise it doesn't   refresh the data okay it means it doesn't make  request it doesn't make network request and we   can prove that so now what we'll do we'll  go ahead and once again remove this okay okay and at the same time uh we'll also remove say  this one now i will save it and we'll see here the   title updated now come to our app now let's take  a tour on the app all right so this is still the   original name we had right now i go to this  page and i still see this one but i don't see   this updated information but as i said earlier if  you do pull to refresh now based on your pulling   flatter framework would make a network  request from here from this widget okay   let's go ahead and see that now let's do a pull  to refresh as you see the name is gone right   so we know we see i mean we the older name is  gone now we see the updated name and updated   information over here things like that so  hopefully you learned something thank you

Channel: dbestech

Views: 23,498

Keywords: flutter pull to refresh, flutter refresh page, flutter refresh indicator, flutter tutorial, flutter refresh page on pull down

Id: EqEe6v7eMW0

Length: 7min 38sec (458 seconds)

Published: Sun Dec 26 2021