I want to delete a document in cloud firestore, but I want to show a confirmation using a dialog box first that will confirm or cancel the delete

I want to delete a document in cloud firestore, instead of deleting it directly I want to show a confirmation using a dialog box in flutter first that will confirm or cancel the deletion of document.

by clicking the delete icon, the dialog box will show so that the user can choose a command, because in my current code, it will directly delete the document in firebase.

        class _TabPage3State extends State<TabPage3> {
      final Stream<QuerySnapshot> driver =
          FirebaseFirestore.instance.collection('driversInfo').snapshots();

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            child: Center(
              child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
                Expanded(
                    child: StreamBuilder(
                        stream: driver,
                        builder: (BuildContext context,
                            AsyncSnapshot<QuerySnapshot> snapshot) {
                          if (snapshot.hasError) {
                            return Text('Somethinng went wrong!');
                          }
                          if (snapshot.connectionState == ConnectionState.waiting) {
                            return Text('loading...');
                          }

                          final data = snapshot.requireData;

                          return ListView.builder(
                            itemCount: data.size,
                            itemBuilder: (context, index) {
                              return Padding(
                                padding: const EdgeInsets.all(10.0),
                                child: Container(
                                  padding: EdgeInsets.all(15),
                                  decoration: BoxDecoration(
                                    color: bgColor,
                                    borderRadius: BorderRadius.circular(12),
                                  ),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Row(
                                        children: [
                                          Column(
                                            children: [
                                              // Instead of direct deleting the document in firebase, I want to show a dialog box first to confirm and cancel
                                              IconButton(
                                                onPressed: () {
                                                  FirebaseFirestore.instance
                                                      .collection("driversInfo")
                                                      .doc(
                                                          '${data.docs[index]['plate number']}')
                                                      .delete();
                                                },
                                                icon: Icon(
                                                  Icons.delete,
                                                  color: red,
                                                ),
                                              ),
                                            ],
                                          ),
                                          
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                          );
                        })),
              ]),
            ),
          ),
        );
      }
    }

>Solution :

Just update your onPressed to this:

onPressed: () async {
  final result = await showDialog<bool>(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('Are you sure?'),
      content: const Text('This action will permanently delete this data'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context, false),
          child: const Text('Cancel'),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context, true),
          child: const Text('Delete'),
        ),
      ],
    ),
  );

  if (result == null || !result) {
    return;
  }

  FirebaseFirestore.instance
      .collection('driversInfo')
      .doc(
        '${data.docs[index]['plate number']}',
      )
      .delete();
}

This will show an AlertDialog for the user to confirm, if the user pressed on "Delete", it will return true (Navigator.pop(context, true)). If the user pressed on the background or on "Cancel" it will return null (background) or false (Cancel).