I want to add some animation upon addition or removal of an object (that is constructed using streambuilder by reading data from my firebase database). How the progression works is User adds task => Task gets added to firebase =>Streambuilder detects change and rebuilds UI (jaggedly due to no animation) => User removes task => Task gets removed from firebase => Streambuilder detects change and rebuilds UI (Again jaggedly as their is no animation)

I want to add animation at the two points where streambuilder is rebuilding the UI and adding the Todo task. Is there any way to do this?

I have researched about the package animated_stream_list but really could'nt understand how I could incorporate it into my code. Any insight about that would be wonderful.

Code:

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


Solution 1: Ankush Chavan

When anything updates then StreamBuilder rebuilds the widget automatically. Internally, StreamBuilder calls State.setState. So, according to me, if you want to add an animation when the item is deleted, you have to add it on the Gesture detection. In your code snippet, you had added on GestureDetection that will remove the item on double click. So, you can do one thing. When the user double clicks, play the animation for some seconds and then call the function to delete the item. After that, StreamBuilde will rebuild itself and displays the updated content.

Hope this will solve your use case. If you have any problem further, please comment below.


Solution 2: Afridi Kayal

AnimatedSwitcher might help here. It animates between widgets automatically whenever the child changes. In your case, inside stream builder, wrap your widget with animated switcher. Check this for more information. Animated Switcher

There is a good video explanation of how to use it in the page. For more info, refer to the documentation.


Solution 3: Elfor

try using AnimatedList.

use snapshot.data.docChanges to detect changes and call insertItem or removeItem based on docChange.type

maybe something like this

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