Conic Clock for Flutter Clock challenge

Overview

Conic Clock

Conic Clock is a dynamic clock written in Flutter. It is a project by me (ZHENG HAOTIAN / Justin Fincher) for the Flutter Clock challenge.

The conic shadow angle represents seconds. On the top left and bottom right there are hour and minute indicators, while on top right there is the weather and bottom left be the location.
The color scheme would adapt depending on the time, weather, and temperature. For example, at 6:00 it would be sunrise (pink + pale blue), in rainstorm weather it would be darker, at a high temperature color would be more vibrant, etc.
Please see the Youtube video below for more info.

Youtube

See a demo video

Screenshots

Time Weather Screenshot
12:53 Clear
18:33 Clear
21:34 Clear
23:53 Clear
03:59 Clear
06:02 Clear
08:20 Clear
12:12 Clear
15:23 Clear

Design Philosophy

I view Lenovo Smart Clock, along with other smart clocks like Google Home Hub (which I do have one), as 'ambient' devices, because:

  • they are usually stationary (because clocks need to be at a fixed position for people to access info easily)
  • they work passively (proactive feedback only happens either when the device was activated by voice commands or physical interactions on screen, other than that it is just a clock)
  • Ideally, they are always-on (so there need to be smooth transitions, no sudden changes to catch unnecessary attentions, and flashy weather effects like lighting are certainly forbidden because no one wants this when they were about to sleep in a dim room)

So the clockface needs to both reflect and blend in with the environment. A conic clock fits well:

  • The conic shadow is in constant rotation, 60 seconds per lap. It is predictable, reliable, easy to understand, with no learning cost.
  • The color scheme is in constant updates, but only in a progressive manner. The clockface, as a view component, could not know when would the data provider refresh the clock, thus any interpolation methods with a fixed duration would cause unexpected behaviors. Instead, the lerp function respects the previous momentum to give a natural feeling about dynamic color changes.
  • The color scheme is an effective representation of the environment the clock is in, including temperature, weather, and time. Using the HSV color model, all these factors can be interpreted into changes in hue, saturation, value. For example:
    • Night -> overall darker colors -> V-
    • Day -> overall lighter colors -> V+
    • Hot -> overall more vibrant colors -> S+
    • Foggy -> still bright, but colors faded -> S- V+
    • Rainstorm -> darker, but with contrast -> S+ V-
  • The usage of masks on texts is to both maintain the readability of the texts and, at the same time, the 'ambient' feel.
    • Time is the most important element, so hour-and-minute indicators would be at both top left and bottom right. At any time there would be at least one location where the time is visible.
    • Weather and location, compared to time, are not that important, so each of them is respectively visible for 30 seconds in one lap, with fade-in-and-out animations, as I do not want these to mess with the overall beauty of the conic.

Tips

For debugging, conic_clock.dart has a property called _lightYearMode. Use it as a time lapse toggle, time would be 3000x faster than normally it would be.

You might also like...

Scaffolding code for the clock in the Flutter Clock contest

Scaffolding code for the clock in the Flutter Clock contest

Flutter Clock Helper This package provides scaffolding code for the clock in the Flutter Clock contest. Contestants: Do not edit this code. Model Prov

Nov 17, 2021

Dots Clock is a digital clock written in Flutter, Dart

Dots Clock is a digital clock written in Flutter, Dart

Dots Clock Dots Clock is a digital clock written in Flutter, Dart. It was developed for the Flutter Clock challenge. Table of Contents Clock Variation

Oct 16, 2022

Google's & Lenovo awarded Steampunk clock (Flutter Clock contest) 🏆

Google's & Lenovo awarded Steampunk clock (Flutter Clock contest) 🏆

🌐 english český русский Steampunk Clock for Flutter Clock contest 🕰️ This project is one of the winning submissions in Google's & Lenovo dev/design

Dec 26, 2022

Binary clock - Flutter binary clock with Dark mode support

Binary clock - Flutter binary clock with Dark mode support

Binary Clock This is a binary clock created using Flutter containing both Light and Dark modes Getting Started This project is a starting point for a

Dec 31, 2019

Clock loader - Highly versatile Widget display the smooth and creative loader named as clock loader

