Get the document ID for each of the ListtTile from querysnapshot

So currently i am trying to retrieve the document id from my firebase collection. But i just cant find a way to retrieve the data.

return ListView.builder(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      itemCount: announcementList.length,
      itemBuilder: (context, index){
        return AnnouncementTile(announcementlist: announcementList[index]);
      },
    );

I am using listview.builder

class AnnouncementTile extends StatelessWidget {

  final Announcement announcementlist;
  AnnouncementTile({ required this.announcementlist });

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 8.0,
      margin: new EdgeInsets.symmetric(
          horizontal: 10.0, vertical: 6.0),
      child: Container(
        decoration: BoxDecoration(
            color: Color.fromRGBO(64, 75, 96, .5)),
        child: ListTile(
            onTap: () {
               // String id = announcementList[index].id;
            },
            contentPadding: EdgeInsets.symmetric(
                 horizontal: 10.0, vertical: 10.0
            ),
            title: Text(
              announcementlist.title.length > 15 ? '${announcementlist.title.substring (0,18)} ...' : announcementlist.title, // limit the words that will be displayed out on screen
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold),
            ),
            // subtitle: Text("10.07.2020", style: TextStyle(color: Colors.white)),

            subtitle: Column(
              children: <Widget>[
                Align(
                  alignment: Alignment.centerLeft,
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(0.0,2.0,0.0,0.0),
                      child: Text(announcementlist.content.length > 20 ? '${announcementlist.content.substring (0,20)} ... ' : announcementlist.content), // limit the words that will be displayed out on screen
                    ),
                ),
                Row(
                  children: <Widget>[
                    Icon(Icons.linear_scale,
                        color: Colors.yellowAccent),
                    Text(announcementlist.dateTime,
                        style: TextStyle(color: Colors.white))
                  ],
                ),
              ],
            ),
            trailing: Icon(Icons.keyboard_arrow_right,
                color: Colors.white, size: 30.0)),
      ),
    );
  }
}

This is my listview design

class DatabaseService {

  final String? uid;
  DatabaseService({ required this.uid});

  //specifically for collection group
  final Query<Map<String, dynamic>> getAnnouncement = FirebaseFirestore.instance.collectionGroup('announcementlist');

  //announcement list from snapshot
  List <Announcement> _announcementListFromSnapshot(QuerySnapshot snapshot){
    return snapshot.docs.map((doc){
      return Announcement(
          title: doc.get('title') ?? '',
          dateTime: doc.get('dateTime') ?? '',
          content: doc.get('content') ?? '',
          aType: doc.get('announcementType') ?? '',
          aLevel: doc.get('announcementLevel') ?? ''
      );
    }).toList();
  }

  // get announcements stream
  Stream<List <Announcement>> get announcementList {
    return getAnnouncement.snapshots()
        .map(_announcementListFromSnapshot);
  }
}

The above code is my wy to retrieve the data from firebase and then show it inside the listtiles then display in the listview.builder. I have searched for resources online but cant find the correct method that suites my method.

What i would like to do is retrieve the document id from firebase and the pass it to the gesturedetector ontap method to show the content of the document in another page.

Below is my database

>Solution :

Add an id field to Announcement class

class Announcement{
 final String id;
 .... //Other fields.

 Announcement({required this.id, ...});
}

Then pass the id like so:

  List <Announcement> _announcementListFromSnapshot(QuerySnapshot snapshot){
    return snapshot.docs.map((doc){
      return Announcement(
          id: doc.id,
          title: doc.get('title') ?? '',
          dateTime: doc.get('dateTime') ?? '',
          content: doc.get('content') ?? '',
          aType: doc.get('announcementType') ?? '',
          aLevel: doc.get('announcementLevel') ?? ''
      );
    }).toList();
  }