Planning Your Entry for the Flutter Clock Challenge
Officially, I'm ineligible to enter the Flutter Clock Challenge. However, that doesn't bar me from sharing what I would think about if I could enter and what I've learned along the way.
You have just under 2 weeks to get something submitted. Let's start with how I would plan my entry.
Grab some paper for designing things.
I love paper as a initial medium because it's easy:
to iterate on designs
to share with others during the design phase(no software needed), and,
to throw away an idea and restart(little sunken cost fallacy).
Avoiding/solving a problem on paper saves more time down the line than if you jumped into code and had to solve it later.
I'm really intrigued by the design studies the Google Design team used when creating Material Design.
Decide on a concept and sketch out all components you need.
If you are designing a typeface, you'll want to think about how individual elements look in isolation and in combination. If we had months, I'd suggest looking over Thinking with Type by Ellen Lupton. A TL;DR view is to pay attention to kerning, the spacing between character glyphs, to make sure things don't look wonky.
One of the example concepts I was working on looking fine as individual glyphs but were illegible in some combinations.
If you are short on ideas, check to see if you library has the book 100 Ideas that Changed Graphic Design by Steven Heller or anything similar. Go take a stroll through a local museum.
If animating, think about transitions both in number(quantity) and nature(how complicated they might be).
For a digital clock, there are a couple of transitions you'd miss if you just animate 0 -> 1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8 -> 9 -> 0.
For a 12-hour clock, you need transitions for 1 and 5 to 0 and 2 to 1.
Ex. 12:59 -> 01:00
For a 24-hour clock, you need transitions for 2,3, and 5 to 0.
Ex. 23:59 -> 00:00
These combinations give you another opportunity for a sanity check.
Decide on an implementation strategy.
I looked into the following as possible strategies for this challenge.
Android Vector Drawables
Fonts including color fonts
Flare/Rive
Native drawing
Using raster images is a possibility I didn't entertain because of scaling and size issues. Though the Lenovo clock has a smallish screen, it wouldn't be fair for every clock to indiscriminately ship a bunch of images. With that out of the way, let's talk a bit more about the options I did seriously consider.
Android Vector Drawable / SVG
AnimatedVectorDrawable and animated SVG aren't currently supported natively or via a package on pub.dev.
For static SVG and some proof of concept VectorDrawable support, there is fluttersvg.
This is a little unfortunate because I have considerable experience creating AVDs.
Fonts
Single color fonts are easy and well supported with many effects like shadows.
Muli-Color fonts(hereafter called simply color fonts) are a different story. At present, there are FOUR competing specs, none of which supported everywhere. See colorfonts.wtf for more details.
Chrome supports two out of the four standards however Flutter doesn't seem to support any of them and always falls back to a single color. It's all a bit moot because the one format Android supports natively uses bitmaps, which aren't great for scaling. Additionally, I couldn't find free tools to create them.
All isn't lost. There is a way to fake a color font by layering components, each in their own color. Stay tuned for an upcoming post explaining this in more detail.
Flare/Rive
I don't have much to say about Rive. It has some great animation support but I'm not skilled in it so it has to wait for another time.
Native drawing
Flutter's drawing infrastructure is built upon Skia, a 2D graphic library used by Chrome, ChromeOS, Mozilla Firefox, Fuschia, and Android to some extent.
Flutter's Canvas class aligns Skia's API giving you access to its raw power. Further, the CustomPaint widget allows you to specify CustomPainters that paint on a canvas given a size. You can even use existing framework provided painters like TextPainter to draw text inside your CustomPainter as opposed to doing it the hard way.
Conclusion
As you read, there are a few considerations to keep in mind when approaching this project not limited to the capabilities of your skills but also those of the target system. Wherever you fall on the experience spectrum, I encourage you to give the Flutter Clock Challenge a try.
Check back soon for more posts that will dive into Painters, fonts, and likely some sketchnote summaries on animation.