Why I chose flutter to build the coolest Time Tracking app

It was such a pleasurable journey since I started developing mobile applications with Flutter.

On a calm February evening back in 2018, I closed my laptop after I finished my 9–5 job, and just before heading home, I opened Medium to entertain myself with some articles, when I stumbled upon a post that shifted my career dramatically.

Announcing Flutter beta 1: Build beautiful native apps

The title above was the title of that article.

For almost three full years I have been developing apps exclusively with Flutter, ditching Android for good.

Disclaimer: I will not talk about why Flutter is Better than native or vice versa

Let me tell you a little bit about the app

Motivation behind the app idea

By the end of 2020, I was at home sitting at my desk (Because thank you 2020), thinking about a way out of my current job boredom. I mean don’t get me wrong, I love my job. But job boredom is something very common, especially working home by yourself.

So I thought to myself… “What if I search for an app that actually motivates me to work more”. And that I did.

To my surprise, I didn’t find any app that suites my style. But it didn’t take me much to realize that I could make such an app!

I mean why do we work? For recognition, self-satisfaction, having a purpose, and most importantly MONEY! To put food on the table! And since I’m a freelancer (Most of the time) I tend to lose track of what customers or companies owe me…

Again, I thought… ( I do that a lot ) “What if I had an assistant that keeps me posted about my working status with each passing working second”. Who wouldn’t want a professional assistant!

I was too lazy to do it… But I kept it in my notes.

A month after, I started implementing the idea into reality. I opened my design tool (I use Sketch App) started with some sketches, then opened my IDE to code the stuff.

That’s the little story of Belion!

Why Flutter

As you already know Flutter is a powerful tool for UI and smooth animation. There are tons of different time tracking apps on the stores, but I needed something different, something beautifully designed.

The main character “Belion”

Firstly, let’s talk about the main character “Belion”, your assistant. Belion is uniquely designed to add a touch of joy and comfort to the app’s environment.

Belion Idle animation

Belion is made using Rive or what used to be Flare. An SVG animation tool for your Flutter apps and games.

The movement I made with Rive is pretty simple. It blinks and breathes.

The movement in the app is a little more complex since it reacts to your taps and screen changes. Here’s exactly why Flutter is very powerful, I did every Belion movement inside the app in a SINGLE controller! with less than 15 lines of code.

Here’s Belion movement first hand: (Sorry for the bad quality)

Belion in-app animation

The startup screen

The startup screen is so simple, yet it gets your attention immediately with smooth calming animations.

The flow is step-by-step registration is designed to walk you through the app and to give a small glance at what the app is about. Without cluttering text fields, you will have some time to think about each step and how important it is to the process. It goes as follows:

Belion startup

Flutter provides great tools for such transitions. You guessed it!

Pageview! with some tweaks for automatic page transition.

The secret behind the cool animations

In Flutter, there are 3 main ingredients for a great looking app.

  1. Stack & Positioned
  2. Transform
  3. AnimationController

I talked about them in detail in this article if you’re interested: Flutter Animation : Intro. And that’s exactly what I used in the startup screens along with all of the app!

How I handled smaller elements animation

Elements like Faded texts and elastic buttons are very easy to do in Flutter. A single AnimationController that handles both the fade and the slide transitions widgets:

  1. FadeTransition
  2. SlideTransition

As simple as this:

@override
Widget build(BuildContext context) {
return FadeTransition(
child: SlideTransition(
position: _animOffset,
child: widget.child,
),
opacity: _controller,
);
}

This awesome simple animation is literately less than 20 lines of code!…

The Timer Screen

Since the app is built to be intuitive and beautiful, the timer animates with each second or minute nicely. The animation is continues and surprisingly fast!

Timer Screen

As you can see, both the number and the white time tile animate. The tile animates differently to add some weight to the number’s movement.

The problem with Flutter

You should by now Know that Flutter handles complex animations pretty well. But sometimes it just consumes too many resources. When the app first runs the blur animations are usually slow or laggy (only on the first run though).

On Android, “first run” means that the user might see jank the first time opening the app after a fresh installation. Subsequent runs should be fine.

On iOS, “first run” means that the user might see jank when an animation first occurs every time the user opens the app from scratch.

The solution to this is SkLK warmup. You can read more about it here.

I didn’t implement this yet in release builds since I’m still experimenting with it.

Furthermore, there’s another big problem which is the high price of using Stack & Positioned widgets for animations…

Android Fragmentation

It’s the one biggest reason why Belion is iOS first. Using Stack & Positioned or controlling widget offsets manually, is something hard when developing for different screen sizes. Android has this exact problem. A huge amount of different screen sizes and ratios. But of course, I’m working on it…

To wrap-up

Flutter is a great tool for making beautiful apps that work smoothly and intuitively.

I have some big vision for Belion. I’ll be working on it and adding more features to it. So If you could help to make this better, I would appreciate it if you could download the app and leave a review or reach me out for feedback!

Download the app

Download Belion on the App Store

Download Belion on Google Play

Reach out for feedback

Reach to me at orfali.ayham@gmail.com

Show your support by clapping!👏 You can do it as many as 50 times!!

Hi! I’m Ayham Orfali a mobile developer & designer. Connect with me on Linkedin or drop an email to orfali.ayham@gmail.com.

--

--

--

Challenge lover, Creative thinker, Planner and a Do-er. A confident, friendly and driven person. A believer that anything can be solved with a cup of coffee.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Blogs: Week of 5 Oct — 11 Oct — Sean Chen

Ten of The Best Short and Simple Lines of Python — part 3

Cognito & Okta authentication for ElasticSearch Kibana

BigQuery Data Engineering Tricks

OverTheWire: Bandit Walkthrough Level [26–30] :-)

Is bestseller most profitable? Lets check with SQL

Microsoft CSP Indirect Resellers — Create Your Ecosystem and Unlock Your Potential

Mech Master Project

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ayham Orfali

Ayham Orfali

Challenge lover, Creative thinker, Planner and a Do-er. A confident, friendly and driven person. A believer that anything can be solved with a cup of coffee.

More from Medium

A Comprehensive Guide to Flutter-WebRTC

Why hiring Flutter App Development Services help you save more

Flutter App Development Services

What is Flutter and why you should use it

Flutter — Crash Course — 1 (Setting up your environment)