CODEWITHSUNDEEP
flutterdartflutter-animation
mishalhaneef
mishalhaneef

Reputation: 862

How to make line through text animation in flutter

I'm developing a todo app. and in that app when a task is done, then the lineThrough field will enable. but it is very boring cos there is no effect on it. so I want to make the line through effect as animation. how do I do that

here is an example.

enter image description here

here is my code

 Text.rich(
    TextSpan(text: task.title),
    overflow: TextOverflow.ellipsis,
    style: TextStyle(
        fontFamily: 'Helvatica_lite',
        decoration: task.isDone == true
            ? TextDecoration.lineThrough
            : TextDecoration.none,
        fontWeight: FontWeight.bold,
        fontSize: 15,
        color: task.isDone == true ? Colors.grey : Colors.black),
  );

how do I make the line through animation in flutter???

Upvotes: 0

Views: 1118

Answers (2)

Vorkytaka
Vorkytaka

Reputation: 11

A couple weeks ago, I published a package of mine that does just that.

https://pub.dev/packages/animated_line_through

To use it just add this package to your app and then wrap your Text widget with AnimatedLineThrough widget.

There is a more info in readme.

That's still got some issues with TextField, but it's already showing well with the Text (also with Rich).

Upvotes: 1

Răzvan Puiu
Răzvan Puiu

Reputation: 731

You can achieve this with the line through effect. This video explains the process quite well: https://www.youtube.com/watch?v=ItlNXTVB6bw

Upvotes: 2

Related Questions