circular progress bar flutter

Question

Future uploadImage(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('event_profile/${Path.basename(_image.path)}}');
  StorageUploadTask uploadTask = firebaseStorageRef.putFile(_image);
  var dowurl = await (await uploadTask.onComplete).ref.getDownloadURL();
  setState(() {
    _imageURL = dowurl.toString();
  });
  showAlertDialog(context);
  print(_imageURL);
 }

This is my code for the uploading of image to firebase storage. How can I make use of the circular progress bar to indicate to the user that the image is still uploading.

Thanks !

Answer 1

You can create a boolean instance variable isLoading and update it accordingly. Example:

bool isLoading = false;


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

And then inside the build method, you can have the following:

            isLoading
                ? CircularProgressIndicator()
                : Visibility(visible: false, child: Text("test")),

So, this way when isLoading is equal to false then the CircularProgressIndicator() will not appear, when it changes to true setState() will call the build() method and CircularProgressIndicator() will appear.