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
What happened here we are using
LayoutBuilder to calculate
_pacmanMaxPosition. This way we can always normalize
_pacmanPosition to be in the range we want.
. . .
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.
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.
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
initStateremembering to dispose it in
Tweenbetween Pacman min and max position. Since we cannot access those in
initStatemethod, we are doing it in
buildmethod. 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
_onPacmanEndmethod 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
GestureDetector and handle
And that’s it!
Our awesome Pacman slider can be now dragged or clicked to submit the input:
🔥 BMI Calculator 🔥
Be sure to check out the other posts in the series!
Founder of Fidev
Flutter enthusiast since Alpha release in 2017. Believes that sharing is caring, which lead him to start a technical blog dedicated fo Flutter in its early days. Loves to see beautiful designs become real apps and is willing to help make it happen. Enjoys sunny beaches far from home.
Join the newsletter!
Join the newsletter to keep track with latest posts and get my special Widget to animate views' entrances without any hassle for FREE!
Check out other posts!
In this post, I’d like to share with you how to achieve a water drop effect in Flutter. Why would you spend your time learning such skill? Well, I have no idea but it looks cool so let’s get started! 😀
In this post, we’re going to learn how to create probably the most useless effect on this blog. 😀 The design is named 3D CSS Kinetic Type Poster. It was created by Pete Barr, who shared the design on dribbble and the front-end implementation on codepen. Let’s see if we can do it in Flutter as well!
Check out the videos explaining how I implemented awesome SY Expedition Travel animation by Anton Skvortsov! In the following videos I will show you the whole process of creating a UI challenge in Flutter.