Flutter Dev: How to download large files with progress

Hey there, do you code flutter? well if you do, I’d like to show you how you can download large files and display a progress indicator.

A little over four months I started developing mobile apps with flutter although even though I have been a Web Developer for a couple of years, I have only ever developed a mobile app with Java Android. However I have not the intention of telling you my whole life story, let's just get to the point.

For starters, one of the packages we’d be making use of is Dio which is created by the Flutter China community and need I mention that you could achieve this with the normal flutter http library but for this project, we’ll just use dio.

So first we are going to add 2 packages to our project, the first would be flutter dio which you can find here https://pub.dev/packages/dio, then we’d add flutter path_provider https://pub.dev/packages/path_provider.

After this, we’ll go into our main.dart file and here I’ve created a class context variable this is just so we can create a Snackbar notification with this context, which I have returned in a function called successful().

Then GlobalKey which would serve as a variable for our formkey and then 3 TextEditingController variables, url, fileName, and fileType as Text Input fields,textField focus node, a boolean variable, and a progress string.

Now, also remember to import the dio and path_provider package into the main.dart file.

Moving on, in our build widget, I’ve created a very basic design, An Appbar with a simple title “File Downloader”, and in our body widget, I’ve created a Builder Widget which assigns its context to the class context, then in the builder, we’re returning a SingleChildScrollView with a child of Container having a Form widget as a direct child that has a key of formKey which we created earlier above, I’ve added a Column. This Column now has a Text Widget with a sign “Enter link below”. beneath this TextWidget, I have added 3 TextFormField. 1 for the url, 2 for the name of the file and 3 for the type of file you want to download. Then lastly at the end of the Column, I added a ListTile which shows conditionally, Now if the downloading variable we created above is true, the ListTile shows else it doesn't. You can find the source code in the images below

Moving on, I’ve added a floatingActionButton.This so that when we pressed we validate our form and if it checkout, we begin the download process. You can find the download function below

So in our downloadFile function, we instantiate dio, and create a try-catch block, that helps check if there's’ probably a connection problem or so. After in our try block, we assign var dir to Application Directory provided by path_provider. Now carefully study the path variable as I have assigned dir.path gotten from dir variable, /download/fileName and / fileType. This created a typical name we want to name our file when downloaded.

Then we await dio.download which basically takes 3 parameters. the url, the path, and an onReceivedProgress callback. Notice that the call back also takes in 2 parameters, a received and total. Finally, we setState of downloading to true and progressString to ((received / total) * 100) giving us a percent value.

With this little, when we run the app, we would have a screen like this.

I hope this will help anyone looking for a solution. Now I will leave a GitHub link to this project here just so you can check it out anytime and link to my social media, please star the repository and feel free to follow me on social media.

Thanks

Github: https://github.com/samuelezedi/flutter_files_downloader

Twitter https://twitter.com/samuelezedi

Instagram https://instagram.com/samuelezedi