Beautifying it up

Eating the dots

You have probably noticed, that even though Pacman is sliding above the dots, he doesn’t eat them. We need to change it. What we will do is add a curtain which will be moving alongside Pacman and it will cover the dots.

Notice that we are handling an option when the constraints are equal to 0. Sometimes (mostly in release mode) the constraints are not there yet in the first build, we want to cover that case so we can avoid weird frame bug at the start. The curtain is just a container using the same decoration as slider’s background. It takes all the place from left to Pacman’s location so that when the Pacman moves, the dots behind him disappear providing an illusion of eating.

Resetting position

At this point we can drag the Pacman however we want, I think it’s a good idea to reset his position if the slide ended before the center and to animate to the end if the slide ended after the center. First, let’s focus on resetting.

We have added onHorizontalDragEnd callback, so that whenever drag ends, we can calculate if it ended before or after slider’s center and then act accordingly.

Animating forward

Now let’s focus on animating the slider forward so that user doesn’t have to drag the Pacman way to the end. First, let’s take a look at the code:

Ok, so let’s break down what happening here:

We create pacmanMovementController in initState remembering to dispose it in dispose method.

in remembering to dispose it in method. Our pacmanAnimation is a Tween between Pacman min and max position. Since we cannot access those in initState method, we are doing it in build method. We just need to check if we have access to the max width and if the animation hasn’t been initialized earlier.

is a between Pacman min and max position. Since we cannot access those in method, we are doing it in method. We just need to check if we have access to the max width and if the animation hasn’t been initialized earlier. We add a listener so that on every animation change, _pacmanPosition will get updated.

will get updated. We are also checking if the animation has been completed, to have some sort of callback when the user actually finished the process.

In our case, we will just reset the Pacman with a 1-second delay.

We update _onPacmanEnd method so that if the user stopped dragging over the half, we animate the controller from the current position to the end.

Click to submit

The last minor update we will do is allowing the user not to drag the Pacman, but simply click on the slider. To do that, we will just wrap the main Stack with GestureDetector and handle onTap event:

And that’s it!

Our awesome Pacman slider can be now dragged or clicked to submit the input:

If there is anything unclear or there is something I did wrong, please leave a comment and tell me about it!

You can find full code for this stage in here and other posts related to this project in here.

Cheers :)