Flutter：如何从 Firestore 数据库中检索图像数组到轮播答案

【问题标题】：Flutter: how to retrieve array of image from firestore Database to carouselFlutter：如何从 Firestore 数据库中检索图像数组到轮播
【发布时间】：2021-10-28 15:24:24
【问题描述】：

我目前正在处理颤振项目，我已将我的图像存储为包含图像 URL 的数组。我想检索这些 URL 并将它们显示在我的应用程序上。

我用了一整天的时间试图解决这个问题，但没有任何效果。我需要帮助。

the image show the collection and the document that have array of URLs

下面的代码在普通文档上工作正常，但是当我传递数组以便显示在轮播返回错误时

import 'package:carousel_slider/carousel_slider.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';


import 'screens/add_image.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // List<NetworkImage> _listOfImages = <NetworkImage>[];
  Future getImageFirestore() async {
    var firestore = FirebaseFirestore.instance;
    QuerySnapshot qn = await firestore.collection("imageFie").get();
    return qn.docs;
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Retrieve Image In Carousel')),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) => AddImage()));
          },
        ),
        body: Column(
          children: [
            FutureBuilder(
                future: getImageFirestore(),
                builder: (context, AsyncSnapshot snapShot) {
                  return snapShot.data == null
                      ? Container()
                      : Column(
                          children: [
                            CarouselSlider.builder(
                                itemCount: snapShot.data.length,
                                options: CarouselOptions(
                                  initialPage: 0,
                                  autoPlay: true,
                                ),
                                itemBuilder: (BuildContext context, int index,
                                    int pageViewIndex) {
                                  DocumentSnapshot images =
                                      snapShot.data[index];
                                 
                                  return Image.network(
                                    images['imageUrlList'],
                                    fit: BoxFit.fill,
                                  );
                                }

                                
                                ),
                            
                          ],
                        );
                })
          ],
        ));

  
  }
}

【问题讨论】：

请提供错误
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： arrays flutter google-cloud-firestore

【解决方案1】：

替换

DocumentSnapshot images = snapShot.data[index];

return Image.network(
  images['imageUrlList'],
  fit: BoxFit.fill,
);

与

Map images = snapShot[index].data();
return Image.network(
  images['imageUrlList'][0],
  fit: BoxFit.fill,
);

以上代码将使用 imageFie 中所有文档的第一个图像构建一个轮播。

【讨论】：