Amazing Flutter Designed Clocks with Source Codes.
1. Ants Clock by Stuart
by Pau Picas Sans
This is a Flutter project made by Stuart to provide a beautiful clock face for Flutter Clock Challenge.
More info about the contest can be found at flutter.dev/clock.
by Pau Picas Sans
This is a Flutter project made by Stuart to provide a beautiful clock face for Flutter Clock Challenge.
More info about the contest can be found at flutter.dev/clock.
A little bit of snow outside? Ants clock tells you:
Is there a thunderstorm right now? Just check Ants Clock:
Also, you can check Ants Clock to see if it's a windy day:
More weather conditions like foggy, cloudy, or rainy days are supported.
See the clock it in action
Additionally, there is a nice night mode that is very useful when the light emitted by the clock can be annoying.
Download Source Code
Additionally, there is a nice night mode that is very useful when the light emitted by the clock can be annoying.
Download Source Code
2. Animal Clock
by Sei Lee
This app is a good example of how adding animations can liven up a digital clock. The lion's head bobbles along without any care in the world.
That is until the time change is detected at which point the lion gets startled. Don't worry - he will quickly go back to bobbling.
You might also catch other living animals pass through the scene, so keep your eyes open:- )
About the UI
The animal clock uses the included "digital_clock" as the starting point. However, the resolution seems to be a bit inconsistent between iOS and Android as what works fine in Android overflows in iOS by 2px in width.
The animated characters were created in Flare (Rive.app) and imported using the flutter_flare plugin.
Many more animals were scheduled to be introduced, but due to lack of time, they will make their debuts in the future versions.
Download Source Code
3. Agent clock
4. BarBar Clock
by Aleksandr Troshkov
Clock face for the Flutter Clock Challenge.
This clock face shows time using negative space. The top and bottom bars move when the time changes. In addition, the clock face displays weather conditions, temperature, and current date:
Download Source Code
5. Boating
by Yi He
by Sei Lee
This app is a good example of how adding animations can liven up a digital clock. The lion's head bobbles along without any care in the world.
That is until the time change is detected at which point the lion gets startled. Don't worry - he will quickly go back to bobbling.
You might also catch other living animals pass through the scene, so keep your eyes open:- )
About the UI
The animal clock uses the included "digital_clock" as the starting point. However, the resolution seems to be a bit inconsistent between iOS and Android as what works fine in Android overflows in iOS by 2px in width.
The animated characters were created in Flare (Rive.app) and imported using the flutter_flare plugin.
Many more animals were scheduled to be introduced, but due to lack of time, they will make their debuts in the future versions.
Download Source Code
3. Agent clock
by Thomas Krueger
A visualization of a clock using simple agents and physics.
Description
The digits of the clock are basically letters or SVG paths. These paths are broken down into pieces. The pieces are positions which will get occupied with "agents". These agents spawn at and have the goal to reach a random spot on these paths thus slowly revealing the time. The spawn location is a position outside the screen where the second hand would be - it wanders clockwise around the scene. If the minute is over the dots are cleared and the process restarts.
Beginning of the minute
Only a few dots are there
A visualization of a clock using simple agents and physics.
Description
The digits of the clock are basically letters or SVG paths. These paths are broken down into pieces. The pieces are positions which will get occupied with "agents". These agents spawn at and have the goal to reach a random spot on these paths thus slowly revealing the time. The spawn location is a position outside the screen where the second hand would be - it wanders clockwise around the scene. If the minute is over the dots are cleared and the process restarts.
Beginning of the minute
Only a few dots are there
30 seconds of the minute
More and more dots floating in
More and more dots floating in
All dots there
How to build
Flutter should have been installed
git clone https://github.com/kruegerrobotics/flutter_agent_clock.git cd flutter_agent_clock cd agent_clock flutter create. flutter run
Inspirations
The coding train
This project was inspired by The Coding Train Challenge #59: Steering behaviors Thanks to Daniel Shiffman!
Flutter canvas tutorial
This is a canvas tutorial and has a way to become independent of the screen size with the "size tool". This has been reused here.
3rd Party library use
This project uses the public available flutter library Text to PathMaker. For breaking the TTF into segments,
Ideas for further improvement
Multiple fonts and "text to point"
Refine the text to path maker or develop an algorithm that breaks the TTF font path and can put dots on the path in equal distance. This would allow the use of any font. At this point in time, the point allocation is on certain fonts not equidistant and not visually appealing. The overall coding of the positioning should be less static
The algorithm could be improved inspired by textToPoints from the p5js project.
Other ideas
Improve the streaming in of the agents depending on weather
Flutter should have been installed
git clone https://github.com/kruegerrobotics/flutter_agent_clock.git cd flutter_agent_clock cd agent_clock flutter create. flutter run
Inspirations
The coding train
This project was inspired by The Coding Train Challenge #59: Steering behaviors Thanks to Daniel Shiffman!
Flutter canvas tutorial
This is a canvas tutorial and has a way to become independent of the screen size with the "size tool". This has been reused here.
3rd Party library use
This project uses the public available flutter library Text to PathMaker. For breaking the TTF into segments,
Ideas for further improvement
Multiple fonts and "text to point"
Refine the text to path maker or develop an algorithm that breaks the TTF font path and can put dots on the path in equal distance. This would allow the use of any font. At this point in time, the point allocation is on certain fonts not equidistant and not visually appealing. The overall coding of the positioning should be less static
The algorithm could be improved inspired by textToPoints from the p5js project.
Other ideas
Improve the streaming in of the agents depending on weather
4. BarBar Clock
by Aleksandr Troshkov
Clock face for the Flutter Clock Challenge.
This clock face shows time using negative space. The top and bottom bars move when the time changes. In addition, the clock face displays weather conditions, temperature, and current date:
Download Source Code
5. Boating
by Yi He
Shaded circles representing the hour, minute, and second hands move across the screen, while the background flows through the color spectrum every hour.
This creates an ever-changing landscape throughout the day as the circles interact to create contrasting colors and interesting patterns. The clock gives an indication of the time at a glance and a readout is provided for precision.
Supported Settings
24 Hour - The readout changes as required.
Light/Dark - The tone of the colors reflect the theme.
Download Source Code
7. DJ Clock
by Bao Hui Huang
Download Source Code
8. Dots Clock
by Tran Duy Khanh Steffen
Dots Clock is a digital clock written in Flutter, Dart. It was developed for the Flutter Clock challenge.
Table of Contents
Clock Variations
Design Philosophy
Goals
Implementation
Final Thoughts
Goals
The clock is meant to simulate a living, breathing entity that, while displaying time information, is also an interesting and soothing experience to look at. It should interest the viewer and spark just enough intrigue to still disappear into the background of your living space. I would describe this attribute of the clock as its "lava dampness".
Final Thoughts
Dots Clock is an exercise in emergent motion design. It was unknown to me how the final clock would look like until it was actually built since the clock is modeled after realistic patterns and physics rules. The Perlin noise I employed is the same function that visual artists use to generate organic effects such as clouds, fire, or landscape terrain. This connection to real-life helps it stand out as a force of nature rather than just a clock.
Download Source Code
9. Flutter Clock
by Dezso Meszaros
Welcome to Flutter Clock!
See flutter.dev/clock for how to get started, submission requirements, contest rules, and FAQs.
See a live demo with Flutter for Web!
Example Analog Clock
Download Source Code
10. Flutter Clock
by Dominik Roszkowski
This clock face was inspired by neuromorphic design. The main goal during development was simplicity and attention to details.
Clock face's hands are subtly animated and have a slight drop shadow that is always oriented in the same direction. Bevels of the clock cast slight shadows the same way.
This clock face was prepared to work both in light and dark mode.
A small touch is a collection of icons depicting current weather conditions in the background of the clock face. The icons used are LineIcons. The change of weather conditions is animated with slide and fade animation.
Light Mode
9. Flutter Clock
by Dezso Meszaros
Welcome to Flutter Clock!
See flutter.dev/clock for how to get started, submission requirements, contest rules, and FAQs.
See a live demo with Flutter for Web!
Example Analog Clock
Download Source Code
10. Flutter Clock
by Dominik Roszkowski
This clock face was inspired by neuromorphic design. The main goal during development was simplicity and attention to details.
Clock face's hands are subtly animated and have a slight drop shadow that is always oriented in the same direction. Bevels of the clock cast slight shadows the same way.
This clock face was prepared to work both in light and dark mode.
A small touch is a collection of icons depicting current weather conditions in the background of the clock face. The icons used are LineIcons. The change of weather conditions is animated with slide and fade animation.
Light Mode
Dark Mode
by Helge Wieding
The clock shows weather conditions as well as the current temperature.
Everything works programmatically without assets.
Download Source Code
12. Flutter Clock
The clock shows weather conditions as well as the current temperature.
Everything works programmatically without assets.
Download Source Code
12. Flutter Clock
by Vyacheslav Ryabinin
I made this clock for the Flutter clock contest.
My entry to the flutter.dev/clock challenge
by Akash Divya
Infinity - Flutter Clock Challenge
Download Source Code
17. Iso Clock
by Scott Cook
This is my take on a classic digital clock look with a modern 3D "flat" design and playful animations. I come from a web background and this is my first Flutter App, so go easy! It has been an absolute delight working with Flutter and I'm excited to incorporate it into future projects.
Design Decisions...
The Digit faces use color gradients to invoke more playful depth
I kept this clock a clock, weather and dates on-screen were visually distracting
Digits are large and in charge for readability
Lay flat diametric digits look super cool, but the upright isometric design had better readability
The dark mode is very dark while keeping enough contrast so light emission is low at night
Download Source Code
18. Lofi Clock
by Michael Wilson
This project is an entry for the flutter clock challenge hosted by Google for Lenovo Smart clock, 2020. Our preferred testing environment was an Android emulator. The app works best on a 5:3 screen that has a resolution of 800x480 pixels in landscape mode.
We made a clock face that borrows influence from Lofi music videos. Unfortunately, due to an unexpected power cut, our graphic designer is unable to finish animations in time. Not to worry, we plan on finishing the project post-competition and judging.
This project is an entry for the flutter clock challenge hosted by Google for Lenovo Smart clock, 2020. Our preferred testing environment was an Android emulator. The app works best on a 5:3 screen that has a resolution of 800x480 pixels in landscape mode.
We made a clock face that borrows influence from Lofi music videos. Unfortunately, due to an unexpected power cut, our graphic designer is unable to finish animations in time. Not to worry, we plan on finishing the project post-competition and judging.
by Valerii Kuznietsov
This is a Scenery Clock prepared for the #FlutterClock challenge. See flutter.dev/clock to know more about the dev challenge.
Scenery Clock
Scenery Clock uses storytelling to visualize what is the current time of day and weather with beautiful animations and immersive day-night transitions.
Checking the time or weather never was so pleasant and emotionally connected before.
Download Source Code
22. Snake Clock
by Gilles Devillers
This is an original and fun clock face where a snake lives its day along with yours.
It’s my first ever Flutter app! I built it for the Flutter Clock challenge.
How does it work?
The snake’s head represents the current time. Each hour is a line, and minutes are the head’s horizontal position. Use the left or right indicators to know the hour and the top or bottom indicator the minutes (they are updated according to the snake’s direction because it goes right on even hours and left on odd hours). It’s actually quite precise, with some training you can read the hour down to a minute or two (it’s not the head’s end but the head’s center that indicates the exact minute).
The tongue goes in and out each second, and the eyes blink every ten seconds.
The snake’s color changes with the current season: blue for winter, green for spring, yellow for summer, and orange for fall.
The snake eats an apple at 9:30, 13:30, and 19:30, each of a different color because he doesn’t like routine.
by Philipp Bauer
Following are the: Day mode (sunny), Night mode, Cloudy & Snowy
Download Source Code
24. Steampunk Clock
Download Source Code
24. Steampunk Clock
by Roman Cinis
Steampunk Clock for Flutter Clock contest 🕰️
This project is one of the winning submissions in Google's & Lenovo dev/design contest, called "Flutter Clock" (with over 850 valid entries from around the world). You can read more about this contest here: flutter.dev/clock
I've made an analog clock variant, with look and feel of, late 18 or early 19 century. This is mainly a design contest, so, there is a lot of details and animations inside, made with the Rive (ex Flare) tool.
Note: design is screen size-independent because all the graphics are made in vectors (not bitmaps), but I have prepared it with 4-6' screen size in mind (so as big as Lenovo's Smart Clock display).
It has a light theme and a dark theme, cuckoo bird, four easter eggs, and displays sample weather and temperature data, provided from the Flutter Clock Helper package.
Download Source Code
25. Tetris Time Clock
by Michael Jentsch
Flutter Clock - Tetris Time
My contribution to the Flutter Clock challenge in 2020.
See flutter.dev/clock to read more about the contest.
Flutter Clock - Tetris Time
My contribution to the Flutter Clock challenge in 2020.
See flutter.dev/clock to read more about the contest.
0 Comments
Welcome! Please Comment Without Any Hesitation.
Thank You