CODEWITHSUNDEEP
firebaseflutter
user13739409
user13739409

Reputation: 91

how do I create a progress bar in flutter firebase

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!

Upvotes: 6

Views: 6030

Answers (4)

Muhammad Ullah
Muhammad Ullah

Reputation: 332

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;
                      }
                    });

Upvotes: -1

MBK
MBK

Reputation: 3424

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,
   ),

Upvotes: 5

Ayush Shekhar
Ayush Shekhar

Reputation: 1563

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.

Upvotes: 8

Idesh
Idesh

Reputation: 373

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

or You can use Modal Progress HUD

Upvotes: 1

Related Questions