The Flutter Clock Challenge Explained

And a quick start guide for building your beautiful clock face UI

Lenovo Smart Clock with a custom clock face in light mode

Flutter announced the Flutter Clock Challenge about a month before the Flutter Interact event that took place on the 11th of December 2019.

The challenge, as the name suggests, was to build a clock face in Flutter that lives in a landscape display with a 5:3 aspect ratio. Precisely the clock face was for the Lenovo Smart Clock the only device that has an 800x480 pixels resolution and this 5 by 3 aspect ratio.

There were some nice prizes on the line and everyone with a valid submission received a digital certificate of completion of the challenge.

The deadline was on January 20, 2020, at 11:59 PM PST (GMT-8).

So there’s no time left to submit your entry, though you can still give this a try as a nice and fun exercise.

I can’t wait to see how others have painted time on their canvases.

Let’s start

Because we’re going to explore the actual challenge we won’t go in-depth on how to set up the development environment.

I’m assuming you’ve already got the Flutter development environment set up. If not, first follow this guide…