Runway: What I learnt while building a full-fledged Flutter Application (PART 1)

Dhruvam Sharma
Flutter Community
Published in
7 min readJul 2, 2020
An old copy of the design art-boards for Runway

Fear of judgement is a big bottleneck on the road to improvement and achievement. While some are confident, I, on the other hand, am a little pushed behind a continuously breaking wall of judgement.

This article is for people learning Flutter and for people like me who have a fear of judgement. If there’s even a single person who is affected by it, I tell you this:

There will always be a bad judgement waiting for us. This life, that we have received, let us make sure we pour our heart and energy out and smile a little when we build our small or big, but beautiful projects. Let’s smile now.

Releasing a project out in the world for people to test and play with, is a scary thing. But Flutter has helped me get into my element. Drawing and designs getting implemented on the screen have helped boost my confidence. During this one month of building this application, I learnt a lot more about the Flutter framework in detail.

Link for Application on Playstore

Before you read, thank you for spending a few minutes of your time with my bog. I realise how important your time is and so I am going to condense the blog with as much knowledge as possible 🙏🏿

This will be a 3 instalment blog. This is the first instalment to this series.

  1. Runway: What I learnt while building a full-fledged Flutter Application
  2. Runway: Designing parts of a fully functional Flutter Application
  3. Runway: Use-case Study of a fully functional Flutter Application

TLDR: The app looks like this now:

Why did I build this project?

After searching out hundreds of task management applications on Play Store and failing miserably, I decided to make one of my own. So this project is based out of a need. I started my year with listing out 20 yearly goals and one out those 20 was to build a fully working need-based productivity app. And my need was a better task-management.

Also, at my workplace, I am building an application for a portal that already handles more than 25 Million MAU (Monthly Active Users). Building out an application like that needs practice, patience, experience and much more. So I am trying to gather experience from whatever place I can.

What does the Application do?

I always wanted a clutter-free Task Management app that is more than just simple Task Management. Do you get that? I’ll explain it. These are the points I listed down which were must-haves.

  1. The application should have a clutter-free design.
  2. Assign some kind of weight to the tasks for better prioritisation.
  3. Add labelling to the tasks that I add so that I have a clear view of what this task is all about when I look back on it later.
  4. Limit the number of tasks that I can create per day, making me aware that I am planning my day well.
  5. View only 3 days work, Yesterday, Today and Tomorrow. I don’t want to view more work that I feel stressed or burdened. But just enough to make me aware that I am progressing well.
  6. View statistics of how I am performing. I wanted to see how I am performing per week so that I can make sure that I am working well with the app.
  7. This one is for all of you. I added some secret puzzles inside the application that we can solve. The puzzle is hidden inside the app. One can see it only by tapping somewhere inside the app. When you find out, you will get the puzzle inside the settings.

Extra features I added

  1. For the platform to be easy to use, I added Speech to Text. So that you just speak whatever you want to add to the list, and it will be added. I wanted the platform to be as easy as possible.
  2. Text Recognition so that, if anybody uses a pen to draw, it is easily accessible for them too.

Vision Boards

As per Wikipedia, here is what a vision board is:

A dream board or vision board is a collage of images, pictures, and affirmations of one’s dreams and desires, designed to serve as a source of inspiration and motivation, and to use the law of attraction to attain goals

I decided what I needed for yearly goal management was a Vision Board. I have tried physical vision boards and I am still using them. I keep the board where I can see it almost every time I sit for work.

Then I decided that a better place would be to add it to my phone. And then I wouldn't have to worry about changing the pictures or removing them. Everything could be done in a single place. And I could set it as the background so that I have more visibility and it completely embeds into my subconscious.

Difficulties I faced while building the project

While there were endless problems I faced while building the application, but a few that remains at the top list were (In no particular order):

Design Process

Thinking about the Design of the application, I wanted a clutter-free design but it wasn’t coming easy. I had to fill in the information from the app and the information that the user adds. So I decided to go with instinct and go for the refactoring later. After I had listed down what I wanted from the app, I started the design process. I created as many scenarios I could think of. I designed for a week and then stopped my self from refactoring the design artboards. I stopped because I don't want to spend much of my time refactoring early on in the process.

I would surely mention one page on Instagram that I follow for design inspirations sometimes: UI Bucket

Fonts

I think while choosing fonts, I was lost. I tried a few options.

  1. Google Fonts
  2. Fonts

And to say I was lost in just these two, would be an understatement. Picking up font is in itself is a huge task. People can lose interest very easily if the fonts are not good enough or match the theme of the app.

I wanted to have something unusual but something that appeases to the eye. I started with Baumans as the font. ButI left the font in the end and decided to go with 2 fonts, namely:

  1. Anton
  2. Belota Text

And when fonts were done I decided to build a text theme. I took help from the Material Design Guidelines.

Colour System

Call me unmanaged but I changed the colours of the app midway. Because I had decided to build a central theme of the app, changing colours or fonts wasn’t difficult at all. I wanted a dark-theme app that isn’t too stressful on the eyes that I can open even with the lights off.

I wandered around many blogs to take colour inspirations. A few of them are:

  1. Muzli
  2. UX Collective
  3. Material Design
  4. TMDesign

Branching and commit message

When I started building the app, I decided to follow some of the good patterns. I decided that I will give a good commit message as much as I can.
So this is the pattern I followed:

feat(module_name): commit message in detail.
Here feat means feature. I could also use
fix(module_name): commit message in detail.

This pattern helped me understand the work I did whenever I rushed back into my commit history for some bug fixing.

Learn when to stop

While building this application, I learnt a lot, apart from learnings from my difficulties. I worked a tiny bit while building because I had my job too. I worked from 10:00 AM to 7:30 for my company Gamezop and from 10:00 PM to 3:00 AM while building this app.

But the most important thing I learnt from this whole process was to learn when to stop. Earlier I used to work non-stop. Sitting in a chair while thinking or while coding or while designing. I decided to roam a little bit around when I am thinking and thinking helped me a lot to give shape to my ideas. While I was thinking I started talking to myself out loud. How to design this or what limit should I add on the tasks.

I decided to give my Saturdays completely to this project and keep three halves of my Sundays with my self. I watched many series during that time or tried some new dance choreography. Dance helps me take my mind off of the work and make me smile. I am sure Dance or Music does that to you too.

This part was about the process of developing the app. If I could help you give confidence to even a single person, don’t hesitate to give claps to this article. Hope you like this one.

Happy bugless coding 😁

Oh yes, we can clap more than 1 time!

https://www.twitter.com/FlutterComm

--

--

Dhruvam Sharma
Flutter Community

Google-certified Android Developer @Unikon. Android Geek. In love with Flutter. Blockchain Explorer. Dancer. 🕺 Reader. Coffee Addict. 😍