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 🙂
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.
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 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.
Height picker widget
The interesting part of this task is that we will have to work a lot on widget’s actual height. To view that height, we will use
LayoutBuilder gives 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:
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
maxHeight incremented by 5.
What we did:
- We used
Stackas 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.generateto create a list of texts displaying each label.
- We used
Alignment.centerRightso that our labels will stick to the right.
- We used
IgnorePainterwhich 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
Columnand placed labels inside it. We specified
MainAxisAlignment.spaceBetweento make the labels distribute evenly but also to not have any unnecessary margins on the edges.
You can notice, that I am using unknown things like
labelsTextStyle. They are coming from
height_styles.dart file where I store all reusable values, colors, etc.
The result looks like this:
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
Positioned widget which will specify the slider’s position from the bottom. To do that we will need to do following things:
drawingHeightwhich is the distance in pixels between the middle of the lowest label and middle of the highest label.
drawingHeight, we can calculate
pixelsPerUnitwhich will represent how many pixels are there between two units of height.
- Last, we can calculate
sliderPositionwhich 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
Not much to look on, right? Let’s look at what’s inside.
It appears that drawing 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:
The circle is a simple
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:
The only part left is a label. I don’t think there is anything worth explaining here:
And that’s the whole slider:
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 bottom margin. Then we need to align the image to the bottom and that’s it.
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.
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:
- Get the global position of gesture from
- Take the
- Parse global position to a local one.
- Take the
ycomponent of the offset. We need to remember that it is increasing down the screen (top = 0.0).
- Since the local position is connected to whole
HeightPickerwidget, we should subtract top margin and half of the label size. This way the maximum height value (190) can be our reference point.
- 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.
- Subtract the number of units from the top from the maximum height.
- Normalize the obtained value, so that it is between the maximum and the minimum height.
- Look how the taps are handled 🙂
Now we can add handling vertical drags. We will use two callbacks from the gesture detector:
onVerticalDragUpdate. Let’s see the code first:
When the drag starts, all we need to do is update the new height and save that height and y-offset in HeightPicker. Why do we need that? So that when the drag updates all we need to do is check the difference between the start offset saved on start and the update offset. Then calculate the new height and update by
And that’s it!
As you can see, handling gestures is super simple as long as you are not afraid of some very basic math 🙂
You can find full code for this part here.
Previous posts on BMI Calculator are available on my blog here.