KIM TRAN: Hi, I'm Kim and I'm a visual designer at Google.
JACKSON JESSUP: Hey everyone.
I'm Jack.
I'm a software engineer at Google.
KIM TRAN: Welcome to designing and building clocks
displays with Flutter.
Flutter is not only great for building apps.
It's also perfect for creating UIs for any surface.
JACKSON JESSUP: So we have a few topics
that we want to cover today.
First, Kim is going to take us through some
of the considerations that she makes
when she's designing a clock.
Next, we're going to go over a few of the clocks
that we've actually implemented for our smart display products.
And finally, we are going to be jumping over to the laptop
and actually building a clock on stage.
KIM TRAN: To understand why we chose clocks,
first we'll need to describe smart displays.
Smart displays are stationary, always
on devices with integrated speaker and touchscreens.
These always on devices can be placed
in communal spaces like the kitchen or living room,
or private spaces like bedrooms.
One of the most useful features of an always on device
is being able to know the time.
When these devices are sitting idle,
we have the opportunity to show a clock.
You may have seen some of our clock designs
on smart displays, such as the Google Nest Hub and Lenovo
Smart Clock.
Before we began designing clocks for smart displays,
we wanted to be thoughtful where these smart displays were
placed.
The designs needed to fit the context of the environment.
In communal spaces such as living rooms and kitchens,
the clock should be bold enough to be clearly read at a glance
from across the room.
In private spaces, such as bedrooms and bathrooms,
that context shifts.
We needed to be sensitive to how light and motion are used.
Fast animation and bright colors could be distracting in a space
where relaxation is important.
Because these smart displays are in your home,
we wanted the clocks to complement
their unique surroundings, so we needed
to create a wide range of styles that could
blend in multiple environments.
From these considerations, we explored a few themes.
Google has always been known as a playful brand,
with a colorful logo and the iconic doodles on their search
page.
How can we bring that playfulness to clocks?
We studied and experimented with color, transparency, and motion
to inject a sense of play.
In our Playground clock, the colorful minutes and hours
layer on top of each other as time passes.
We could have had the numbers immediately replace each other,
but by offsetting the timing of the outgoing minute
and layering the numbers with complementary colors,
we added a moment of delight.
The colors are reminiscent of the Google logo,
but with an expanded palette.
Material design is Google's visual language
inspired by the physical world in its textures,
including how they reflect light and cast shadows.
In the second theme, materiality, we
explored using light, shadow, and texture
to give depth to the hour, minute, and second hand
of a traditional clock face.
In our clock Timeless, we used tonal colors and transparency,
and we explored how light passes through each layer
and creates depth.
Inspired by traditional clocks, we
incorporated subtle motion in the second hand.
In Timeless, like many of our clock faces on the Lenovo Smart
Clock, has multiple color choices
to fit its surroundings.
The clocks also have a light and dark palette,
so they can dynamically switch based on the lighting
conditions of the room.
For our final theme, numeric, we raised the question,
how can we tell time with a digital display using
bold, easily recognizable characters,
and how can we utilize motion to emphasize those characters?
In the Eclipse clock, the numbers
are larger than their columns, but instantly recognizable
at a glance.
Instead of replacing each digit as the time changes,
we saw an opportunity to use time and relate that
to the vertical position of each number.
The numbers incrementally move up over the course of an hour,
minute, or second, until pushed out of view
by the following number.
These are some of the clocks that
launch with the Lenovo Smart Clock,
and may roll out to smart displays
when the system UI will be built with Flutter.
Now that I've shared how we design
clocks for smart displays, we can start
building a clock in Flutter.
For this talk, I went back to two of the themes,
numeric and playful, and did a few more designs.
These are a bit more expressive than what
you'll find in smart displays, because our goals are
different.
For these clocks, I wanted to showcase
the possibilities of Flutter.
For numeric.
I explored how the changing minute can draw itself
in and out of the clock.
Each number could have had a custom animation.
I even used Rive, formerly known as Flair,
to create the number two animation.
Each vector line is drawn in.
The key frames are staggered to create this waterfall effect.
In Adobe After Effects, this is called trim path.
In Rive, I used key frames and changed the start and end
points.
With the Playful theme, it reminded me
of over printing, a characteristic of printed
material where the multiple colors overlap
and blend together.
This inspired me to explore mixing typefaces and adding
texture to simulate the wood block or letterpress printing
style.
I call this clock Impression.
JACKSON JESSUP: Wow, Kim.
That one looks pretty cool.
Why don't build the one on the left?
KIM TRAN: Let's do it.
This clock has a background color.
The minute is layered on top of the hour
to give it the over printing effect.
I also have a texture on top of everything,
and I worked with a motion designer
to animate the minutes in and out of the clock.
Let's get started.
JACKSON JESSUP: Awesome.
So as we move over to the laptop,
let's take a look at our starting project.
So the first thing we want to call out
is Flutter's flexibility.
So I am currently running on Android Studio,
and I'm using an Android emulator.
But it's really easy to run the project using
whatever IDE you want to use, or even change up the device type.
You can run it in an iOS simulator, in a Chrome tab.
It's kind of whatever you want.
So the next thing we want to look at
is, everything in Flutter is a widget.
So our initial app widget is pretty simple here.
We have some basic scaffolding, and we
have a black background here, and we have our clock centered.
So the last thing that we want to talk about
is the time provider.
This is actually, it's just a little notifier
that's notifying our clock every time that the time is updated.
And, for our purposes, we've set it up
to about one minute every three seconds.
So as we look in to our clock here,
it's also a pretty simple widget.
The biggest piece here is the Build function.
We basically just have a white background
with some text centered.
And every time that we set the state here, it rebuilds.
So why don't we take a closer look at the clock
that we want to create?
KIM TRAN: I think the easiest thing to start with is probably
just updating the background.
JACKSON JESSUP: Yeah, why don't we do that?
So I'm going to jump over here and the first thing
we're going to do is create our background color
as a variable using a hex value that Kim has given us.
We're going to take the background color,
stick in our container, and our background color should update.
It's looking pretty good, Kim.
It's kind of telling me everything I need to know.
KIM TRAN: It's definitely a clock.
But I'm wondering if you could update the hour and minutes--
the hour textiles to match my design.
JACKSON JESSUP: Cool.
Let's do it.
So we're going to create a couple of textiles.
Just super easy in Flutter.
It's really simple to provide attributes
like a color, font family, or just change up the size.
So what we're going to do is we're
going to come down to our text widget here.
We're going to add our hour text,
and we're going to apply our hour text style to it.
KIM TRAN: Nice.
JACKSON JESSUP: How about that?
KIM TRAN: That's pretty good.
Can we add our minutes as well?
They're layered on top of the hours.
JACKSON JESSUP: Yeah.
So in order to do this, we're going to use a stack widget.
The stack widget in Flutter is pretty simple.
It just lays out all of its children on top of one another.
So we're going to recreate our text box, one for the hour
and one for the minute.
We'll update them with the appropriate content.
And we'll give them each their textile.
From there, we're looking pretty good.
KIM TRAN: Nice.
That was fast.
JACKSON JESSUP: Yeah, so Flutter's hot reload
is really easy to iterate on our designs and move quickly.
KIM TRAN: I'm wondering if we can actually
change the numerals into words for the minutes.
JACKSON JESSUP: Awesome.
So one of our previous clocks that we saw actually
uses a time formatter to do something like this.
So we're just going to pull that one in.
We're going to format our text.
And that's kind of looking a little bit more
like what we were hoping for.
KIM TRAN: Yeah.
That looks pretty good.
I think I have one more thing, which
is the texture that's on top of everything
to give that kind of wood printing effect.
JACKSON JESSUP: Yep.
So we have our texture image that Kim has provided for us,
and we're going to stack that on the very top.
And we're going to give it a background color so that it
doesn't stand off of the clock.
Going to hot reload, and we have our texture.
KIM TRAN: That's cool.
Can we take a look at our original design?
JACKSON JESSUP: Let's do it.
KIM TRAN: I actually layered the minute text
on the hour using a blend effect called Multiply,
where it acts as--
it allows light to travel between two layers,
and the overlapping colors are actually darker.
I was wondering if we can implement that.
JACKSON JESSUP: Yeah, let's try to do that.
So that effect is actually difficult to achieve
using a stack.
So what we're going to try and do is use a custom painter.
So a custom painter just allows us
to have better control over the pixels
as they're painted to the screen.
And so we have our initial clock painter here,
and we are going to add it as the painter for a custom paint.
We're going to give it our date time,
and then we are going to go in and add our texture
asset as the child so that it gets painted on top.
KIM TRAN: Oh.
What happened to our work?
We were so close.
JACKSON JESSUP: Well, because we're using the custom painter,
we're going to have to actually recreate our text objects.
Instead of using the text widgets,
we're going to be using text painters.
So why don't we build up our hour painter?
So we're creating a text painter here.
We're going to use our time formatter
to get our hours text.
And what we can do is actually just pull down our textiles
from above.
So we are going to plug in our hour textile
to our text painter.
And the last thing we need to do is lay out our hour.
What that does is it just sizes it up for the painter
so it knows what size to paint it.
And then we're going to paint it right in the center.
KIM TRAN: Nice.
JACKSON JESSUP: So the last thing we have to do here
is do the same thing with our minute painter.
We're going to go back to our time formatter for our minutes
text, and we already have our minutes textile down here.
And then the last step is to lay it out and paint it.
And we're back to where we started.
KIM TRAN: Great.
So how do you implement then multiply?
JACKSON JESSUP: So the multiply effect is kind of fun.
We're actually going to save the minutes layer.
But this time, we're going to apply the blend mode to it.
We can then restore it on top of the hours painter
after it's been painted.
And we're going to get our nice multiply effect.
KIM TRAN: That's exactly what I was going for.
I wonder if we could take a look back at the original design.
I worked with a motion designer to give you some curves,
so I added physics to how the minutes--
when the minutes transition in and out of the clock.
I'm wondering if we can add that to our clocks.
JACKSON JESSUP: Let's do it.
So the first thing to think about when
doing most animations in Flutter is
create an animation controller.
So what we're going to do is we're
going to create our animation controller
and we're going to initialize it.
And it's pretty simple to add things
like a duration or an initial value.
The next thing that we want to do
is go down into our custom painter,
and we're going to have to actually teach our painter how
to paint the offset.
So we're going to give it an animation object.
And in this case, it's just a double
that represents the offset that the minutes
text is going to be painted at.
And then what we can do is actually
let the painter know that, when the animation objects actually
updates its value, we want to repaint.
The last thing here is to actually take our offset value
and add it to the minute painter as it's painted.
KIM TRAN: You've written a lot of stuff.
Do we still have some more to do for the animation?
JACKSON JESSUP: Yeah.
So the last thing that we want to do to actually get movement
into our animation here is to add our offset tween.
And so what that does is it gives us
a starting point and an ending point,
and it lets us know how we actually want
to translate between the two.
So we have an entrance animation here,
and we apply a curve to it so that it's not just
a linear transition.
And then we have our exit curve here,
which moves from 0 to 30 just in a downward direction.
And we give that one a little curve too.
So what we want to do now is we're
going to take our offset tween, we're
going to have our animation controller actually
drive the animation here, and then
the last thing we want to do is kick off
the animations every time that our time is updated.
So from there, we should be able to see our changes.
KIM TRAN: Ah, that looks great.
I'd be OK with shipping that right now.
JACKSON JESSUP: Yeah, let's do it.
So we're going to jump back to the slides for a sec.
KIM TRAN: To recap, we've designed and built
a clock that could exist in a graphic designer's or a print
lover's home, with the bold hour number as a focal point
and the playful animation for the minutes.
We hope that, through this talk, we've
demonstrated how quickly Flutter can
help bring your creative ideas to any surface.
Thanks for coming today, and tuning in to see how easy
it is to design and build clocks in Flutter.
[APPLAUSE]
JACKSON JESSUP: So we actually have one more thing
to talk to you guys about.
KIM TRAN: Just one.
JACKSON JESSUP: Just one.
If you're feeling inspired and you
want to showcase your own clock, Flutter
is actually hosting a clock building competition.
So if you go to Fluttuer.dev/clock,
you can participate in the Flutter clock challenge.
KIM TRAN: There are some exciting prizes.
One of them is a loaded iMac Pro,
and we have, also, Lenovo Smart Displays and Smart Clocks.
We look forward to seeing what you guys create.
[APPLAUSE]
[MUSIC PLAYING]