flutter - Animation in Streambuilder to display Firebase Content

Question

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

question from:https://stackoverflow.com/questions/65870830/animation-in-streambuilder-to-display-firebase-content

Answer 1

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.