Firebase 使用flatter从Cloud firestore加载图像的速度非常慢

我试图从CloudFireStore中检索图像数据，但当我这样做时，图像需要非常长的时间才能加载，有时甚至根本不显示

以下是我检索图像的方式：

final firestore = FirebaseFirestore.instance;
    FirebaseAuth auth = FirebaseAuth.instance;
    Future<String> getProfilePic() async {
      final CollectionReference users = firestore.collection('UserNames');

      final String uid = auth.currentUser.uid;

      final result = await users.doc(uid).get();

      return result.data()['profilepic'];
    }

---

你需要缓存你的图像

获取此软件包：

cached_network_image 2.3.3

并更改此代码：

ClipOval(
                  child: Image.network(snapshot.data,
                      height: 100, width: 100, fit: BoxFit.fill),
                );
              },
            ),

遵守这一准则

ClipOval(
            child: CachedNetworkImage(
              height: 100,
              width: 100,
              fit: BoxFit.fill,
              imageUrl:
              snapshot.data,
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          ),

---

在您的

pubspec.yaml

中添加以下包

cached_network_image: ^2.3.3

在显示图像的位置尝试以下代码：

             Material(
                child: snapshot.data != null
                    ? CachedNetworkImage(
                        placeholder: (context, url) => Container(
                          child: CircularProgressIndicator(
                            strokeWidth: 1.0,
                            valueColor:
                                AlwaysStoppedAnimation<Color>(themeColor),
                          ),
                          width: 50.0,
                          height: 50.0,
                          padding: EdgeInsets.all(15.0),
                        ),
                        imageUrl: snapshot.data,
                        width: 50.0,
                        height: 50.0,
                        fit: BoxFit.cover,
                      )
                    : Icon(
                        Icons.account_circle,
                        size: 50.0,
                        color: greyColor,
                      ),
                borderRadius: BorderRadius.all(Radius.circular(25.0)),
                clipBehavior: Clip.hardEdge,
              )

材料(
子项：snapshot.data！=null
？缓存网络映像(
占位符：（上下文，url）=>容器(
子对象：循环压缩机指示器(
冲程宽度：1.0，
valueColor：
始终停止使用动画（颜色），
),
宽度：50.0，
身高：50.0，
填充：所有边缘设置（15.0），
),
imageUrl:snapshot.data，
宽度：50.0，
身高：50.0，
适合：BoxFit.cover，
)
：图标(
Icons.account_圈，
尺寸：50.0，
颜色：灰色，
),
borderRadius:borderRadius.all（半径圆形（25.0）），
clipBehavior:Clip.hardEdge，
)

@GrahamD它改变了，最近的一个是965 KB，但之前的一个是2.44 MB。我只使用他们在模拟器中给你的默认苹果图像。

             Material(
                child: snapshot.data != null
                    ? CachedNetworkImage(
                        placeholder: (context, url) => Container(
                          child: CircularProgressIndicator(
                            strokeWidth: 1.0,
                            valueColor:
                                AlwaysStoppedAnimation<Color>(themeColor),
                          ),
                          width: 50.0,
                          height: 50.0,
                          padding: EdgeInsets.all(15.0),
                        ),
                        imageUrl: snapshot.data,
                        width: 50.0,
                        height: 50.0,
                        fit: BoxFit.cover,
                      )
                    : Icon(
                        Icons.account_circle,
                        size: 50.0,
                        color: greyColor,
                      ),
                borderRadius: BorderRadius.all(Radius.circular(25.0)),
                clipBehavior: Clip.hardEdge,
              )