Google Flutter Clock Challenge

The Challenge

I recently completed my first experience building a mobile app with Flutter while working as part of the Newspeak Creative. Off the back of that experience I decided to take part in the Google Flutter Clock challenge.

I only found out about the competition a couple of weeks before the deadline but decided it would be a good experience in which to take part. It would provide me with an opportunity to try out some new techniques with Flutter and I’d get a badge and a certificate from Google for taking part.

Build A Clock

To take part in the competition it was neccesary to design and create a clockface, either digital or analog. The final app had to build successfuly and the source code to be submitted along with a 20 second video and link to the github repository.


I took my inspiration for my design from the 1927 film, Metropolis by Fritz Lang. I’d recently seen the film at the Lumière Cinema in Lyon.

In the film, which is set in a dystopian future, the designers anticipated that time will have been decimalised and a prominent clock in the film can be seen with a ten hour dial.

I created my own numeric font to create the dial in my app and used various flutter canvas techniques to create a feel of a black & white movie and to give my app an art-deco feel. The ten hour dial is just for fun though; the hands point to the actual time in ancient 12 hour format!

Video Of My Final Submission

My Art-Deco Clock Design For Flutter Challenge

The code is accessible in my GitHub repository.

Leave a Reply