how do I create a progress bar in flutter firebase

Question

I am having trouble in creating a progress bar to indicate the process of me uploading an image to firebase storage.

 Future getImage(BuildContext context) async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);
    setState(() {
      _image = File(pickedFile.path);
    });
    StorageReference firebaseStorageRef = FirebaseStorage.instance.ref().child('profile/${Path.basename(_image.path)}}');
    StorageUploadTask uploadTask = firebaseStorageRef.putFile(_image);
    var dowurl = await (await uploadTask.onComplete).ref.getDownloadURL();   
     setState(() {    
       _imageURL = dowurl.toString();

     });

    print(_imageURL);
  } 

This is the code that I have written to upload the image and getting the image URL. Hope someone can help me up thanks!

Answer 1

you can listen to the events on your uploadTask.

Here:

uploadTask.events.listen((event) {
      setState(() {
        _progress = event.snapshot.bytesTransferred.toDouble() /
            event.snapshot.totalByteCount.toDouble();
      });
    }).onError((error) {
      // do something to handle error
    });

Now you can just display the progress like this:

Text('Uploading ${(_progress * 100).toStringAsFixed(2)} %')

To create a progress bar:

LinearProgressIndicator(
  value: _progress,
)

Hope that helps.