Jan 30, 2021
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 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)
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:
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.
- Stack & Positioned
- Transform
- 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:
- FadeTransition
- 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!
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.
