首页 > 解决方案 > 颤动:无法显示来自 Firebase Firestore 的图像

问题描述

在此处输入图像描述我正在尝试获取要在存储在 firebase firestore 中的容器小部件上显示的图像数组。url 与索引一起存储在 firestore 和云存储中。下面是完整的代码。我遵循了在线提供的代码,我不确定我错过了什么或哪里出错了。请帮帮我。在此先感谢。

 class NewImage extends StatefulWidget{

 List<String> urls;
 int currentIndex;
 VoidCallback onImageTap;

NewImage({Key key,@required this.urls,@required this.currentIndex,@required this.onImageTap})
  :super(key:key);

  @override
 _NewImage createState() => _NewImage();
 }

 class _NewImage extends State<NewImage>
with SingleTickerProviderStateMixin{


 List<String> images = [];
 final auth = FirebaseAuth.instance;
 final FirebaseFirestore fb = FirebaseFirestore.instance;


 @override
 void initState() {
  super.initState();
  getImages();
}



   @override
   Widget build(BuildContext context) {

return Scaffold(
  body: Container(
    child: SafeArea(
      child: Column(
        children: [
          Container(
            height: 160.0,
            padding: EdgeInsets.symmetric(vertical: 15.0,horizontal: 15.0),
            child: FutureBuilder(
              future: getImages(),
              builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  return ListView.builder(
                    scrollDirection: Axis.horizontal,
                      shrinkWrap: true,
                      itemCount: snapshot.data.docs.length,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(
                          contentPadding: EdgeInsets.all(8.0),
                          leading: Image.network(
                              snapshot.data.docs[index].data()["images"],
                              fit: BoxFit.fill),
                        );


                      });
                } else if (snapshot.connectionState == ConnectionState.none) {
                  return Text("No data");
                }
                return CircularProgressIndicator();
              },
            ),

          ),


        ],
      ),
    ),
  ),
);


}

  Future<QuerySnapshot> getImages()  async {
    return FirebaseFirestore.instance.collection("users").doc(
      auth.currentUser.uid).collection("images").get();
}

  }

标签: firebasefluttergoogle-cloud-firestore

解决方案


您将数组传递给 networkImage 而不是 image

像这样改变它

Image.network(
      snapshot.data.docs[index].data()["images"][index],// [index] added
      fit: BoxFit.fill),

推荐阅读