BMI Calculator in Flutter – Part 6 – Custom Slider

by | Oct 29, 2018 | BMI Calculator, Flutter | 0 comments

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:

What happened here we are using constraints from LayoutBuilder to calculate _pacmanMinPosition and _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.

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:

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

You can find the full code for this stage on GitHub.

Cheers 🙂

🔥 BMI Calculator 🔥

 

Be sure to check out the other posts in the series!

Marcin Szałek

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!

Thanos Snap Effect in Flutter

Have you ever woken up and thought “How awesome would it be to create Thanos snap effect in Flutter”? Probably not. Well… following Google’s Easter Egg I did. 🙂 And I’ve found out that no one did it in Flutter yet so why not give it a try! In this post, I will explain how I created a Thanos snap effect coming from Avengers: Infinity War movie. Enjoy 🙂

Advanced transitions – UI Tickets Challenge

As developers, we have always get into situations where the designers require some fancy transitions which look awesome on the design but are extremely difficult to implement. Being Flutter developer makes it different, makes it fun because we have tools to do it! To prove it in this post, I will continue implementing awesome Buy Tickets design by Dldp and add bottom sheet transitions!

Parallax effect in PageView – UI Tickets Challenge

Parallax effects are awesome. Having elements move in the different speed during scrolling can easily provide the unique feeling for the application and they can make the user think that your app is well-polished. In this post, I will try to achieve parallax effect using PageView, Transforms, Alignments and some basic math.

Share This

Share This

Share this post with your friends!