动画在Streambuilder中显示Firebase内容

Question

我想在添加或删除对象时添加一些动画(这是通过从我的firebase数据库读取数据使用streambuilder构建的)。进程是如何工作的用户添加任务=>任务被添加到firebase =>Streambuilder检测变化并重建UI(由于没有动画而锯齿状)=>用户删除任务=>任务从firebase删除=>Streambuilder检测变化并重建UI(再次锯齿状，因为它们没有动画)

我想在streambuilder重建UI和添加Todo任务的两个点添加动画。有什么办法可以做到吗?

我研究了animated_stream_list包，但真的不明白如何将它合并到我的代码中。如果你有什么见解，那就太好了。

代码:

StreamBuilder(
stream: FirebaseFirestore.instance
.collection('Users')
.doc(FirebaseAuth.instance.currentUser.uid)
.collection('UserTasks')
.orderBy("Timestamp", descending: true)
.snapshots(),
builder:
(BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
return ListView(
children: snapshot.data.docs.map((document) {
//Container that containes text (Make function later on) START
return GestureDetector(
onDoubleTap: () {
//Deleting task when user taps on it
deletetask("${document.data()['Todo']}");
},
child: AnimatedContainer( 
// UI elements .....
child: Container(
child: Text(
"${document.data()['Todo']}")
)
.....
),   //Animated container end                            
);   //Gesture Detector end


}).toList(),
);      //Listview
},
),          //StreamBuilder

Answer 1

AnimatedSwitcher可能在这里有所帮助。当子组件发生变化时，它会在小部件之间自动切换。在您的例子中，在流构建器中，用动画切换器包装您的小部件。点击这里了解更多信息。动画切换器

在页面中有一个很好的视频解释如何使用它。要了解更多信息，请参考文档。

Answer 2

尝试使用AnimatedList.

使用snapshot.data.docChanges检测变化和基于docChange.type呼叫insertItem或removeItem

可能是这样的

snapshot.data.docChanges.forEach((docChange) {
if (docChange.type == DocumentChangeType.added) {
AnimatedListState.insertItem();
} else if (docChange.type == DocumentChangeType.removed) {
AnimatedListState.removeItem();
}
});

Answer 3

当有任何更新时，StreamBuilder会自动重建小部件。在内部，StreamBuilder调用State.setState。据我所知，如果你想在项目被删除时添加动画，你必须在手势检测上添加它。在您的代码片段中，您添加了GestureDetection，它将在双击时删除项目。所以，你可以做一件事。当用户双击时，播放动画几秒钟，然后调用函数删除项目。之后，streambuild将重新构建自己并显示更新的内容。

希望这将解决您的用例。如果您还有什么问题，请在下面评论。