'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 |
|---|
