Flutter Download Progress Indicator || Essential

no one likes this infinite looping indicator so when you have a large file to download it's a good idea to show download progress indicator and that's the agenda for this video we are going to implement this nice animation inside flutter application real quickly. Hello and welcome back my name is Afzal and you're watching channel CodeX. If you remember in last video I asked to provide feedback and I got a lot of positive comments on the video. so at the end of video I'm going to announce two viewer who won license copy for Eagle software. let's jump into today's tutorial here we are going to achieve download progress bar with percentage indicator so far I have created a centered body inside that we have a column now we'll start up a layout with floating action button let's proceed with the blank on pressed method and for label we'll use a text widget here I'll say download now let's see how it's looking on the UI fine this is going on top Noyes shoes let's provide I can quickly I'm going to say maybe download I can find this looks great now we have to bring this button down how we can do by providing main exercise minimum if you want to know more about this column and behavior of column you can check my last tutorial link in the description below so we got our button in the center now everything is going to happen inside this on pressed event downloading file updating progress everything so let's go to our pups by qiyamah and specify the necessary libraries we are going to use tayo or do whatever you call it and path provider any version is fine with us we don't need to be specific with that at least for this demo purpose now let's go back to our file our download page here we are going to initialize instance of Daioh class this diode will be used basically it's a networking library so this can be used for gate requires post requires put delete and all kind of a rest api but what we are going to use here is the download method of diode class as you can see it's asking for two parameters by default one is the URL path from where it will download and second is the location where it will save so I'm going to provide this URL which has a 5 MB image you can use any URL it doesn't matter really and for path where it will save will have to fetch the directory for that we are going to use path provider path provider has a method call get external storage directory which will give you the directory of external storage as the name suggests and it's a future so for that we'll use a sink and oh wait so we'll make our method a sink and we'll use a weight keyword now this directory if you see is path actually it's a directory object now using string interpolation will use a path of this directory and will append with the file name where it's going to save whatever it downloads quite simple till now let's run it quickly and see it's giving the missing plug an exception because we'll have to read on the application it happens when you add package to your pub spec and don't restart the application that's fine now what we have to do is we have to show this progress message right for that we'll create a state level variable and here I'll initialize it with something generally called initializing something like that we will also create one boolean flag to check whether it's downloading or not let's initialize it with false value now we are going to create a label below this floating action button which will show the actual status of downloading so it's good idea to check for null value whenever you are using a text widget so by default we get that initializing text here let's use size box for spacing vertical spacing I'm going to put 32 pixel and this is looking okay let's change the value of is downloading on pressed event so it's downloading we'll make it a reverse if it's downloading we'll make it not downloading and vice versa and we'll put this inside a search State method so that it refreshes the UI now the most important part of this tutorial we have to update download message as the downloading progresses fortunately we have on received progress event inside download method of dial which gives actual bytes downloaded and total bytes available to this file so with that we can show the current progress let's change the value of download message to actual bytes now this extra bytes is the bytes it has downloaded so far so let's run it and see how it's going to look like so when we click on this download button we can see that bytes are updating real time now it's time to announce the giveaways so the first viewer who got this license for Eagle software is so Wendy no and the second viewer is John Isaiah congratulations to you guys and sorry if I pronounced your name wrongly I'll reply on your comment and from there we can take it forward now back to our tutorial we already displayed the bytes progressing now we have to calculate percentage I'm remembering my school days you know we used to calculate percentage like marks obtained divided by total marks in 200 see still it's useful okay now let's replace this actual bytes to the percentage and using a string interpolation we'll add prefix and suffix to this percentage value now let's run and see we are getting this downloading percentage real-time you're using this online sample video comm for sample image and we are downloading this image real-time now we'll just add some styling to the text so that it looks real nice and bold and they're almost there just one last thing to do is to add the linear progress bar this linear progress indicator accepts a value which is a double so now let's declare a variable call percentage so let's use this percentage in the place of value and let me tell you that this value ranges from zero to one so we have to divide the actual percentage by 100 to get this linear progress indicator work correctly now the percentage value we already have it so what we're going to do is to the state-level percentage variable we'll assign this percentage and we'll divide it by 100 finally I'm going to wrap this linear progress indicator inside a padding widget to give some left and right padding and we have our download progress bar ready now when we click on download we can see that it's downloading is showing the percentage and the progress bar runs along with it now you can add more functionality to it you can check for the percentage completion whether it's successful whether it's hundred-person completed you can show different different message you can put this entire thing inside a dialog to you know show a data popup with the percentage completion and you can play around with the different things but the whole idea is to show a progress indicator with percentage whenever you have something big large file to download thank you so much guys for watching this video I hope you enjoyed you learn something new and if you like the video do subscribe the channel give you our feedback and hit the like button thank you so much once again see you in the next video you

Channel: CodeX

Views: 22,917

Keywords: flutter, tutorial, how to, android, ios, ui, download, progress, indicator, progress bar, downloader, basic, animation, linear, flutter ui design, flutter sdk, flutter tutorial

Id: djzV9_pmK4g

Length: 9min 15sec (555 seconds)

Published: Wed Mar 25 2020