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,
                                                ),
                                              ),
                                            ],
                                          ),
                                          
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                          );
                        })),
              ]),
            ),
          ),
        );
      }
    }

CodePudding user response：

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).

CodePudding user response：

You can put your delete method inside the button onPressed which is connected with AlertDialog.

showAlertDialog(BuildContext context) {

  // set up the button
  Widget okButton = TextButton(
    child: Text("OK"),
    onPressed: () { },
  );

  // set up the AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("My title"),
    content: Text("This is my message."),
    actions: [
      okButton,
    ],
  );

  // show the dialog
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}