圓形進度條 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

您可以創建一個 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() 。