时间戳

首页 > 解决方案 > 是否可以在小部件中放置 Firebase 查询

firebase - 是否可以在小部件中放置 Firebase 查询

问题描述

嗨，我想获取 firebase 数据并将其显示在图像滑块中。我已附上我的代码。目前 ia 传递了一些资产图像。要求是从 Firebase 获取图像并将其显示在滑块中。谁能让我知道我该怎么做。

  Widget image_slider_carousel = Container(

      height: 250,
      child: Carousel(
        boxFit: BoxFit.cover,
        images: [
          AssetImage('images/abc.jpg'),
          AssetImage('images/abc.jpg'),
          AssetImage('images/abc.jpg'),
          AssetImage('images/abc.jpg'),
          AssetImage('images/abc.jpg'),



        ],
      ),

    );


return MaterialApp(
      debugShowCheckedModeBanner: false,

      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(backgroundColor: Colors.red.withGreen(10),
            title: Padding(
              padding: const EdgeInsets.all(1),
              child: Text('KartOfill',style: TextStyle(color: Colors.white),

              ),

            ),
            titleSpacing: 50.0,
          ),
          body: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Container(
              height: 1350,
              color: Colors.white,
              child: Column(
                children: <Widget>[

                  image_slider_carousel, //// image carousel Widget

在此处输入图像描述

标签： firebasefluttergoogle-cloud-firestore

解决方案

使用 aFutureBuilder获取 URL 并使用NetworkImage()而不是AssetImage()，如下所示：

FutureBuilder<QuerySnapshot>(
  future: Firestore.instance.collection("AllimageSlider").getDocuments(),
  builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
    if(snapshot.data != null)
      return Text("No Data!);
    else {
      List _docs = snapshot.data.documents;
      List<NetworkImage> _imgs = List();
      for(int i=0;i<_docs.length;i++)
        _imgs.add(new NetworkImage(_docs[i]["imageUrl"]));
      return Carousel(
        fit: BoxFit.cover,
        images: _imgs,
      );
    }
  },
)

我很确定有更好的方法可以_imgs使用类似的东西生成列表.forEach()，但我忘记了如何使用它。

也检查一下。

推荐阅读