使用Flutter从云firestore加载图像时速度极慢

Question

我正在尝试从云firestore中检索图像数据，但当我这样做时，图像需要极长的时间才能加载，有时根本不会出现。

下面是我检索图像的方法：

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'];
    }

并显示它：

FutureBuilder(
                  future: getProfilePic(),
                  builder: (_, AsyncSnapshot snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return Center(
                          child: CircularProgressIndicator(
                        backgroundColor: Palette.lightGreen,
                      ));
                    }
                    return ClipOval(
                      child: Image.network(snapshot.data,
                          height: 100, width: 100, fit: BoxFit.fill),
                    );
                  },
                ),

Answer 1

你需要缓存你的图像。

获取此包：

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),
            ),
          ),

Answer 2

将以下包添加到您的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,
              )