Complicated solution, simplified

Solving project’s Flutter animation complicated code, with a simple solution

If the solution to a simple problem is complicated, it’s probably wrong

Something that resonance with me and I agree with, at a great extent. I believe that we get so stressed up on a particular problem that we think it is impossible to figure out a solution, yet a simple solution that is.

The particular problem:

The infamous jumpy inconsistent wave

I was faced to fix the issue of the jumpy screen and from my investigations (and many refactoring), I found out that the selector (the coral teardrop shape) was the one that was affecting the inconsistent landing of the selector and the random rendering of the waves.

The current solution:

It's pretty complicated

I thought to myself…

This is just a simple animation: when a user drags down, it will slide back to its original position.

As a professional developer, I googled draggable selector, onVerticalDragUpdate, onVerticalDragEnd (was using a gesture detector to create the animation). And I found this article which helped me in the quest of the solution. Thanks Marina Kuznetsova!

Thus, I try to recreate the, I called it, the clingy-ex selector (because she always bounces back). My first attempt was kinda close:

Selector is always bouncing from the 1st position

Here is the code:

I wasn’t sure why it was saved since setState() would just saves and changes on the fly. Therefore, I tried experimenting and some how this solution works:

void _verticalGoesBack(DragEndDetails details) {
    animationController.reset();

    animation = Tween<double>(begin: _barOffset, end: 300.0)
        .animate(animationController)
          ..addListener(_animateSelectorBack)
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              animationController.removeListener(_animateSelectorBack);
            }
          });

    animationController.forward();
  }

Now it sticks to the number.

From my guess, the listener saves the initial position that was dragged back. Thus, from removing the listener and initialising the listener, will be reinitialised with every new drag. Success!

Taking a step back and realising the animation is simple, I recreated it in my own ‘playground’ file and managed to do it and implement it to the app.