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.

Answer 2

Use Future Builder and pass this getImage inside future builder Future Builder Example

or You can use Modal Progress HUD

Answer 3

The answer by Ayush Shekhar is correct, but outdated on some parts due to the rapid updating on firebase plugins.

On top of state class

double? _progress;

... In the upload method, you can setup like this.

   uploadTask.snapshotEvents.listen((event) {
        setState(() {
          _progress =
              event.bytesTransferred.toDouble() / event.totalBytes.toDouble();
          print(_progress.toString());
        });
        if (event.state == TaskState.success) {
          _progress = null;
          Fluttertoast.showToast(msg: 'File added to the library');
        }
      }).onError((error) {
        // do something to handle error
  });

You can get the download link like this.

uploadTask.then((snap) async {
      final downloadURL = await snap.ref.getDownloadURL();
      print(downloadURL);
    });

...

Use the _progress in UI like this.

if (_progress != null)
    LinearProgressIndicator(
      value: _progress,
      minHeight: 2.0,
      color: Constants.primaryColor,
   ),

Answer 4

Check this, it will work for both video and images:

final fil = await ImagePicker().pickVideo(source: ImageSource.gallery);
                    final file = File(fil!.path);
    
                    final metadata = SettableMetadata(contentType:"video/mp4");

                    final storageRef = FirebaseStorage.instance.ref();

                    final uploadTask = storageRef
                        .child("images/path/to/video")
                        .putFile(file, metadata);

// Listen for state changes, errors, and completion of the upload.
                    uploadTask.snapshotEvents.listen((TaskSnapshot taskSnapshot) {
                      switch (taskSnapshot.state) {
                        case TaskState.running:
                          final progress =
                              100.0 * (taskSnapshot.bytesTransferred / taskSnapshot.totalBytes);
                          print("Upload is $progress% complete.");
                          break;
                        case TaskState.paused:
                          print("Upload is paused.");
                          break;
                        case TaskState.canceled:

                          print("Upload was canceled");
                          break;
                        case TaskState.error:
                        // Handle unsuccessful uploads
                          break;
                        case TaskState.success:
                         print("Upload is completed");
                        // Handle successful uploads on complete
                        // ...
                          break;
                      }
                    });