How do fix this error "Null is not a subtype of type DocumentSnaphot<object?>

Viewed 28

I am using the Streambuilder widget to build a real-time response screen. Everything works well. But when I navigate to the page from the particular complaints screen(the reason why the postId and postusername variables at the beginning) I get red error screen that disappears after a few seconds. This is the error I get "Another exception was thrown: type 'Null' is not a subtype of type 'DocumentSnapshot<Object?>'"

class CommentsScreen extends StatefulWidget {
  final String postId;
  final String postusername;
  const CommentsScreen(
      {Key? key, required this.postId, required this.postusername})
      : super(key: key);

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

class _CommentsScreenState extends State<CommentsScreen> {
  final TextEditingController commentEditingController =
      TextEditingController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: primaryColor,
        title: const Text(
          'Responses',
        ),
        centerTitle: false,
      ),
      body: StreamBuilder(
        stream: FirebaseFirestore.instance
            .collection('posts')
            .doc(widget.postId)
            .collection('comments')
            .snapshots(),
        builder: (context,
            AsyncSnapshot<QuerySnapshot<Map<String, dynamic>>> snapshot) {
          if (snapshot.hasError) {
            return const Center(child: Text("Something went wrong"));
          }
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }

          return ListView.builder(
              shrinkWrap: true,
              itemCount: snapshot.data!.docs.length,
              itemBuilder: (context, index) {
                DocumentSnapshot answers = snapshot.data!.docs[index];
                DateTime postDate = answers['datePublished'].toDate();
                String formattedDate =
                    DateFormat.yMMMd().add_jm().format(postDate);
                return Padding(
                  padding: const EdgeInsets.all(primaryPadding),
                  child: Card(
                    elevation: 15,
                    shadowColor: secondaryColor,
                    child: Padding(
                      padding: const EdgeInsets.all(primaryPadding),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              CircleAvatar(
                                backgroundColor: secondaryColor,
                                radius: 18,
                                child: Text(
                                  answers['username'][0],
                                  style: const TextStyle(
                                      color: primaryColor,
                                      fontSize: fontSizeFive),
                                ),
                              ),
                              const SizedBox(
                                width: 5,
                              ),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(answers['username'],
                                      style: const TextStyle(
                                          fontSize: fontSizeFour,
                                          fontWeight: FontWeight.bold,
                                          fontStyle: FontStyle.normal)),
                                  Text(formattedDate,
                                      style: const TextStyle(
                                          fontSize: fontSizeTwo,
                                          fontStyle: FontStyle.italic))
                                ],
                              )
                            ],
                          ),
                          const Divider(
                            height: 10,
                          ),
                          Text(
                            answers['answers'],
                            style: const TextStyle(fontSize: fontSizeThree),
                          )
                        ],
                      ),
                    ),
                  ),
                );
              });
        },
      ),
      // text input
      bottomNavigationBar: SafeArea(
        child: StreamBuilder<Object>(
            stream: FirebaseFirestore.instance
                .collection('users')
                .doc(FirebaseAuth.instance.currentUser!.uid)
                .snapshots(),
            builder: (context, AsyncSnapshot snapshot) {
              DocumentSnapshot user = snapshot.data;
              String pic = user['photoUrl'];

              return Container(
                height: kToolbarHeight,
                margin: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                padding: const EdgeInsets.only(left: 16, right: 8),
                child: Row(
                  children: [
                    CircleAvatar(
                      backgroundImage: NetworkImage(pic),
                      radius: 20,
                    ),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.only(
                            left: 16, right: 8, bottom: 10),
                        child: TextField(
                          controller: commentEditingController,
                          decoration: const InputDecoration(
                            border: OutlineInputBorder(
                                borderRadius: BorderRadius.all(
                                    Radius.circular(circularRadius))),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              );
            }),
      ),
    );
  }
}

I have tried a few options like playing around will the null check operators but nothing seems to sort this issue. Any help, please? below is how my terminal looks like enter image description here

1 Answers

You need to check whether the snapshot has error or has data before trying to get the data. In this example, I display error message if the snapshot has error and I display circular progress indicator if snapshot does not have data. I only display the Container if it passes both of these check.

builder: (context, AsyncSnapshot snapshot) {
    if (snapshot.hasError) {
        return const Center(child: Text("Something went wrong"));
      }
    if (!snapshot.hasData) {
        return const Center(
            child: CircularProgressIndicator(),
        );
    }
    DocumentSnapshot user = snapshot.data;
    String pic = user['photoUrl'];

     return Container(
Related