In the fall of 2021, we had the opportunity to bring our idea for Metriport to life using Flutter/Dart. If you haven’t heard of it already, Metriport is a privacy-focused personal wellness app available on iOS and Android that helps you quantify your life and gain actionable insights into your wellbeing.
When we started building Metriport, we knew nothing about Flutter. Despite this, we were able to design, develop, and launch the MVP for our product from scratch in about 12 weeks. We learned quite a bit along the way, and wanted to share our journey with anybody curious as to how we did it!
Here’s how we spent 12 weeks of time building Metriport using Flutter, with a team of 2:
Learning & Prototype: 3 weeks
Before writing a single line of code, we had to decide on how we’d bring our idea to life in a such a short period of time. We knew we wanted Metriport to be cross platform, and so we narrowed down our choice for an app development framework between React Native and Flutter. Having experience with JavaScript, React Native initially seemed like the obvious choice. However, we decided to hedge our bets on Flutter as it seemed like a more robust solution to our needs, even though we had to learn the framework from the ground up.
Initially, we tried to hack together a prototype of our app with extremely limited knowledge of Flutter fundamentals, and quickly found this to be a mistake (StreamBuilder, ChangeNotifierProvider, Context… what??). So, we decided to bite the bullet and take a Flutter/Dart course on Udemy, which turned out to be a great time investment. After spending around a week blasting through the course, we were equipped with the fundamental knowledge needed to bring our prototype to life. Although the prototype was basic, you can see it laid the groundwork for what Metriport would eventually become:
Pro-tip: the most confusing part of learning Flutter was the different options for implementing routing/navigation. TLDR; if you want the navigation to work well on both mobile AND web, you’ll need to use the new Router API. Understanding the new API takes a bit of time to absorb all the new concepts. We found going over this navigation example provided by the Flutter team on GitHub a great way to solidify the concepts and best practices.
MVP Wireframes: 1 week
Once we had a prototype in our hands, we set out to get feedback from friends and iterate on our design in order to map out a plan for our MVP. We stepped away from development for a week, decided on what features would be included in the scope of work, and designed wireframes for every single screen using Basamiq Cloud. Getting feedback from others was essential in this process, as we ended up scrapping/modifying certain features after gaining insight as to what made the most sense from a UX perspective. When it was all said and done, we were left with a few dozen Wireframes that we used as a roadmap for t
