BMI Calculator in Flutter – Part 4 – Static Layouts

Hello there! After a long delay, I am coming back to you with a new BMI Calculator post. In this one, I will go through some layout changes I needed to make to update old Johny Vino‘s design to the new version. Although most of the things here are quite straightforward, I want to invite you to this part as well, so that almost all of the development will be available for you too. In this post I will only show relevant code snippets, if you are interested in how I placed them in the whole app, check out the repository.

Okay, let’s start with comparing designs for previous and current version:

Old design

And the current state of the app looks like this:

Current state

What we need to do:

1. Add app bar
2. Add summary row
3. Change card headers
4. Change fonts
5. Replace switch

App bar

First thing I wanted to do is use material design’s AppBar. Since our app is meant to be close to pixel perfect and our app bar is a bit larger than the material one, we won’t use AppBar widget but we will create our own one. However, we still want to use Scaffold‘s appBar field, because why not. To do that, we need to pass PreferredSizeWidget. The easiest way is to use PreferredSize which implements PreferredSizeWidget:

What’s worth mentioning is how we should calculate the height of the widget. Since we are not using Material’s AppBar which was handling the status bar by its own, we have to take it into account by ourselves. To add status bar height to our app bar, we will use MediaQuery.of(context).padding.top. It will make sure that we are not drawing behind the status bar icons or the notch.

screenAwareSize is a method used for scaling design specs to device’s screen, so that it will look very similar on all types of devices.

Now let’s just get into the code:

So what’s happening:

• We are using Material widget so that we can add a small elevation. Elevation will cause a widget to be above the background, therefore, it will cast a shadow.
• The AppBar’s content is a Row packed into a Padding. The row contains two elements: the label and the icon.
• Since I don’t have the actual icon yet, I’ve put a placeholder there. This way we can see that something is there to come and we will not forget about it before the release. We will talk more about Placeholder later on.

When it comes to the label and emojis, things get a little tricky:

• I didn’t manage to put an emoji into the code just by copy-paste (damn you IntelliJ), so I had to paste the Unicode (you can get it from here).
• But… in the texts, we can only use 4 digit unicodes, so we have to split one 5-digit symbol into two 4-digit ones (converter).
• To add a skin tone, we need to place an emoji and the skin tone side by side.
• Unfortunately, there is a bug, causing emojis to disappear when using bold font weight. To avoid it, we are using RichText widget and applying bold weight only to the text.
• To make things even harder, there is another bug on iOS, preventing us to apply skin tone there. The least we can do is check platform and apply skin tone only for Android devices.

The result: 

Android

The app bar itself looks nice, but the status bar’s color is not what we wanted, it should be white with dark icons. On iOS it is like that on default so we only need to handle Android case. To fix that we will change SystemUiOverlayStyle in app’s main method:

We have also changed the navigation bar color so that it better matches the whole app:

Android

Summary row

Moving fields to the input page

Now let’s move to the second part which I call “Summary row”. That widget is meant to show the values chosen by a user. To do that, we have to have access to those values, unfortunately, while creating gender, weight and height widgets I designed them to be StatefulWidgets and store their values by themselves.

Let’s take a look at the HeightCard widget:

It received initial height in a constructor and after that, whenever a user changed the height, it simply called setState to update the height. Now let’s see how it will look like if we want to move that height field one level above:

Now the HeightCard widget doesn’t store any values so it can be Stateless. It has the second parameter which is a function that should be called whenever value has changed. We only need to replace setState method with onChanged method and that’s it. We need to do it for all 3 “Card widgets”. Then let’s update input page:

Visually, nothing changes, all the widgets render exactly the same. However, right now we have access to all BMI parameters at any time and we can pass them to InputSummaryCard. 

InputSummaryCard Widget

The widget itself is pretty straightforward. It will take 3 values as parameters: gender, weight, and height. The root widget will be a card, it will contain only one row. Row structure should be the following: text - divider - text - divider -text. Since we want the texts to take the same amount of space, we will wrap them inside Expanded widgets. I guess that’s everything worth mentioning. Let’s look at the code:

And now let’s look at the result:

Summary Card

Card title

Next step is to change card titles. Luckily, the view is very simple. All we need is a column with 2 elements: row and divider. The row consists of two texts with different styles. To make them aligned to left and right we will use MainAxisAlignment.spaceBetween. I guess the code explains it the best:

It results in such look:

Card titles

Fonts

Now it’s time to change the font to the one I got from my awesome designer Johny. First, we need to put downloaded font files into the project folder. In my case, it will be fonts directory:

Then we need to update pubspec.yaml file where we link font weights to actual files:

Then the only part left is to use fontFamily specified in pubspec.yaml in the ThemeData:

The changed font might not be noticeable at a first glance but believe me, it has changed 🙂

Slider placeholder

When I started this app I didn’t know about Placeholder widget. Placeholder is a great widget for, well… holding the place in a screen. If there is a widget, that you know it will be there but you haven’t implemented it yet, you can put a Placeholder to indicate it will get there sooner or later. In my case I will put one on the bottom to indicate slider which will be implemented in the next part:

I have also done other minor changes to the app like greying out gender icons that were not selected or changing the margins, however, it was waaay too boring to put it into the post, so I guess we need to finish here :).

Let’s compare what we got with the design:

The final result

And that’s it! ?

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

Cheers ?