BMI Calculator in Flutter – Part 6 – Custom Slider

Hi guys! Welcome to part 6 of BMI Calculator in Flutter where I go through implementation of Johny Vino‘s design. Recently we have implemented animation which indicates user how to use Pacman slider. In this post, we are going to code actual sliding behavior using GestureDetector. Our goal is to allow the user to move the Pacman from left to right like shown in the image. Let’s get to it!

Preparing Stack widget

Since we are going to manually change the position of the Pacman, we cannot use simple Row like before. I think that the best choice here is the Stack since it gives us full control over how we place the Pacman using Positioned. But first, we need to extract animated dots logic outside the PacmanSlider before it becomes too messy, if you are interested in how AnimatedDots widget looks like, check out the previous post or full code.

So, we are using Stack and have 2 children so far. Notice the order inside the stack, having _drawPacman last means that if the Pacman and icons have the same position, the Pacman will be rendered on top of them and that’s what we want to happen. We are also using _pacmanPosition to specify how far from the left should the Pacman be positioned.

Handling user gestures

At this moment _pacmanPosition has a fixed value. Let’s wrap it inside the GestureDetector on handle horizontal drags so that we can change that value.

The code is very simple, when the user horizontally drags the Pacman, we change its position by the number of pixels he dragged. Now, we can play with Pacman’s position:

Maybe you have noticed that the Pacman can now go even over the last dot, that is because we are not restricting minimum and maximum values of its position. The first one is pretty simple, it will be just the left margin. The problem is with the right one, by default we don’t know the width of the widget, we will need to get it by using LayoutBuilder:

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 the 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 the 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’s happening here:

• We create pacmanMovementController in initState remembering to dispose it in dispose 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.
• We add a listener so that on every animation change, _pacmanPositionwill 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 Stackwith GestureDetector and handle onTap event:

And that’s it!

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