'How do I push document data to a detail page using firestore flutter

Hello I'm new to Flutter I want to know how can I pass the document data from my firestore to detail a page? I want when a user clicks on a listTile or item the exact info will display in the DetailPage.And I saw people using ListView for this but can I use it with column? or you can give me a solution with a ListView builder.It would be helpfull

This is my code:

StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
                    stream: FirebaseFirestore.instance.collection('users').doc(FirebaseAuth.instance.currentUser!.uid).collection('Posts').snapshots(),
                    builder: (_, snapshot) {
                      if (snapshot.hasData) {
                        return SingleChildScrollView(
                          physics: BouncingScrollPhysics(),
                          child: AnimationLimiter(
                            child: AnimationConfiguration.staggeredList(
                              position: 1,
                              delay: Duration(milliseconds: 100),
                              child: SlideAnimation(
                                duration: Duration(milliseconds: 2500),
                                curve: Curves.fastLinearToSlowEaseIn,
                                horizontalOffset: 30,
                                verticalOffset: 300,
                                child: FlipAnimation(
                                  duration: Duration(milliseconds: 3000),
                                  curve: Curves.fastLinearToSlowEaseIn,
                                  flipAxis: FlipAxis.y,
                                  child: GestureDetector(
                                    onTap: () {
                                      Navigator.push(context, MaterialPageRoute(builder: (_) => DetailPage()));
                                    },
                                    child: Column(
                                      children: snapshot.data!.docs
                                          .map((e) => Container(
                                                width: 300.w,
                                                height: 80.h,
                                                decoration: BoxDecoration(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            15),
                                                    color: Colors.white,
                                                    boxShadow: [
                                                      BoxShadow(
                                                          color: Colors.grey
                                                              .withOpacity(0.2),
                                                          spreadRadius: 4,
                                                          blurRadius: 10,
                                                          offset: Offset(0, 3))
                                                    ]),
                                                margin:
                                                    EdgeInsets.only(top: 25.h),
                                                child: Stack(
                                                  children: [
                                                    Container(
                                                      width: 230.w,
                                                      child: Row(
                                                        crossAxisAlignment:
                                                            CrossAxisAlignment
                                                                .start,
                                                        mainAxisAlignment:
                                                            MainAxisAlignment
                                                                .start,
                                                        children: [
                                                          Container(
                                                            width: 170,
                                                            margin:
                                                                EdgeInsets.only(
                                                                    top: 15.h,
                                                                    left: 50.w),
                                                            child: Column(
                                                              mainAxisAlignment:
                                                                  MainAxisAlignment
                                                                      .start,
                                                              crossAxisAlignment:
                                                                  CrossAxisAlignment
                                                                      .start,
                                                              children: [
                                                                Text(
                                                                  e.data()['judul'],
                                                                  style: GoogleFonts.manrope(
                                                                      color: Colors
                                                                          .black,
                                                                      fontWeight:
                                                                          FontWeight
                                                                              .w700,
                                                                      fontSize:
                                                                          17),
                                                                  maxLines: 2,
                                                                  overflow:
                                                                      TextOverflow
                                                                          .ellipsis,
                                                                ),
                                                              ],
                                                            ),
                                                          ),
                                                        ],
                                                      ),
                                                    ),
                                                    Container(
                                                      margin: EdgeInsets.only(left: 50.w,top: 57.h),
                                                      child: Text(
                                                        e.data()['tanggal']
                                                            .toString(),
                                                        style: GoogleFonts.manrope(
                                                            color: Colors
                                                                .grey[
                                                            400],
                                                            fontSize:
                                                            12),
                                                      ),
                                                    ),
                                                    Container(
                                                      margin: EdgeInsets.only(
                                                          left: 220.w,
                                                          top: 11.h),
                                                      child: ClipRRect(
                                                          borderRadius:
                                                              BorderRadius
                                                                  .circular(15),
                                                          child: Image.network(
                                                            e.data()['gambar'],
                                                            width: 65.w,
                                                            height: 60.h,
                                                            fit: BoxFit.cover,
                                                          )),
                                                    ),
                                                  ],
                                                ),
                                              ))
                                          .toList(),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        );
                      } else {
                        return Center(child: Text("Loading"));
                      }
                    },
                  )


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source