How to Periodically Refresh (Polling) API Using Riverpod in Flutter

hello everyone welcome to wiget tricks in this video we are going to learn how we can do a periodic refresh of an API call using riveron So currently we are using future Builder to get a product list and then if it's successful we show the list as we show an error or progress PA now what if if we want to refresh this API call every 5 Second now we can do this very easily in Riverport let me show you how so first let's create a provider using River pod so I'm going to use River pod annotation to generate a provider for me so I'll create a function which returns a future name product list and then it will return get product list which is our API call then we are going to generate this code now once our provider is generated let's replace a future Builder with our provider now let's replace this future Builder using rpod async value so I'm going to use when on product product list and then on data fetch I will replace with the list view on error we are going to use a central text widget and on loading we are going to use a circular progress indicator now let's refresh our app to see if it works so as we can see it is working as a expected so in order to periodically refresh we'll come to our product list provider and here before the get product list we are going to add a timer with 5sec duration on the timer completion we are going to invalidate our product list provider itself now let's run the app now here as we can see it's refreshing in every 5 Second hence it's working but here we don't see any loading indicator on refresh so all we need to do is go here and set skip loading on refresh false and let's just run it now as we can see on every refresh we are going to see the loading indicator hence we know that now the API is refreshing on every 5 Second so what's happening behind the scene is that when we call the product list provider it adds a timer and then call the product list and once the timer is finished after 5 Second it invalidates self which basically call this function again and then it sets the timer of duration 5 Second again and then we call the product list list again and this keep happening again and again in the duration of 5 Seconds so here we don't have to worry about cleaning up the timer or setting up a periodic timer or creating a stream or anything like that all you need to do is just create this function and then it keep refreshing every 5 Seconds now we can do the same thing to all kind of Provider available in Riverport even for the custom Notifier we can do the same so here we are going to create our custom async not fire called custom provider list which on a build method we are going to call the get product now we are going to copy the same time of logic in the build itself now after the code generation we can get the ref here and then refresh it now we are going to use a custom provider list here and we are going to create here refresh custom now let's rerun this now here we can see our refresh custom is working as well it's refreshing in every 5 Second now one additional thing I'll show here is that if you have a repetitive logic in multiple providers you can extract that into an extension and then reuse it everywhere so here we are going to create an extension on ref with generate T so that we can use every type of provider and then we'll create a function called refresh in then pass a duration and then use the same logic for the timer we did in each provider inside this extension now to use this extension you have to just call ra. refresh in and then just pass the duration and all that logic of timer would be handled inside that extension you can do the same with custom provider list you all you need is the ref value now to test that let's run a print statement refresh and let's rerun our app now as we can see it's refreshing every 5 Second and it also logging the refresh here hence is working as expected so yeah that's how it's easy to do a periodic refresh and R Port you don't have to worry about creating a stream for periodic refresh or a timer in your widget you don't have to worry about disposing it or anything like that because if you use a river pod annotation where it will automatically Auto dispose this provider which not longer being used so you don't have to worry about disposing those things manually so yeah that's how you can do a periodic refresh in Riverport also if if you are a flutter developer who just started out on flutter and wanted to advance their skill check out my live classes on effective flutter dve.com thank you and if you like this video then please like share and subscribe thank you

Channel: Coding Life

Views: 576

Keywords:

Id: guwZwkV_tfU

Length: 6min 33sec (393 seconds)

Published: Sun Mar 17 2024