Saturday, March 21, 2020

Learning Flutter - Part 2 - Configuring and Designing a Prototype

In my last post, I went over the start of my Flutter learning journey.

Since then, I've installed the Flutter SDK and VS Code, watched the tutorials over at and started into a Udemy course on Flutter.

A few initial thoughts on the language are that first it has annoying layers of braces and brackets ({}{[[},,]]) but if you can get past that, it is a C-like language so isn't too difficult to get started with. On the Flutter SDK, the hot reload feature is useful when it works and the tools in VS Code in terms of formatting and looking up definitions of functions are quite useful.

Learning a mobile app is best demonstrated by actually building an app and one of the first things in building an app is to draw it out on paper. What is below is a very rough drawing (that was a collaboration with my 7 year old). The point is not to make it pretty but to quickly sketch out the most basic design.

Deciding what is enough for the MVP (Minimum Viable Product) and for a prototype is also key. For this app (a tool to show the cost - financial and carbon cost - of driving), the prototype would need to calculate costs based on distance travelled as measured by GPS. The prototype will not to allow for any parameters (type of car, metric/imperial, saving, manual override, etc.) but will just provide the basic functionality of providing a cost for an 'average' car.

With that, the next step is to create a mock-up in the app of what it will look like. It's not too difficult to make something that doesn't look too bad (running on a simulator of an iPhone 8 below):

Going forward, the mock-up will need to be made updatable (it is static now), figuring out how to pull data in from the GPS to calculate distance travelled, then setting some parameters (hard coded at first) to calculate cost, finally to update them real-time when the app opens. At that point, the app will be usable (though not useful). 

No comments:

Post a Comment