Adding animation when ListTile item in Flutter ListView is different

Question

I have an application like this:

When the leading icon is pressed, it changes to:

---

As you can see, the initial icon has changed and the text has been crossed out. I want to animate this icon change and strikethrough of text. How can I do that?

Codes:

Container(
                  height: 500,
                  child: StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
                    stream: FirebaseFirestore.instance.collection(user.uid).snapshots(),
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return ListView.builder(
                          itemCount: snapshot.data.docs.length - 1,
                          itemBuilder: (context, index) {
                            return InkWell(
                              child: Card(
                                elevation: 5,
                                child: ListTile(
                                  leading: InkWell(
                                    child: Icon(snapshot.data.docs[index].data()["done"] == true ? Icons.check_circle : Icons.radio_button_unchecked, color: Colors.green, size: 28,), // <<<<<<<!!
                                    onTap: () {
                                      FirebaseFirestore.instance.collection(user.uid).doc(snapshot.data.docs[index].id).update({
                                        "done": !snapshot.data.docs[index].data()["done"],
                                      });
                                      
                                    },
                                  ),
                                  title: snapshot.data.docs[index].data()["done"] == true ? Text(snapshot.data.docs[index].data()["title"].toString(), style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.grey, decoration: TextDecoration.lineThrough),) : Text(snapshot.data.docs[index].data()["title"].toString(), style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.black)),
                                  trailing: Row(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      InkWell(
                                        child: Row(
                                          children: [
                                            Icon(Icons.label_important, size: 28, color: snapshot.data.docs[index].data()["important"] == true ? Colors.red : Colors.grey,),
                                          ],
                                        ),
                                        onTap: () {
                                          FirebaseFirestore.instance.collection(user.uid).doc(snapshot.data.docs[index].id).update({
                                            "important": !snapshot.data.docs[index].data()["important"],
                                          });
                                        },
                                      ),
                                      SizedBox(width: 10,),
                                      InkWell(
                                        child: Icon(Icons.delete, size: 28,),
                                        onTap: () {
                                          FirebaseFirestore.instance.collection(user.uid).doc(snapshot.data.docs[index].id).delete();
                                        },
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              onTap: () {
                              },
                            );
                          },
                        );
                      }
                        if (snapshot.hasError) {
                          return const Text('Error');
                        } else {
                          return const CircularProgressIndicator();
                        }
                      },
                    ),
                ),

Thanks in advance for the help.

Answer 1

You can use TweenAnimationBuilder to have such an effect. Here is an example how to do it;

  @override
  Widget build(BuildContext context) {
    return Container(
    child: Stack(
    children: [
      new Align(alignment: Alignment.center,
               child: Text("here")),
      new Align(alignment: Alignment.center,
      child: TweenAnimationBuilder(
            tween:
                Tween<double>(begin: 0, end: 25),
            duration: Duration(milliseconds: 1000),
            builder: (context, double? i, Widget? child) {
              return CustomPaint(
                size: Size(30, 0),
                painter: LinePainter(
                    screenWidth: i,
                    screenHeight: 0),
              );
            },
          ))
    ]));
  }
}

class LinePainter extends CustomPainter {
  final double? screenHeight;
  final double? screenWidth;

  LinePainter({this.screenWidth, this.screenHeight});

  @override
  void paint(Canvas canvas, Size size) {
    final startPoint = Offset(0, screenHeight! / 2);
    final endPoint = Offset(screenWidth!, screenHeight! / 2);
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 2;
    canvas.drawLine(startPoint, endPoint, paint);
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return true;
  }
}