如何在使用两个屏幕将多个图像上传到 Firebase 时显示圆形进度指示器

Question

我正在制作一个房屋管理应用程序，我必须上传物业的图像以及与物业相关的其他数据，所以我使用两个屏幕，一个用于有关房屋的一般信息，第二个专门用于上传图像

表格画面

图像上传屏幕

从上传屏幕我将图像列表返回到表单屏幕

// i am waiting for the list in the form screen
images = await Navigator.push(context, MaterialPageRoute(builder: (context) => AddPictures()));

// i am returning the list back from the upload screen
Navigator.pop(context,imageStrings);

出于某种我无法知道的原因，我无法显示循环进度指示器，我尝试了所有我知道的方式

这是代码的其余部分

//outiside the widdget build i have two lists
List<XFile> imagesXFiles = []; //for raw image files from the gallery or camera 
List<String> imageStrings = []; //for image links from the firebase storage 

body: isLoading == true ? CircularProgressIndicator() : Column(
        children: [
          Expanded(
            //the first grid is a button to let the user access camera or gallery
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 2.0,
                  mainAxisSpacing: 2.0
              ),
              itemCount: imagesXFiles.length + 1,
              itemBuilder: (BuildContext context, int index) {
                return index == 0 ? GestureDetector(
                  onTap: (){
                    // a function to pick images and add store them to the list "imagesXFiles"
                    _showPicker(context);
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.black12,
                      borderRadius: BorderRadius.circular(5.0),
                    ),
                    child: Icon(
                      Icons.add,
                      color: Colors.black,
                      size: 30.0,
                    ),
                  ),
                ): Container(
                  child: Image(
                      image: FileImage(File(imagesXFiles[index-1].path)),
                      fit: BoxFit.fill
                  ),
                );
              },
            ),
          ),
          TextButton(
              onPressed: ()async{
                // for some reason the circular progress doesn't work i dont understand why 
                setState(() {
                  isLoading = true;
                });
                imageStrings = await uploadImages(imagesXFiles).whenComplete(() {
                  setState(() {
                    isLoading = false;
                    Navigator.pop(context,imageStrings);
                  });

                });
              },
              child: Text("Upload",style: TextStyle(color: Colors.black,fontSize: 25),)),
        ],
      ),

这是将图像上传到firebase的上传功能

Future<List<String>> uploadImages(List<XFile> imagesXFiles) async {

   imagesXFiles.forEach((image) async {
    final storageRef = storage.ref().child(Random().nextInt(100).toString());
    await storageRef.putFile(File(image.path));
    String imageURL = await storageRef.getDownloadURL();

    imageStrings.add(imageURL);
    firebaseFirestore
        .collection("housePictures")
        .add({
      "imageURL" : imageURL,
    });
  });

  return imageStrings;

}

Answer 1

您不能在异步操作中使用 forEach 语句。 它不会等待。 使用普通for语句。 示例： for(var item in items)等。这应该可以解决您的问题。 如果你真的想使用 a for each你需要使用 Future。 foreach看到这个线程-> 如何在 Dart 中的 List.forEach() 中异步/等待

Answer 2

您可以将 forEach 与 Future 一起使用，如下所示。

await Future.forEach(imagesXFiles, (image) async {
    final storageRef = storage.ref().child(Random().nextInt(100).toString());
    await storageRef.putFile(File(image.path));
    String imageURL = await storageRef.getDownloadURL();

    imageStrings.add(imageURL);
    FirebaseFirestore.instance
        .collection("housePictures")
        .add({
            "imageURL" : imageURL,
         });
});