Question

我将产品图片作为3个项目的数组添加到了Firestore中。现在，我需要将其中一张图像显示到主屏幕gridview中，但是我做不到。有人请帮忙。这是products.dart页面的代码。

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:vegishoppi/pages/product_details.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cached_network_image/cached_network_image.dart';

class Products extends StatefulWidget {
  @override
  _ProductsState createState() => _ProductsState();
}

class _ProductsState extends State<Products> {
  CollectionReference ref = Firestore.instance.collection("products");
  var product_list = [
    {
      "name": "Beans",
      "picture": "Images/Beans.jpg",
      "old_price": 120,
      "price": 85,
    },
    {
      "name": "Carrot",
      "picture": "Images/Carrot.jpg",
      "old_price": 120,
      "price": 85,
    },
    {
      "name": "Cauliflower",
      "picture": "Images/Cauliflower.jpg",
      "old_price": 120,
      "price": 85,
    },
    {
      "name": "Palak",
      "picture": "Images/Palak.jpg",
      "old_price": 120,
      "price": 85,
    },
    {
      "name": "Radish",
      "picture": "Images/Radish.jpg",
      "old_price": 120,
      "price": 85,
    }
  ];


  @override

  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: Firestore.instance.collection('products').snapshots(),
    builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
    return Center(child: const Text('Loading events...'));
    }
    return GridView.builder(
        gridDelegate:
        SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemBuilder: (BuildContext context, int index) {
        return Image.network(snapshot.data[index].image);
      },
      itemCount: snapshot.data.documents.length,
    ); //Text(snapshot.data.documents[index]['name']);
    },
    );
  }

class Single_prod extends StatelessWidget {
  final prod_name;
  final prod_picture;
  final prod_old_price;
  final prod_price;

  Single_prod({
    this.prod_name,
    this.prod_picture,
    this.prod_old_price,
    this.prod_price,
  });
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Hero(
          tag: new Text("hero 1"),
          child: Material(
            child: InkWell(
              onTap: () => Navigator.of(context).push(new MaterialPageRoute(
                  builder: (context) => new ProductDetails(
                    product_details_name: prod_name,
                    product_details_new_price: prod_price,
                    product_details_old_price: prod_old_price,
                    product_details_picture: prod_picture,
                  ))),
              child: GridTile(
                  footer: Container(
                    color: Colors.white70,
                    child: new Row(children: <Widget>[
                      Expanded(
                        child:Text(prod_name, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 
                      16.0),),
                      ),

                      new Text("\₹${prod_price}", style: TextStyle(color: Colors.green, fontWeight: 
                     FontWeight.bold),)
                    ],)
                  ),
                  child: Image.asset(
                    prod_picture,
                    fit: BoxFit.cover,
                  )),
            ),
          )),
    );
  }
}

它不会将图像发送到应用程序。另外，我将Firestore中的图像作为数组存储，我只需要3个图像中的第一个。我遵循Santos Enoque的教程进行开发。

Answer 1

您可以使用它代替收藏参考

  class _ProductsState extends State<Products> {``
         // replace this CollectionReference ref = 
    //Firestore.instance.collection("products"); with
    List<DocumentSnapshot> product=[];
    bool isLoading=false;
    @override
    void initState() {

                   super.initState();
                     getProductList();
                }

       getProductList() async {
           setState(() {
              isLoading = true;
                });

           print("geting instance for product");
        QuerySnapshot qp;
        qs = await Firestore.instance
              .collection("products")
               .getDocuments();

        product.isEmpty ? product.addAll(qs.documents) : null;

        setState(() {
             isLoading = false;
                   });
            }


        Widget build(BuildContext context) {
        return GridView.builder(
        gridDelegate:
           SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemBuilder: (BuildContext context, int index) {
            return isLoading ?  Text('Loading events...') : 
        Image.network(product[index].data["image"]);//this works when the image link 
        //  is 
        // stored in firestore if link is not present in the firestore ping //me
             },
         itemCount: product.length,
                          ); 
                   },
         );
     }

Firestore snapshot

Answer 2

例如，以这个为例该产品收集了两个文档，它们以图像为键，并以值作为图像的链接

以此为例来说明Firestore中的数据click on this link

如何从Firestore获取图像到此gridview。错误“类'QuerySnapshot'没有实例方法'[]'。”

2 个答案: