Upload and Download Files | Flutter Firebase Storage

how to download any files from the firebase storage and display them inside the phone gallery we start with the firebase project simply check out my 2 minute firebase setup video if you have never set up before firebase with flutter after this we go to the storage section click on get started choose test mode and click on next next choose the firebase server location where your file should be stored and click on done after some loading time you could create a new folder i call it files and click on add folder also go inside of this folder and then you can upload some files to this folder and then choose the files that you later want to download with your flutter app so all in all we have uploaded some images and also videos to this folder next inside your flutter project you can load these files using the firebase storage package and the result is of type future that we save in our state and then we go to our build methods and here inside we create a future builder where the future of our loaded files goes inside and finally if we loaded successfully some data from firebase and we want to get these files and we simply want to display them inside of a list view next to the file name we display a download button and if we click on it then we call the download file method inside of it we use the reference to the file that is stored inside firebase and we download and save it to the local phone storage using the pass provider package after saving the file we also display a snag buy in our ui with this if you download a file then you see a snack bar that the file was downloaded and we save the file to the application documents directory which is only visible to the app however not to the user of the phone alternatively gets a download link of the file stored in firebase and then we download this file using the dio package so the file is stored inside the temporary directory of our local storage inside this path and finally use the gallery saver package to save this file to the gallery which is publicly visible to the user of the phone with this if we download our images or also videos then you can go to the gallery of your phone and you see all the files that we have downloaded are displayed inside the gallery also go to the build gradle file to make the gallery saver work on android and change the min sdk version to at least 21 and finally within the state we create a map that stores a download progress of each file next inside the download file method we go to the download method of the dio package and here we can listen to the progress of the download that we simply save within the map and therefore we use an index that we will define later next we go to our list view and get the progress from our map and lastly we only want to display the progress in our list so we display a linear progress indicator with this progress and to make everything complete we also want to put this index of our listview inside of our download file method and then we have also the index that was before missing as a result if we download some files then you will always see the progress of the download how to upload image files to firebase storage or video files or any other file that you like to upload we start with two buttons to select and later upload a file to firebase firstly we select the file in this case we pick a file using the file picker package with this we can select any file type from the local phone storage next we get a result with this picked file that we want to save within our state and lastly we use this picked file to show a preview in our app so in this case we display the name of the file that we have picked alternatively you can display any other preview and now we upload this file to firebase simply convert the picked file to a file object also define where you want to store the file on firebase in this case we include the name of the picked file and lastly upload the file to firebase using the firebase storage package in your firebase console go to the storage section and click on get started simply check out this video where i explain in only 2 minutes how to set up firebase if you have never done this before and now select test mode and click on next next you can choose any location for your firebase server and click on done with this we can upload this file from our flutter app to firebase refresh your website and you see he has created a files folder and inside of it is our uploaded file next we create an upload task with this we can wait until the file upload is finished and when it is finished then we get the download link of the uploaded file with this if you upload a file then we get the download link of this file that we could open up inside a browser next below the upload button we create a progress and with the help of a stream builder we get then the progress of our upload and lastly we display this progress within our ui therefore we create a stack and inside of it we have a linear progress indicator and a text of the progress with this if you upload a file then you also see the progress of the file upload to make this work we go to the upload file method and wraps the upload task around with the set state and after the upload is finished we set the upload task to null [Music] you

Channel: HeyFlutter․com

Views: 25,784

Keywords: download files from firebase, firebase, firebase cloud storage, firebase storage, firebase tutorial, flutter, flutter download file, flutter file upload, flutter firebase, flutter firebase download, flutter firebase storage get download url, flutter firebase upload, flutter tutorial, flutter upload image, flutter upload image to firebase storage, upload file to firebase storage, upload files, upload image, upload video

Id: Jt3OSCe7eOw

Length: 5min 42sec (342 seconds)

Published: Sat Apr 23 2022