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

问题描述

我将产品图像作为 3 个项目的数组添加到了 Firestore。现在我需要将其中一张图像放到主屏幕网格视图中，但我做不到。有人请帮忙。这是 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 的教程进行了开发。

标签： flutter

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

问题描述

解决方案

推荐阅读