时间戳

首页 > 解决方案 > 带有 flutter_firebase 的 StreamBuilder 在第二个小部件构建时具有空值（图像消失）

firebase - 带有 flutter_firebase 的 StreamBuilder 在第二个小部件构建时具有空值（图像消失）

问题描述

我设法streambuilder在页面上显示来自firestore的图像，但问题是snapshot.data如果我返回最后一页并返回，图像就会消失（我得到一个空值）。

这是我的代码。如何使快照数据持久存在，以便图像保持在那里并且在小部件重建时不会消失？

Container(child: Column(
      children: [
        Text('    Certifications',
        Container(child: StreamBuilder(
           stream: certificates,
           builder: (context, snapshot) {
             return !snapshot.hasData
              ? Center(child: Container(
                  child: Center(child: Text(
                    'No images yet'))))
              : Container(
                 child: GridView.builder(
                   itemCount: snapshot.data.documents.length,
                   itemBuilder: (context, index) {
                     url = snapshot.data.documents[index].get('url');
                     return Container(child: FadeInImage
                         .memoryNetwork(fit: BoxFit.cover,
                            placeholder: kTransparentImage,
                            image: url),
              ),
            );
         }),
      );
   }),
 ),

标签： firebaseflutterstream-builder

解决方案

流是异步的。这意味着StreamBuilder不获取旧快照，仅获取新的未来快照。这是你的问题。

当您的小部件重新构建时，它正在订阅一个已经有事件的流。是的，您会认为快照中的数据应该是最后一个事件值，但事实并非如此。直到null有新事件被推送到您的certificates流中。

因此，一种解决方案是让正在加载您的证书的服务存储初始 API 请求的值，并使其可供您在 StreamBuilder 的initialData属性中使用。

我会这样构造它：

StreamBuilder(
    stream: certificateService.stream,
    initialData: certificateService.value, // <-----
    builder: ...
)

希望这能为您指明正确的方向。

推荐阅读