Flutter Clock Challenge Winners, Amazing Clocks Developed With Flutter.

1. Particle Clock

 Designed & Developed By Mickel Andersson

Particle Clock Is The Flutter Clock Challenge Grand Prize Winner.

I wanted to build something colorful, animated, and playful that changes appearance with time. Ideally, I wanted it to look different every time I looked at it. I also wanted to explore the custom painting features of Flutter. 

I ended up with an analog watch face featuring a simple particle system. It randomizes the color palettes while also maintaining legibility by calculating the luminance in real-time.

Highlights

• 🎨 Randomly selects color palettes while still maintaining legibility at all times.
• 🌤 Supports both light mode and dark mode, by filtering background color by luminance.
• 📱 Scales to fit the screen space available and adjust calculations & rendering accordingly.
• 🚀 At least 60 FPS on modern devices.
• 🌈 Constantly shifting and moving, making it fun to look at.

Download Source Code


2. Cloom Clock

Designed & Developed By Filipe Barroso and Francisco Frutuoso

Cloom Clock Is The Flutter Clock Challenge Visual Beauty Winner.

Visual Beauty Winner" of the 2020 Clock Challenge.
This is the clock made with Flutter for the Flutter 2020 clock contest with collaboration with Francisco Frutuoso and code by Filipe Barroso.

Download Source Code


3. Creative Creator Or Maybe Not Clock

Designed & Developed By Hubert Henkemeier

Creative Creator Or Maybe Not Clock Is The Flutter Clock Challenge Code Quality Winner.

creativecreatorormaybenot's playful entry to the Flutter clock challenge (is it weird to say it like that?).
This is a clock display that uses exclusively the Flutter Canvas to draw everything you see on screen. That means that there are no assets, no plugins, and not even prebuilt widgets used, i.e. every RenderObject in the tree is custom made by me.

I was inspired by the design of an old analog barometer and hygrometer kind of device initially and took many design ideas away from that. Later on, many other inspirations came my way :)

Download Source Code

4. Humanbeans Clock

Designed & Developed By Boris Brestnichki

Humanbeans Clock Is The Flutter Clock Challenge Overall Execution Winner.

Bird visits Only once a day and stays for only one minute. You may not see it for weeks, sometimes you’ll only catch a glimpse of it flying away.

But sometimes you and the bird will share a special moment. Make a wish, call someone from the other room to show them, or do nothing – it’s your special minute!
Concept Story:

Approaching the competition, we knew we wanted to take one step further than creating a good looking clock face that works. It was important we utilized as much of the features flutter has as we could, but we didn’t want technology to be the end goal. We wanted it to be the means we used to express an idea, a story an allegory…something!

We started brainstorming around a few concepts. Going through books about watches, graphic design, and art – writing down, taking photos of anything that might turn out to be useful.

Watchmakers have had some incredible ideas in the past – creating scenes with insanely complicated mechanically propelled characters, even games – a special experience beyond just telling time.

We needed a graphic approach so a lot of pages were turned until a poster by Armando Milani came along called “World peace” showing a bird silhouette.

Suddenly It all came together. We had already been through ideas about introducing a character to the scene – what if it was a bird that visits every once in a while? What if it was a really special bird? This could be a whole new version of the cuckoo clock!



Download Source Code


5. Sunset Reflections Clock

Designed & Developed By Victor Morilla

Sunset Reflections Clock Is The Flutter Clock Challenge Novelty Winner.


Description

Sunset reflections is a face clock implemented for the Flutter Clock Challenge that emulates the behavior of cold cathode displays. These displays were a variant of neon lamps that resembled vacuum tubes and became popular between the sixties and the seventies. Shortly later they were superseded by LEDs and vacuum fluorescent displays. Recently, there is a new trend that has revived this kind of clocks and new models can be acquired at many popular online stores.

The clock face shows a perspective view that allows us to observe the content of the tube displays: a set of stacked digits made with a thin tube filled with gas that glows when voltage is applied. The stacked digits are surrounded by a metallic hexagonal grid.

The glass tube shows a subtle reflection of a window to the Mirador de San Nicolas. This is one of the most iconic viewpoints in my hometown, Granada (Spain), which offers its visitors a fantastic view to the two most emblematic symbols of this beautiful town: the Alhambra, a wonderful palace and fortress complex, and the Veleta, the second-highest peak in the mountain range of Sierra Nevada. Former U.S. President Bill Clinton once coined it “the most breathtaking sunset in the world".

Features: 

3D rendering

One of the most challenging parts during the development of this clock was achieving a realistic effect on the glass tubes. Somehow, I ended up developing a basic 3D rendering engine, able to represent triangle meshes (the glass tube, the tube stand, and the table) and canvas paths (the grid and the digits) according to the position of a virtual camera (see lib/basic3d).

Triangle meshes have been created with openScad (see docs/tube.scad) and exported to STL format (see assets/3d). A binary STL parser has been implemented.

Paths have been created programmatically (in the case of the grid) or with the help of Inkscape and exported to SVG format (in the case of digits). A very basic SVG parser has been implemented with the help of path_drawing.

The project took a lot of maths and headaches: calculations of the impact of the light on objects (textures.dart), mapping to image textures (uvmappers.dart), or translation from clip coordinates to canvas coordinates (clip_coordinates.dart).
Light and dark themes

The clock includes both light and dark themes. In fact, it is prepared to include multiple themes where different settings might be changed with little effort (see lib/themes.dart).

Download Source Code