BMI Calculator in Flutter – Part 3 – Height

by Sep 12, 2018BMI Calculator, Flutter7 comments

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 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 LayoutBuilderLayoutBuildergives 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:

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!

The design

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 🙂

🔥 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!

SY Travel UI Challenge

SY Travel UI Challenge

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.

Thanos Snap Effect in Flutter

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

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!

Share This

Share This

Share this post with your friends!