颤动在孩子中显示不同类型的图像答案

【问题标题】：flutter displaying different types of images in child颤动在孩子中显示不同类型的图像
【发布时间】：2021-04-07 04:48:51
【问题描述】：

我正在做一些时髦的事情。用户可以从手机图库中选择图片或用相机拍照。

然后我将该图像上传到Firebase storage 并检索URL 以将其保存到firestore，以便在用户想要编辑他的选择时引用该图像。

这部分效果很好。

当编辑页面打开时，会显示一个快速错误，但图像仍会显示。我想摆脱那个“快速错误”。

这是我在加载图像之前得到的错误：

RangeError (index): Invalid value: Valid value range is empty: 0

另一个问题我不知道将什么图像加载到我的变量中，它可以是文件（用户可以从他的画廊/相机中更改图像）或字符串（来自 firestore 的 URL，显示先前选择的图像）

我的精彩嵌套：

child: (imageFile1 != null)
                    ? Image.file(
                        imageFile1,
                        width: (size.width - 8 * 4) * 0.33,
                        fit: BoxFit.cover,
                      )
                    : (imageList[0] == null)
                        ? Image.asset(
                            defaultImage,
                            width: (size.width - 8 * 4) * 0.33,
                            fit: BoxFit.cover,
                          )
                        : Image.network(
                            imageList[0],
                            width: (size.width - 8 * 4) * 0.33,
                            fit: BoxFit.cover,
                          ),

imagelist 被加载到 initstate 中（因此，我有一个 Future 的方法，并且 await 涉及从 firetsore 获取该信息） imageFile1 在用户决定从他的画廊/相机中将图像更改为另一个图像时被加载 default image，如果两者都为空，则显示丢失的图像 jpg。

我尝试调试，似乎在 initstate 之前调用了脚手架？？？这对我来说很奇怪......

想法？

【问题讨论】：

你是如何初始化 imageList 的？
从我的 firestore 服务 dart 文件中的 firestore 获取所有信息。然后我将documentsnapshot.data() 返回到原始页面，我可以从那里访问我的所有值。一切正常，只是在我的应用程序加载图像之前，它会将其视为 null，因此会引发瞬间错误，但会恢复并将所有正确信息放入我的表单中。我只是想摆脱那个瞬间的错误......
所以在我的初始化中我调用了一个未来的函数，它有一个等待来检索documentsnapshot.data（），同时它正在跳转以使用初始值构建我的表单（这将是空的，因为尚未收到数据）。然后它回到等待来完成其余的未来功能（包括图像列表和我试图预加载我的表单的其他信息），这就是问题所在！所以，我做了空值检查，但现在它只显示我的默认值而不是快照值...... :(

标签： image flutter google-cloud-firestore

【解决方案1】：

好的，我就是这样做的......首先，谢谢大家的投入

我的Scaffold 我已经使用Visibility 小部件实现了CircularProgressIndicator 并拥有visible paramter: isLoading

所以，在 Future 函数中的 await 调用之前和之后（这个函数在 inistate 函数中被调用）我做了一个 setState 的 isloading = true/false。这部分很关键，因为我需要它来使用来自 Firestore 的数据预加载我的表单组件。

这解决了我的预加载表单数据。

至于 null imagelist....我最终得到了这个看起来怪异的嵌套 if 语句

(imageList.isEmpty)
                        ? Image.asset(
                            defaultImage,
                            width: (size.width - 8 * 4) * 0.33,
                            fit: BoxFit.cover,
                          )
                        : (imageFile1 != null)
                            ? Image.file(
                                imageFile1,
                                width: (size.width - 8 * 4) * 0.33,
                                fit: BoxFit.cover,
                              )
                            : (imageList[0] == null)
                                ? Image.asset(
                                    defaultImage,
                                    width: (size.width - 8 * 4) * 0.33,
                                    fit: BoxFit.cover,
                                  )
                                : Image.network(
                                    imageList[0],
                                    width: (size.width - 8 * 4) * 0.33,
                                    fit: BoxFit.cover,
                                  ),

【讨论】：

【解决方案2】：

我们可以通过CircularProgressIndicator 来避免解决这个问题，而imageList[] 是空的：

child: imageList == null || imageList.isEmpty() ? CircularProgressIndicator() : _buildImageFiles(),

【讨论】：