如何在使用兩個屏幕將多個圖像上傳到 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,
         });
});