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

您可以创建一个布尔实例变量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()将会出现。

圆形进度条颤动

1 个答案: