如何在使用兩個螢屏將多個影像上傳到Firebase時顯示圓形進度指示器

我正在制作一個房屋管理應用程式，我必須上傳物業的影像以及與物業相關的其他資料，所以我使用兩個螢屏，一個用于有關房屋的一般資訊，第二個專門用于上傳影像

表格畫面

影像上傳螢屏

從上傳螢屏我將影像串列回傳到表單螢屏

// 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;

}

uj5u.com熱心網友回復：

您可以將 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,
         });
});

uj5u.com熱心網友回復：

您不能在異步操作中使用 forEach 陳述句。它不會等待。使用普通的 for 陳述句。示例：for(var item in items) 等。這應該可以解決您的問題。如果你真的想為每個你需要使用 Future.foreach 看到這個執行緒 -> How to Async/await in List.forEach() in Dart

標籤：扑 镖

上一篇：Flutter從Firebase檢索資料

下一篇：使HTML/Javascript表單提交異步