how to fetch data correctly with flutter - flutter

Question

i have problem with fetch data from database (firestore)
im fetching data from firestore and listing them with listview.builder, when a card is tapped it routes to new page that show all the details of tapped item.
on the screenshot i have 2 item listed with header,body and date when i tapped on item routes to new page and fetch from firestore rest of the data (client,start date,finish date etc.)
my question is what is the best way to fetch tapped items datas
my idea is store somehow items store unique id to the builded item and when it tapped route to new page with id and query with id
my code block
Widget listener(Stream<QuerySnapshot> tasks) {
return Expanded(
child: StreamBuilder<QuerySnapshot>(
stream: tasks,
builder: (
BuildContext context,
AsyncSnapshot<QuerySnapshot> snapshot,
) {
if (snapshot.hasError) {
return Center(
child: Text(
"something went wrong.",
style: TextStyle(
color: ColorConstants.instance.headerColor, fontSize: 20),
textAlign: TextAlign.center,
),
);
}
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.data!.size > 0) {
final data = snapshot.requireData;
return ListView.builder(
itemCount: data.size,
itemBuilder: (context, index) => buildNotificationCards(
context,
data.docs[index]['header'],
data.docs[index]['body'],
data.docs[index]['startDate']));
} else {
return Center(
child: SizedBox(
width: MediaQuery.of(context).size.width * .8,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
LineIcons.fileAlt,
size: 60,
color: ColorConstants.instance.headerColor,
),
SizedBox(
height: 20,
),
Text(
'Maalesef Kayıtlı Bir Veri Bulunamadı',
textAlign: TextAlign.center,
style: TextStyle(
color: ColorConstants.instance.headerColor,
fontSize: 20,
height: 2),
),
]),
),
);
}
},
));
}

Answer 1

The normal practice is under ListView.builder, you create a ListTile and on its onTap argument, you use the Navigator to switch to another page for the detail view:
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailPage(data[index])),
);
where data[index] is the particular element of the data list you want to display the contents of.