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
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
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
Materialwidget 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
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
RichTextwidget 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 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:
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
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:
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
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:
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:
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
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
The changed font might not be noticeable at a first glance but believe me, it has changed :)
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.