Clock loader - Highly versatile Widget display the smooth and creative loader named as clock loader

Clock Loader Highly versatile Widget display the smooth and creative loader name

Dec 30, 2022

Challenge yourself every weekend with flutter. Join me to implement challenging UI & digital designs using Flutter.

Challenge yourself every weekend with flutter. Join me to implement challenging UI & digital designs using Flutter.

Weekend With Flutter This is my new challenge. Every weekend, I want to implement challenging UI & digital designs using Flutter. you can join me with

Feb 24, 2022

181011450390-FLUTTER-CHALLENGE - Example GitHub Search app built in Flutter & RxDart

Example GitHub Search app built in Flutter & RxDart Simple app using the Flutter

Jan 3, 2022

Busca cep list - A project developed in Flutter for the Flutter Challenge that addresses the main basic concepts used in various Apps

Busca cep list - A project developed in Flutter for the Flutter Challenge that addresses the main basic concepts used in various Apps

Busca CEP - Desafio Flutter Projeto Busca CEP em Flutter Este é um projeto desen

Feb 9, 2022

Flutter UI challenge (with Box2D physic)- Smart washing machine app

Flutter UI challenge (with Box2D physic)- Smart washing machine app

Flutter UI Challenge- SMART Washing Machine About project The application was written based on this great UI concept: https://dribbble.com/shots/11018

Dec 27, 2022
Owner
JustZht
a.k.a Haotian Zheng. Indie Mobile & Game Dev, WWDC 18/20 Scholar, CMU INI MSMITE 2022'
JustZht
Google's Flutter Clock Challenge Novelty 🚀 of Idea Award 🏆 winner (https://flutter.dev/clock)

Sunset Reflections Clock My submission to the Flutter Clock Challenge, winner of the Novelty of Idea award: a cold cathode display clock (aka nixie cl

Víctor Morilla 52 Dec 26, 2022
Clock for the Flutter clock challenge

Agent clock A visualization of a clock using simple agents and physics. Description The digits of the clock are basically letters or svg paths. These

null 12 Jun 29, 2022
A clock created for the Flutter Clock challenge which achieved an honourable mention.

Circle Clock A clock created for the Flutter Clock challenge. Shaded circles representing hour, minute and second hands move across the screen, while

Max 11 Apr 18, 2022
Challenge cannabis - Challenge for Slicing UI Cannabis from FLutter Fan Indonesia

challenge_cannabis Challenge buat Slicing UI Cannabis dari om Kipas Angin FLutte

wind city 3 May 11, 2022
My participation on the Flutter Clock Challenge of 2020 with Francisco Frutuoso design

Cloom Clock ?? "Visual Beauty Winner" of the 2020 Clock Challenge, announcement post ?? You can read our blog post describing the process here How to

Filipe Barroso 77 Dec 26, 2022
creativecreatorormaybenot's entry to the Flutter Clock challenge.

clock creativecreatorormaybenot's playful entry to the Flutter clock challenge (is it weird to say it like that?). This is a clock display that uses e

null 280 Nov 12, 2022
Humanbeans Flutter Clock Challenge Submission

Eventually Humanbeans Flutter Clock Challenge Submission by Milen Trendafilov (design, concept) and Boris Brestnichki (development) Concept: Bird visi

null 183 Nov 24, 2022
Iso Clock - Flutter Challenge

Iso Clock - Flutter Challenge This is my take on a classic digital clock look with a modern 3D "flat" design and playful animations. I come from a web

Scott Cook 40 Oct 22, 2022
Scenery-FlutterClock - This is a Scenery Clock prepared for #FlutterClock challenge.

Flutter Clock This is a Scenery Clock prepared for #FlutterClock challenge. See flutter.dev/clock to know more about the dev challenge. Scenery Clock

Valerii Kuznietsov 47 Nov 23, 2022
Flutter-Clock - Flutter Clock Contest Submission

Flutter-Clock Build a beautiful clock face UI with Flutter for the Lenovo Smart Clock for a chance to win an iMac Pro, Lenovo Smart Display, or Lenovo

Piyush Sinha 1 Oct 5, 2020