Flutter中实现Cloud Firestore文档删除前的确认弹窗功能

修改IconButton的onPressed回调，替换直接删除的逻辑，改为弹出确认对话框，仅在用户确认后执行Firestore文档删除操作。以下是完整修改后的代码：

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('出错了！');
                      }
                      if (snapshot.connectionState == ConnectionState.waiting) {
                        return Text('加载中...');
                      }

                      final data = snapshot.requireData;

                      return ListView.builder(
                        itemCount: data.size,
                        itemBuilder: (context, index) {
                          // 提取当前文档的车牌号码，用于后续删除操作
                          final plateNumber = data.docs[index]['plate number'];
                          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: [
                                          IconButton(
                                            onPressed: () {
                                              // 弹出确认删除对话框
                                              showDialog(
                                                context: context,
                                                builder: (BuildContext dialogContext) {
                                                  return AlertDialog(
                                                    title: const Text('确认删除'),
                                                    content: const Text('确定要删除这条驾驶员信息吗？'),
                                                    actions: [
                                                      TextButton(
                                                        onPressed: () {
                                                          // 取消删除，关闭对话框
                                                          Navigator.of(dialogContext).pop();
                                                        },
                                                        child: const Text('取消'),
                                                      ),
                                                      TextButton(
                                                        onPressed: () async {
                                                          // 确认删除，执行Firestore删除操作
                                                          await FirebaseFirestore.instance
                                                              .collection("driversInfo")
                                                              .doc(plateNumber)
                                                              .delete();
                                                          // 删除完成后关闭对话框
                                                          Navigator.of(dialogContext).pop();
                                                        },
                                                        child: const Text('确认删除', style: TextStyle(color: Colors.red)),
                                                      ),
                                                    ],
                                                  );
                                                },
                                              );
                                            },
                                            icon: const Icon(
                                              Icons.delete,
                                              color: Colors.red,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          );
                        },
                      );
                    })),
          ]),
        ),
      ),
    );
  }
}

关键修改说明 #

• 提取当前文档的plate number到变量中，避免重复获取数据
• 将原直接删除的逻辑替换为showDialog，创建带确认/取消按钮的AlertDialog
• 点击取消按钮仅关闭对话框，不执行任何删除操作
• 点击确认删除按钮后，才调用Firestore的delete()方法删除对应文档，操作完成后关闭对话框

内容的提问来源于stack exchange，提问作者Bart Stencil