Here itemCount: querySnapshot.size, here querySnapshot.docs[index].data()['image'], and here onTap: () => gotoPage(querySnapshot.docs[index].data()['title'])), .size, .docs and .docs have this error:

The property 'docs' can't be unconditionally accessed because the receiver can be 'null'. Try making the access conditional (using '?.') or adding a null check to the target ('!').

When i put ! or ? words Error says:

The getter 'size' isn't defined for the type 'Object'. Try importing the library that defines 'size', correcting the name to the name of an existing getter, or defining a getter or field named 'size'

Here is the full of code:

@override
  Widget build(BuildContext context) {
    return Scaffold(      
      drawer: NavDrawer(),
      body: SafeArea(
        child: Container(
          child: StreamBuilder(
            stream: query.snapshots(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              } else if (snapshot.hasError) {
                return Center(
                  child: Icon(Icons.error),
                );
              }
              final Object? querySnapshot =
                  snapshot.data;
              return ListView(
                physics: BouncingScrollPhysics(),
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(top: 28.8, bottom: 16.8),
                    height: 724.8,
                    child: ListView.builder(
                      itemCount: querySnapshot.size,
                      padding: EdgeInsets.only(left: 28.8, right: 12),
                      scrollDirection: Axis.vertical,
                      physics: BouncingScrollPhysics(),
                      itemBuilder: (context, index) {
                        return Container(
                          height: 214.8,
                          width: 188.4,
                          margin: EdgeInsets.only(right: 16.8, bottom: 50),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(9.6),
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: CachedNetworkImageProvider(
                                  querySnapshot.docs[index].data()['image'],
                                  maxHeight: 200,
                                  maxWidth: 200),
                            ),
                          ),
                          child: Stack(
                            children: <Widget>[
                              GestureDetector(
                                  onTap: () => gotoPage(querySnapshot
                                      .docs[index]
                                      .data()['title'])),

CodePudding user response：

you need to null checks, like use ?. or !

@override
  Widget build(BuildContext context) {
    return Scaffold(      
      drawer: NavDrawer(),
      body: SafeArea(
        child: Container(
          child: StreamBuilder(
            stream: query.snapshots(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              } else if (snapshot.hasError) {
                return Center(
                  child: Icon(Icons.error),
                );
              }
              final Object? querySnapshot =
                  snapshot.data;
              return ListView(
                physics: BouncingScrollPhysics(),
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(top: 28.8, bottom: 16.8),
                    height: 724.8,
                    child: ListView.builder(
                      itemCount: querySnapshot?.length, // here change needed
                      padding: EdgeInsets.only(left: 28.8, right: 12),
                      scrollDirection: Axis.vertical,
                      physics: BouncingScrollPhysics(),
                      itemBuilder: (context, index) {
                        return Container(
                          height: 214.8,
                          width: 188.4,
                          margin: EdgeInsets.only(right: 16.8, bottom: 50),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(9.6),
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: CachedNetworkImageProvider(
                                  querySnapshot?.docs[index]?.data() ['image'], // here change needed
                                  maxHeight: 200,
                                  maxWidth: 200),
                            ),
                          ),
                          child: Stack(
                            children: <Widget>[
                              GestureDetector(
                                  onTap: () => gotoPage(querySnapshot
                                      ?.docs[index]
                                      ?.data()['title'])),//// here change needed