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

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

我想用 cloud firestore 创建旋转木马滑块。我创建了名为“slider”的 cloud 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,),],);
  }
} 

有人可以指导我吗？

解决方法

小部件构建（BuildContext 上下文）{ 无功 idx = 1; 返回容器（ 边距：EdgeInsets.only（顶部：4.0，底部：8.0）， 高度：getProportionateScreenHeight(150)， 宽度：double.infinity， 装饰：BoxDecoration( 颜色：颜色（0xFF4A3298）， borderRadius: BorderRadius.circular(20),),孩子：StreamBuilder（ 流：FirebaseFirestore.instance.collection(BANNER_URL).snapshots(),构建器：（上下文，AsyncSnapshot 快照）{ 列表 list = []..length;

 <a href="[URL]">Click Here</a>

}

,

您可以使用 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),));
              }
            }
          }),);