BMI Calculator in Flutter — part 3 — Height
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.
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 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
. 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:
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
withAlignment.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 specifiedMainAxisAlignment.spaceBetween
to 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 marginBottomAdapted
or labelsTextStyle
. They are coming from height_styles.dart
file where I store all reusable values, colors, etc.
The result looks like this:
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 Positioned
widget which will specify the slider’s position from the bottom. To do that we will need to do following things:
- Calculate
drawingHeight
which is the distance in pixels between the middle of the lowest label and middle of the highest label. - Having
drawingHeight
, we can calculatepixelsPerUnit
which will represent how many pixels are there between two units of height. - 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 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:
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:
SliderLabel
The only part left is a label. I don’t think there is anything worth explaining here:
And that’s the whole 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 bottom margin. Then we need to align the image to the bottom and that’s it.
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:
- Get the global position of gesture from
tapDownDetails
. - Take the
RenderBox
from context. - Parse global position to a local one.
- Take the
y
component 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
HeightPicker
widget, 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 🙂
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:
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 widget.onChange
method.
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.
Part 4 of this series is now available at https://medium.com/flutter-community/bmi-calculator-in-flutter-part-4-static-layouts-fe1a63124143
Cheers 🙂
Originally published at marcinszalek.pl on September 12, 2018.