firebase - 圆形进度条 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);
 }

这是我用于将图像上传到Firebase存储的代码。
如何使用圆形进度条向用户指示图像仍在上传。
谢谢 !

Answer 1

您可以创建一个 bool(boolean) 实例变量isLoading并相应地对其进行更新。例:

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

然后在build方法中，您可以具有以下内容:

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

因此，以这种方式，当isLoading等于false时，就不会出现CircularProgressIndicator()，当它更改为true时，setState()将调用build()方法，并且CircularProgressIndicator()将出现。