Having trouble getting DataSnapshot from database and getting null values

Question

I am trying to view a users story post by pressing their story button, navigating me to the full page storyView to see the images. I think I am having trouble passing the data to the next page or querying the data from the database. I'm not sure where I went wrong.

This is the error I'm getting:

The following _TypeError was thrown building Builder: type '(DataSnapshot) => Null' is not a subtype of type '(dynamic) => dynamic' of 'f''

This is where I'm calling the data to be retrieved on the actual page where you would view the image. The error is pointing to the crudMethods.getStoryListData() line

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
import 'package:link_me/services/crud.dart';
import "package:story_view/story_view.dart";

class StoryPageView extends StatefulWidget {
  final String currentUser;
  final String storyUrl;

  StoryPageView({this.currentUser, this.storyUrl});

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

class _StoryPageViewState extends State<StoryPageView> {
  CrudMethods crudMethods = new CrudMethods();
  List<String> itemList = new List();
  final StoryController controller = StoryController();
  

  QuerySnapshot storySnapshot;

  @override
  void initState() {
    super.initState();
    CrudMethods crudMethods = new CrudMethods();

    crudMethods.getStoryListData().then((DataSnapshot snapshot) {
      //storySnapshot = result;
      var urlData = snapshot.value;
      //itemList.clear();
      urlData.forEach((key, value) {
        itemList.add(value['storyUrl']);
      });

      setState(() {
        print(itemList.length);
      });
    });
  }

 loadStory() {
    return ListView(
      children: <Widget>[
        itemList == null ? CircularProgressIndicator()
        : Container(
          child: StoryView(
             storyItems: [
              for (var i in itemList) show(i)
            ], 
            controller: controller,
            progressPosition: ProgressPosition.top,
            repeat: false,
            ),
        ),
      ],
    );
  }

  show(String urlData) {
    return StoryItem.pageImage(
      url: urlData, 
      controller: controller,
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(8.0),
        child: Column(
          children:<Widget>[
            Padding(
              padding: EdgeInsets.fromLTRB(0, 5, 5, 5),
              child: Container(
                height: MediaQuery.of(context).size.width,
                width: MediaQuery.of(context).size.height,
                child: loadStory(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This is how I am navigating to that page from the main story list page that show all users who have posted a new story

onTap: () => Navigator.push(context,
                  MaterialPageRoute(builder: (context) => StoryPageView(currentUser: currentUser.id,))),

And this is from my utility file I'm using to call the data

getStoryListData() async {
    return storyPostReference.document(currentUser.id).collection("storyPostItems").orderBy("timestamp", descending: true).snapshots();
  }

Answer 1

I think the culprit is your getStoryListData , redefine it like this :

Future<DataSnapshot> getStoryListData() async {
  DataSnapshot snapshot= storyPostReference.document(currentUser.id).collection("storyPostItems").orderBy("timestamp", descending: true).snapshots();

print(snapshot.value); //to know whether you are making successful queries or not .
return snapshot;

  }

Edit:

Redifine your initState like this :

@override
  void initState() {
    super.initState();
    CrudMethods crudMethods = new CrudMethods();

    crudMethods.getStoryListData().then((Stream<QuerySnapshot> snapshot) {
.
.
//rest of the code

and your getStoryListData like this :

Future<Stream<QuerySnapshot>> getStoryListData() async {
  Stream<QuerySnapshot> snapshot= storyPostReference.document(currentUser.id).collection("storyPostItems").orderBy("timestamp", descending: true).snapshots();

print(snapshot.docs.toString()); //to know whether you are making successful queries or not .
return snapshot;

  }

Furthermore , you cant use snapshot.value because QuerySnapshot dont have any property value . You have to use snapshot.docs which returns List<QueryDocumentSnapshot> .Iterate over the List and use .data() method to get a Map<String,dynamic> which has all the data you want .Update your code accordingly.

Answer 2

You are using future in the UI but returning stream from the getStoryListData() so you have to return future as Future getStoryListData() async { Querysnapshot snapshot= storyPostReference.document(currentUser.id).collection("storyPostItems").orderBy("timestamp", descending: true). get(); return snapshot;