Passing data to the next screen while using StreamBuilder in flutter

Question

I am able to get datas from firestore inside Card widget but not able to go into details - I mean to pass snapshot from first screen to the second (from BodySectionStream page to DetailPage). I tried a lot but failed. Please review my code and help me to solve problem. Thanks in advance

class BodySectionStream extends StatefulWidget {

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

class _BodySectionStreamState extends State<BodySectionStream> {

  final firestore = Firestore.instance;



  navigateToDetail( AsyncSnapshot post) {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => DetailPage(
                  news: post,
                )));
  }


  @override
  Widget build(BuildContext context) {


    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        child: Column(
          children: <Widget>[
            Align(
              alignment: Alignment.centerLeft,
              child: Container(child:
              Text('Prefernces', textAlign: TextAlign.left, style: TextStyle(
                fontWeight: FontWeight.w500, fontSize: 22.0, color: Colors.black),)),
            ),

            const SizedBox(height:10.0),

            StreamBuilder <QuerySnapshot>(
                stream: firestore.collection('news').snapshots(),
                builder: (context, snapshot) {
                  if (!snapshot.hasData) {
                    return Center (child: CircularProgressIndicator());
                  } 
                  else {
                    final posts = snapshot.data.documents;
                    List<Container> postWidgets = [];
                    for (var post in posts ){
                      final postText = post.data['title'];
                      final postList = Container(
                      child:  GestureDetector(
                        onTap: () => navigateToDetail( post.data[index]),
                          child: Card(

                          child: Column(children: <Widget>[
                            Image.network(post.data['images'],),
                            Text(postText),
                          ],)
                        ),
                      )
                      );


                      postWidgets.add(postList);

                    }
                    return Expanded(
                      child: ListView(
                        children: postWidgets,
                        ));
                  }
                }),

          ],
        ),
      ),
    );
  }
}

DetailPage - where I want to pass data

class DetailPage extends StatefulWidget {
  final AsyncSnapshot news;

  DetailPage({this.news});

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

class _DetailPageState extends State<DetailPage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
         children: <Widget>[
           Text(widget.news.data['title'])
         ],
        ),
      ),
    );
  }
}

Answer 1

final posts = snapshot.data.documents;

the documents getter returns a List of type DocumentSnapshot, you are passing your DetailPage a document field here:

onTap: () => navigateToDetail( post.data[index]),

But you want to pass a DocumentSnapshot to access the title field in the DetailPage, so just pass the post:

onTap: () => navigateToDetail(post),

and change the news datatype from AsyncSnapshot to DocumentSnapshot in your DetailPage class.