如何在SnackBar小部件中创建撤消函数来恢复Firestore数据

Question

我希望我的Flutter应用程序能够在我的ListTile小部件和Firestore中恢复删除的数据。我有如下SnackBar：

return Dismissible(
key: Key(documentID), 
onDismissed: (direction) {
var deleteItem = list.removeAt(index);
setState(() async{
isDeleting = true;
if (direction == DismissDirection.endToStart) {
await deleteData(log_id: documentID); // To delete the data in firebase
deleteItem;

ScaffoldMessenger.of(context).removeCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
behavior: SnackBarBehavior.floating,
duration: Duration(seconds: 3),
content: Text("${ds['food_name']} has been deleted",
style: TextStyle(color: Colors.white)),
action: SnackBarAction(
label: "UNDO",
textColor: AppColors.MAIN_COLOR,
onPressed: () {
list.insert(index, deleteItem); // this didn't work in my case
},
),
),
);
}
});
setState(() {
isDeleting = false;
});
},

我设法删除了ListTile和Firestore中的数据，但一旦按下"UNDO"，我就无法用此行list.insert(index, deleteItem)在ListTile或Firestore中还原它们。这就是我如何声明list->final list = snapshot.data.docs;那么，我该如何实现呢？

我不需要AlertDialog(我在谷歌搜索时看到过这个例子(，我只想要一个带有"UNDO"按钮的SnackBar，它可以执行所需的功能。我是长笛/飞镖的新手，所以非常感谢您的指导。提前谢谢。

Answer 1

使用以下解决方案更新代码

1. 从列表中删除
2. 显示Undo小吃条
3. 如果没有行动，那么只从firebase中删除
4. 如果是，则撤消操作，然后将其添加回列表

bool isUndoPressed = false;
@override
Widget build(BuildContext context) {
return Dismissible(
child: Container(),
key: Key(''),
onDismissed: (direction) {
if (direction == DismissDirection.endToStart) {
var deleteItem = list.removeAt(index);
setState(() {
isDeleting = true;
});
ScaffoldMessenger.of(context).removeCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
behavior: SnackBarBehavior.floating,
duration: Duration(seconds: 3),
content: Text("${['food_name']} has been deleted",
style: TextStyle(color: Colors.white)),
action: SnackBarAction(
label: "UNDO",
textColor: AppColors.MAIN_COLOR,
onPressed: () {
isUndoPressed = true;
setState(() {
isDeleting = false;
list.insert(
index, deleteItem); // this didn't work in my case
});
},
),
),
);
//start a 3s timer
Timer.periodic(const Duration(seconds: 3), (timer) async {
if (isUndoPressed) {
//can if undo button is pressed.
timer.cancel();
setState(() {
isDeleting = false;
});
} else {
await deleteData(
log_id: documentID); // To delete the data in firebase
isUndoPressed = false;
setState(() {
isDeleting = false;
});
}
});
}
});
}

Answer 2

list.insert(index, deleteItem)in setState method只能恢复ListTile中的数据，而不能恢复Firebase中的数据。因为一旦在Firestore中删除文档，它就会永远消失。没有取消删除功能。

使用FirebaseUI提供的适配器，您要做的事情可能并不容易。您可以合理地实现撤消功能的唯一方法是：

• 具有删除功能，而不是实际删除文档，以及而只是更新UI以删除视图。你必须将删除安排在稍后某个时间进行。撤消选项然后只恢复已删除文档的可见性取消延迟的删除
• 为此，还要在文档中添加一个新的布尔字段来标记它是否已删除，并在传递的查询的筛选器中使用它到FirebaseUI。每个文件上都必须有该字段以便其正确地过滤。UI完成后然后必须弄清楚如何真正删除你在UI中标记为删除
• 或者您可以在删除之前在另一个集合中创建文档它来自主要的一个。例如，一个常见的实现是包含已删除文档的子集合，甚至包含每个文档