How I got “ Honorable Mention” in Flutter Clock Challenge by creating “Infinity Clock”
For those who don’t already know or those who live under a rock, not “The Rock” (a.k.a. Dwyane Johnson), just “a rock”, there was a challenge thrown by the Flutter Team, sometime in Nov 2019, called the Flutter Clock. The challenge was, to create a visually appealing as well as time-telling (obviously, dah!) Clock UI for Lenovo Smart Displays.
As a Flutter developer & a veteran graphics designer with 7+ years of immense experience, I took on this fun little challenge (not to show-off, just for fun). Follow my journey in the process and get a glimpse of my mind-set.
Flutter Team already provided their code’s repository and had a deadline for the project on January 20th, 2020. When I found this challenge, I had 42 days left for me to use every bit of my arse (short for arsenal, you dirty-minded freak, can’t you see that there was a “period”).
So now if you are over my “arsenal”, I decided to follow the following schedule:
- 10 Days — Study the code provided, to figure out extensions and limitations of it, if any.
- 10 Days — Design a concept, a piece of Art, an Eye-Candy to stand above all. And yes I’m talking about the Clock.
- 20 Days — Develop the Clock app, bring it to life, like Dr. Victor Frankenstein (which means just writing the damn code, but you always imagine me doing an Evil Laugh! and the lightning in the background).
- 2 Days — Double check everything and submit the code.
Studying the Code provided by Flutter Team
I started studying the code, tried to understand every single Class & Function. Then after 2 days, I realized that the clock engine is already ready-to-use and all I have to do is to work on the Damn UI of the Clock. Boom! saved 8 days.
Designing the Concept and almost backing-off of the challenge. Almost!
After figuring out the code, it was time for me to summon the spirit of Picasso & Michaelangelo to help me with my Art. Since I’m not good at Necromancy, I decided to go old school with a pencil and lots of blank paper.
First few days, I spent absorbing ideas from Pinterest, Behance, Dribbble and also Google, but failed to create anything intriguing enough to excite my inner artist. So I gave myself more time to replenish my artistic juices.
After 10 days, I ended up with cool design ideas like a spiritual being (like Dr. Manhattan, if you never heard this name before, Please, go get a life Bro. or Sis. or whatever) in space in meditative state with clock on his forehead, a Planet with face revolving around Sun showing the meridiem and time, futuristic dystopian world where Robots worshiping another Robot that displays time on the monitor it had for a Head (Cool Right), a Cool Cat wearing sunglasses like Riddick showing time, and so much more. It sounds a little over the top, but I really wanted to demonstrate that, the time is beyond us, something we can not comprehend.
After 15 days, having plenty of ideas, scattering in my skull, I failed to come up with something that gives me the Itch I was hoping for (not literally an itch you dummies, don’t get stuck with the words, focus on the context). And, if I don’t get that “Itch”, I can’t work (this is an artist thing).
Since I had no concept ready and was desperate to do something, I decided to jump on the Illustrator CC, in hope that if I start creating something, some idea might hit me (still think about the context, readers). So, I ended up creating a design of an analog clock, kind of in a room and sunlight/moonlight from a window (something that provides info about current meridiem). I also created a version for Dark Theme. But still, it didn’t have the God-Damn-Itch I was looking for and hence decided to drop out of the competition.
Epiphany, Eureka or whatever
Just 10 days before the contest’s deadline, an idea struck my head. That time is infinite. How about illustrating a clock that resembles an infinity and portrays this idea (and also shows time).
Just like how a teenage boy feels when he sees a beautiful girl, I got excited (not horny) and started drawing the concept. Initially thinking about having an infinity symbol with 3 loops (instead of 2), with a bigger middle loop showing the time, I ended up with an infinity symbol with 2 loops, bigger on Right showing an Analog clock and smaller on the left showing the current meridiem. I was happy, I got my Itch.
Alert Code Red: Coding at the verge of Deadline
After getting satisfied with my Design Concept, creating the Dark version for it and slicing up the assets; I had only 2 days left to code, test and submit. I was in trouble, a big one.
Keep that in your mind that I have a full day job, and I hit the gym every day, and for that, I have to sleep early and wake up early. I use lots of ‘and’ but you have an idea, how short 2 days were for me. I skipped Gym for these 2 days and worked really late at night, which gave me 10 hrs roughly (in 2 days’ span) to write my code and test it.
Check the real-time video preview of the clock below.
Thanks to the god that I live in India (IST Time Zone) which gave me another 11 hrs ahead of dead-line (PST Time-Zone) and I submitted my Work.
I’m the only Indian to get a place into the Flutter’s list of “Honorable Mentions”.
The Flutter team released the result on Feb 25, 2020. They received over 850 unique submissions across 86 different countries. I didn’t get the first prize. But I got a place in Flutter’s list of “Honorable Mentions” (to verify this, click on the link) and also a place at “Flutter Clock Highlight Reel” video at 27th second on YouTube, check below.
I thought that even if I get just a Certificate for Participation, it would be great (considering that I have less than a year of experience in Flutter, it would have been huge for me). I had a lot of fun in this Journey and that is all that matters.
You can always check the Source Code Repository for the above here.
If you have a fun story about this contest, I’m willing to hear.
Thank You, for your Precious time (for real).