如何在flutter中创建带有firestore图像和onclick启动url的轮播滑块？

Question

我想用 Cloud Firestore 创建旋转木马滑块。我创建了名为“slider”的云 Firestore 集合，我有两个字段，一个是“image”，另一个是“url”。

现在我需要在我的轮播滑块中流式传输 Firestore 集合，当用户单击图像时，想要启动 url。

我的轮播滑块代码

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

class Dashboard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        SizedBox(height: 15.0),
        CarouselSlider(
          options: CarouselOptions(
              height: 400.0,
              enlargeCenterPage: true,
              autoPlay: true,
              aspectRatio: 16 / 9,
              autoPlayCurve: Curves.fastOutSlowIn,
              enableInfiniteScroll: true,
              autoPlayAnimationDuration: Duration(milliseconds: 800),
              viewportFraction: 0.8),
          items: [
            Container(
              margin: EdgeInsets.all(5.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                image: DecorationImage(
                  image: AssetImage('$show Firestore image'),
                  onPressed: () {
              launchURL(
                  "$ launch firestore url");
            }
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
} 

谁能指导我？

Answer 1

小部件构建（BuildContext 上下文）{ 变量 idx = 1; 返回容器（ 边距：EdgeInsets.only（顶部：4.0，底部：8.0）， 高度：getProportionateScreenHeight(150)， 宽度：双无限， 装饰：盒子装饰（ 颜色：颜色（0xFF4A3298）， 边界半径：边界半径.圆形（20）， ), 孩子：StreamBuilder（ 流：FirebaseFirestore.instance.collection(BANNER_URL).snapshots()， 构建器：（上下文，AsyncSnapshot 快照）{ 列表列表 = []..length;

          switch (snapshot.connectionState) {
            case ConnectionState.none:
              return Container(
                child: Center(
                    child: new Text(
                        'No network. \nPlease, check the connection.')),
              );
              break;
            case ConnectionState.waiting:
              return Container(
                child: Center(child: new CircularProgressIndicator()),
              );
              break;
            default:
              if (snapshot.hasError) {
                return Container(
                  child: Center(
                    child: Text(snapshot.error.toString()),
                  ),
                );
              } else if (snapshot.hasData) {
                for (int i = 0; i < snapshot.data.size; i++) {
                  debugPrint("Index is " + idx.toString());
                  list.add(NetworkImage(
                      snapshot.data.docs[i].data()['image_url']));
                  idx++;
                }
                return  ClipRect(
                  child: Banner(
                      message: "Publicite aqui",
                      location: BannerLocation.topEnd,
                      color: Colors.red,

                      child:  Carousel(
                        boxFit: BoxFit.cover,
                        images: list,
                        autoplay: true,
                        animationCurve: Curves.fastLinearToSlowEaseIn,
                        animationDuration: Duration(milliseconds: 2000),
                        dotSize: 2.0,
                        dotColor: AppTheme.cuyuyuOrange400,
                        dotBgColor: AppTheme.cuyuyuTransparent,
                        indicatorBgPadding: 2.0,
                      )),
                );
              }

          }
        }),
);

}

Answer 2

您可以使用 FutureBuilder 来获取文档快照，完成后，您可以将 URL 存储在列表中并将列表用于轮播

使用 FutureBuilder 获取 url 列表的示例代码：

Future getCarouselWidget() async {
    var firestore = Firestore.instance;
    QuerySnapshot qn = await firestore.collection("carousel").getDocuments();
    return qn.documents;
  }

Widget build(BuildContext context) {
    var idx = 1;
    return Container(
      child: FutureBuilder(
          future: getCarouselWidget(),
          builder: (context, AsyncSnapshot snapshot) {
            List<NetworkImage> list = new List<NetworkImage>();
            if (snapshot.connectionState == ConnectionState.waiting) {
              return new CircularProgressIndicator(); 
            } else {
              if (snapshot.hasError) {
                return new Text("fetch error");
              } else {

                //Create for loop and store the urls in the list 
                for(int i = 0; i < snapshot.data[0].data.length; i++ ) {
                  debugPrint("Index is " + idx.toString());
                  list.add(NetworkImage(snapshot.data[0].data["img_"+idx.toString()]));
                  idx++;
                }
                return new Container(
                    height: 250.0,
                    child: new Carousel(
                      boxFit: BoxFit.cover,
                      images: list,   <== Set the list here 
                      autoplay: true,
                      dotSize: 4.0,
                      indicatorBgPadding: 4.0,
                      animationCurve: Curves.fastOutSlowIn,
                      animationDuration: Duration(milliseconds: 1000),
                    ));
              }
            }
          }),
    );