Hi again! It’s time for another part of BMI Calculator in Flutter, a series in which I implement Johny Vino‘s awesome BMI Calculator design (if you didn’t see previous posts, you can find them here). This time I will go through the implementation of height picker using GestureDetector. Let’s see how it goes ?

Design

First, let me show you the original design:

It looks nice, doesn’t it? However, during the development process with Johny, we agreed to make some changes to the design. In this post, I will try to temporarily combine both old and new design.

The current state

Setup

At first, we need to add a title to the card. We will use CardTitle widget created earlier and put it inside HeightCard widget:

You can notice that I am using screenAwareSize method. It is a method I created to have sizes of widgets adapt to screen size. You can read more about it in the first post of the series.

Card title

Height picker widget

The interesting part of this task is that we will have to work a lot on the widget’s actual height. To view that height, we will use LayoutBuilder. LayoutBuildergives us access to view constraints so that we can use the widget’s height.

Another thing worth mentioning is that we want the HeightCard widget to be the one which stores actual height. To cope with that, we will pass the height to the HeightPicker and listen to changes with ValueChanged<int>. This way we won’t get lost on where is the actual height stored.

Placement of HeightPicker:

Actual HeightPicker:

Labels on the right

Let’s start with displaying labels on the right. We want them to be evenly distributed and to display values from minHeight to maxHeight incremented by 5.

What we did:

• We used Stack as a main widget’s container. Stack will be handy later on when we will have more widgets to display.
• We specified how many labels we want to display. The assumption is that the total number of units is dividable by 5.
• We used List.generate to create a list of texts displaying each label.
• We used Align with Alignment.centerRight so that our labels will stick to the right.
• We used IgnorePainter which causes the widget to ignore all gestures on it. It will be useful later on but I’d like to add it now so that we won’t have to come back to labels in the further process.
• We used Column and placed labels inside it. We specified MainAxisAlignment.spaceBetween to make the labels distribute evenly but also do not have any unnecessary margins on the edges.

You can notice, that I am using unknown things like marginBottomAdapted or labelsTextStyle. They are coming from height_styles.dart file where I store all reusable values, colors, etc.

The result looks like this:

The labels

Height slider

Next widget we should develop is HeightSlider which is the indicator of the selected height. It contains 3 elements: label, circle, and line.

But first, let me explain how the slider will be placed. We will use Positionedwidget which will specify the slider’s position from the bottom. To do that we will need to do the following things:

1. Calculate drawingHeight which is the distance in pixels between the middle of the lowest label and middle of the highest label.
2. Having drawingHeight, we can calculate pixelsPerUnit which will represent how many pixels are there between two units of height.
3. Last, we can calculate sliderPosition which defines where should the slider be placed.

Let’s see the code of how HeightSlider will be placed:

And now we can look into actual HeightSlider code:

Not much to look on, right? Let’s look at what’s inside.

SliderLine

It appears that drawing a dashed line is not as trivial as it sounds. Luckily, we can create a Row with 40 Containers, every second one colored in blue. With proper alignment and size this is what we got:

Slider line

SliderCircle

The circle is a simple Container with BoxShape.circle and an Icon inside. The size is coming from height_styles.dart and is equal to 32.0. If we add this code to the slider, we end up with this:

Slider circle

SliderLabel

The only part left is a label. I don’t think there is anything worth explaining here:

And that’s the whole slider:

The slider

Person preview

Now let’s add a person image that will scale with the slider. Since we have access to the asset and we already can calculate the position of the slider, this task should be easy. All we need to do is draw an svg image with the height equal to slider position plus a bottom margin. Then we need to align the image to the bottom and that’s it.

Person image

Gestures

And now it’s time for la grande finale: picking the height. What we need to do is handle taps and vertical drags to allow the user to change the height. While doing that we have to detect the position of the events so that we can map it the actual values. We will use GestureDetector widget for that.

Taps

Unfortunately, GestureDetector’s GestureTapCallback, which is used as onTap parameter, does not provide information about the position of the event. Because of that, we will use onTapDown which provides GestureTapDownDetails. Let’s take a look into the code:

Now we can break down how we map position to the height value:

1. Get the global position of gesture from tapDownDetails.
2. Take the RenderBox from context.
3. Parse global position to a local one.
4. Take the y component of the offset. We need to remember that it is increasing down the screen (top = 0.0).
5. Since the local position is connected to whole HeightPicker widget, we should subtract the top margin and half of the label size. This way the maximum height value (190) can be our reference point.
6. Divide the number of pixels from the top by the number of pixels per unit, so that we have the number of units from the top.
7. Subtract the number of units from the top from the maximum height.
8. Normalize the obtained value, so that it is between the maximum and the minimum height.
9. Look how the taps are handled ? 

Vertical drags

Now we can add handling vertical drags. We will use two callbacks from the gesture detector: onVerticalDragStart and onVerticalDragUpdate. Let’s see the code first:

And that’s it!

The result

As you can see, handling gestures is super simple as long as you are not afraid of some very basic math ?

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

Cheers 🙂