View demo | Read article | Watch video |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 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.
The code entry point for the clock face is
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 :)
You can follow my whole process of building the clock face in this repository, i.e. every bit of it. Maybe it helps someone :)
Additionally, I wrote a whole article about the technical implementation of my submission. You can read it here.
You can view the clock face running on Flutter web here.
Notice: some features are not supported on web, e.g. some of the weather icon animations because trimming paths does not yet work in Flutter web. Same goes for some of the shaders, which are also still unimplemented. The sections in code have documentation or comments that link to Flutter GitHub issues discussing these problems.
Apart from unsupported features, the web version looks slightly different in general because some features of the framework are currently implemented differently in Flutter web. Ironically, the radial gradients look so much sweeter - you should really see the vibrant dark palette running on Flutter web!
No plugins were used at all (check
pubspec.yaml). No premade widgets from the framework were used in my own code, i.e. every
RenderObjectin the tree of the clock was custom created by me.
Accessibility was implemented customly and it had to because I did not use any prebuilt widgets that come with
Semanticsimplementations. Instead I overrode
RenderObject.describeSemanticsConfigurationfor every component with semantic relevancy.
Last but not least, no assets were used - I think you also get it now (: I wanted to stress it to show what Flutter is capable of.
I did not go with the raw layer (here is an old demonstration of the Flutter raw layer I did) nor the rendering layer exclusively.
This was not compatible with the
ClockCustomizer and is also not convenient for working with data at all. The Flutter trees are pretty neat, so we should use them (they make the app reactive) :)
For the animation of the second hand (and minute hand) bouncing of the analog clock, I enjoyed looking at this slow motion capture of a watch (the important part is blurry (:, yes).
You can view the
custom-fonts branch for a version of the clock face with fonts that better match the rest of the design. Watch a demo of this (note: this is not part of the design submitted to the Flutter Clock challenge).
If you want to build the app yourself, make sure to run
flutter create . in
flutter run in order to generate required directories first. Note that the repo size is ~100 MB due to the
gh-pages branches. You can download as ZIP, which will only contain the
master branch without any commits saving a lot of space. If you want to navigate through my process, however, you will need to clone the repo.
Understanding the code
As this is a complex project, it will probably be difficult for you to get into the code and understand the structure and reasoning for the parts. This was also the case for HaMMeReD on Reddit. Thanks to them, I have written this extensive elaboration on the structure and logic behind the project. Reading it should give you a good idea of how to navigate the repository and why I chose to do certain things.
Mistakes in code
Trying to fix some issues, trying to optimize, or just by being human in general, I introduced some bad practices and mistakes into the code on accident that I noticed now after the challenge period has ended.
I will not fix these issues to keep the code how it was when I submitted it - just note that there are things I did not intend to write the way they are and I would have normally fixed :)
See the clock display in all of its glory and some other captures of it below.
Thanks to Pants for being awesome and patiently giving me some design feedback, to the Flutter team for creating this challenge and the framework, actively working with the open source community, and providing awesome content like the Flutter Interact sessions, to everyone who shared Flutter Clock progress, which inspired me and helped to keep me motivated, and to all other creators of resources I linked to in the TODO section (in this
README.md file) throughout the development of this entry.