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:
And the current state of the app looks like this:
What we need to do:
- Add app bar
- Add summary row
- Change card headers
- Change fonts
- 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 smallelevation
. 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:
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:
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:
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 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:
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:
And that’s it! 🙂
You can find full code for this part here.
Previous posts on BMI Calculator are available on my blog here.
Cheers 🙂