Snapshot returns null value ----flutter

Question

Guys I am new to flutter, and have been trying to retrieve data from firebase and display it in a gridview using streambuilder. But its snapshot is null. I have gone through similar questions raised by other users, but nothings working .

Error: ════════ (3) Exception caught by widgets library ═══════════════════════════════════════════════════ The getter 'itemImage' was called on null. Receiver: null Tried calling: itemImage The relevant error-causing widget was: GridCard file:///C:/Users/dell/foodie_demo/lib/User_Screens/home.dart:107:28 ════════════════════════════════════════════════════════════════════════════════════════════════════

'''
home.dart

import 'package:flutter/material.dart';
import 'package:foodie_demo/Controller/auth.dart';
import 'package:foodie_demo/Model/item_model_pojo.dart';
import 'package:foodie_demo/Sub_widgets/drawer.dart';
import 'package:foodie_demo/Sub_widgets/gridView_card.dart';
import 'package:foodie_demo/User_Screens/item_click.dart';

import 'package:cloud_firestore/cloud_firestore.dart';

class Home extends StatefulWidget {
  final VoidCallback onSignedOutHome;
  final BaseAuth auth;

  Home({this.auth, this.onSignedOutHome});

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String email;
  List <ItemModel> items =[];



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        //TODO: try adding an icon like spoon instead of text here
        title: Icon(
          Icons.star,
        ),

        //ADD FAV AND NOTIFICATIONS ICON (USE STACK FOR NOTIFY)
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.favorite,
            ),
            onPressed: null,
          ),
          Stack(
            //ALIGNMENT IS IMPORTANT FOR NOTIFICATION ICON
            alignment: Alignment.centerLeft,
            children: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.notifications,
                ),
                onPressed: null,
              ),
              CircleAvatar(
                radius: 10.0,
                child: Text('0'),
              )
            ],
          )
        ],
      ),

      //DRAWER WIDGET ADDED FROM drawer.dart(Sub_widgets pkg)
      drawer: DrawerMenu(
          auth: widget.auth,
          signOutSelected: () {
            widget.onSignedOutHome();
          }),

      //ADD GRID VIEW IN BODY
      body: StreamBuilder<QuerySnapshot> (
          stream: Firestore.instance.collection('items').snapshots(),
          builder: (context,snapshot) {

            if (snapshot.hasData){

             items = snapshot.data.documents.map((DocumentSnapshot document) {
                ItemModel.items(
                    itemName: document.data['name'],
                    itemPrice: document.data['price'],
                    itemImage: document.data['image']);
              }).toList();

              print("$items");


            }else{
             print("error in .....");
            }



            return GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  // crossAxisSpacing: 10,
                  // mainAxisSpacing: 10
                ),
                itemCount: items.length,
                itemBuilder: (BuildContext context, int index) {
                  return GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(MaterialPageRoute(
                          builder: (BuildContext context) =>
                              ItemClick(itemModel: (items[index]))));
                    },
                    child: GridCard(items[index]),
                  );
                });
          }),
    );
  }
}

'''

Answer 1

You can do this to handle future data, I have simply added a flag named success and initialised it with false, so if the value has not yet been updated then it will return an empty text, whereas when the value has been updated it will return your stream builder.

      body: StreamBuilder<QuerySnapshot> (
          stream: Firestore.instance.collection('items').snapshots(),
          builder: (context,snapshot) {
            bool success = false;
            if (snapshot.hasData){

             items = snapshot.data.documents.map((DocumentSnapshot document) {
                ItemModel.items(
                    itemName: document.data['name'],
                    itemPrice: document.data['price'],
                    itemImage: document.data['image']);
              }).toList();
              success = true;
              print("$items");


            }else{
             print("error in .....");
            }

            return success == false? Text('') : GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  // crossAxisSpacing: 10,
                  // mainAxisSpacing: 10
                ),
                itemCount: items.length,
                itemBuilder: (BuildContext context, int index) {
                  return GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(MaterialPageRoute(
                          builder: (BuildContext context) =>
                              ItemClick(itemModel: (items[index]))));
                    },
                    child: GridCard(items[index]),
                  );
                });
          }),
    );
  }
}