Designing With Flutter
If you have been reading these blogs since the beginning, you might’ve noticed that I had an interest in mobile design, especially using Google’s relatively new software development kit, Flutter. Something about using the super fast “hot reload” to see your changes immediately and the material design is why I wanted to learn it earlier. As you can guess, I went ahead and chose a Flutter app for my next entry.
The app mentioned is a worldwide COVID statistics viewer; the app features a home screen that displays the daily cases/deaths/recovered along with a navigator that allows you to choose any country:
The problem I have with this is that, the top navigator bar (which opens up a scrollable country picker) looks like a search bar. However, you do not actually type anything. When first using this app I found it confusing, it looks like a scrollbar but behaves like a totally different widget. Furthermore, the only way you can open up the country picker was by pressing on the search icon (the magnifying glass) — clicking the bar itself does nothing. To fix these issues, I thought I would change this to make the whole thing clickable and to change the rounded edges to something more traditional to make it intuitive.
So I submitted my issue to fix the problems I had with the design. I was given the go ahead by the project author and I went to work experimenting with the different Flutter widgets. Luckily, Flutter and Material Design both have well written documentation, along with “cook book” code to get you started. In the end I came up with this:
Though it is a small addition, I was quite pleased with myself. What I added was an app bar to display the app name “Covid World Stats” and moved the country name into the navigation bar where it belonged. Secondly, I changed it so that the whole navigation bar is entirely clickable.
With these new changes I submitted a pull request with the changes I made. However, unlike my last PR this one didn’t immediately get the go ahead. It just simply wasn’t what he was looking for: he told me that it was intentionally designed that way to be modern since the app bar looks too outdated, which I can agree was true. I sent him another message asking what specifically he wanted me to change and what to keep with the updated design, as of today he still hasn’t replied. I think I should’ve just made another commit and sent another message to see what he thought.
All things considered, I am quite happy that I finally got to try and contribute to a more ambitious project and mess around with Flutter. Though, I think my design skills need to be improved, and until then I think I will stick to debugging issues as I feel that is where I shine.
