animated_line_through 1.0.2

Animated line through for text for Flutter, with full control over animation

Animated Line Through

A super simple package to add animated line through text in your Flutter app!

We created this package because Flutter currently lacks built-in support for animating text decorations, particularly the line through effect.

Usage

This package provides two widgets: AnimatedLineThrough and AnimatedLineThroughRaw.

Both widgets require a child argument, which must be a widget that uses either RenderParagraph or RenderEditable as its render object. Without this, the line through effect won't work.

Typically, you'll use widgets like Text, RichText, TextField, or TextFormField.

AnimatedLineThrough

The AnimatedLineThrough widget is ready to use out-of-the-box, just like any other declarative widget. It expects two arguments: duration and isCrossed.

Here's an example using Text as the child widget:

AnimatedLineThrough(
  duration: const Duration(milliseconds: 500),
  isCrossed: _isCrossed,
  child: Text('Our text'),
);

duration specifies the duration of the animation, while isCrossed is a boolean that indicates whether the text should have a line through effect or not.

AnimatedLineThroughRaw

The AnimatedLineThroughRaw widget gives you more control over the line animation. It expects an Animation<double> object for line progress and a color for the line.

Here's an example using AnimationController and Tween to control the line animation:

late final _controller = AnimationController();
late final _animation = Tween(begin: 0.0, end: 1.0).animate(
  CurvedAnimation(
    parent: _controller,
    curve: const Interval(0, 0.7, curve: Curves.easeInOut),
  ),
);

AnimatedLineThroughRaw(
  crossed: _animation,
  color: Colors.black,
  child: Text('Our text'),
);

Text Fields issues

The workaround for TextField (and TextFormField) is much more complex than the workaround for simple Text widget. The problem is that those widgets doesn't use RenderEditable directly, but have many widget before that.

So, instead of simple get RenderEditable we need to find it through render-tree, try to find RenderBox above it and then count everything we need to draw a cross line.

Because of that cases with text fields is not work really well. You still can find a bugs and wrong calculations.

I hope this helps! Let me know if you have any further questions or issues. 🧡