[MUSIC PLAYING]
TIM SNEATH: We're going to take the next little while
to talk through four core areas of Flutter,
starting with designing stunning apps with Flutter.
Then we're going to talk about developing Flutter apps.
Then, we're going to talk about connecting Flutter
to online services.
And lastly, we're going to talk about the process of releasing
apps.
So let's start with design.
And to start this section off, I'm
joined by Will Larche, who's an engineer on the Material Design
team.
Will, great to see you.
[APPLAUSE]
WILL LARCHE: Thanks, Tim.
I'm so excited to tell you today why
I believe that Flutter is the perfect platform for executing
pixel-perfect designs.
But first, let's take a step back.
Right now, good design is expensive,
especially on mobile.
It takes extra engineering resources to execute,
and what you get is rarely what you want.
The designer hands us something detailed and beautiful.
But we push back on what makes it special.
Branded menu button?
It's easier to use a stock icon.
Custom map bar?
We could, but it's complex.
Custom tabs?
We ran out of time.
We end up compromising on the details that
make our experience excellent, and end up shipping something
that's just good enough, that has the major features we
need but none of the finesse.
So with the best of intentions, we say we'll get to it later.
But let's be honest, later never comes.
The tickets sit in our backlog, and we never
delete them because that would be admitting defeat.
But what gets me so excited about Flutter
is that we can break that cycle.
We can ship the app we really want, with detail and polish,
and fewer of those painful compromises.
Flutter's architecture is designed
for building beautiful, custom UI.
Flutter's main goal is to make building polished,
custom app interfaces a faster, more delightful experience
for designers and developers.
Firstly, Flutter is powerful enough
to draw anything designers dream up.
It's built on Skia, the open-source graphics
engine used by Adobe, Chrome, and Amazon Kindle.
We can get print-quality, custom typography
without needing to dive down to low-level frameworks,
like Core Text.
There's easy-to-access APIs for character spacing and word
spacing.
Its animation and motion framework
is more finely tunable than anything
I've ever seen on mobile.
We've looked closely at what developers
need to execute complex, high-fidelity
designs on the devices of today, and put it at their fingertips,
instead of burying it in obscure, hard-to-learn
frameworks.
And we've used these APIs to make a component library
expressing opinionated and flexible design standards.
Material components for Flutter.
These are reusable widgets designed by the Material Design
team here at Google.
If you haven't heard, we released a major expansion
of Material, making the system more flexible and expressive.
And the Flutter team has done a great job
implementing the Material components
to our specifications.
So we can get a beautifully themed
experience out of the box.
On Flutter, Material is beautiful.
It's a platform powerful enough to build anything
our designers dream up.
It's also extensible.
We can extend the existing Material components
to support almost anything.
And often, much more easily than in traditional code.
But maybe most impressively, Material is fast.
I actually built these screens on the subway
on my way to work in about half an hour.
The layout system in Flutter is just that good.
I believe Material Design is the most expressive and flexible
cross-platform design system you could need.
But Flutter's powerful enough to implement any design system,
so Material components isn't the only library that
comes with Flutter.
You also get Cupertino, a faithful implementation
of Apple's iOS design language.
Cupertino gives us action sheets, alerts,
segment controls, sliders, nav bars, switches--
over two dozen widgets that look like they
came right out of UI kit.
But 100% open source.
And coming from traditional iOS, that's mind-blowing.
If I have a question about a text field,
I can go look at its source code.
And you can't do that with private APIs.
[LAUGHTER]
Cupertino even plays well with Material components on iOS.
So I automatically get iOS style controls when I run a Material
app on an iPhone.
But it doesn't matter if you're using a design system
or a completely custom UI.
Flutter's faster than traditional mobile coding.
In fact, we've seen teams make up to 3x gains
in velocity using Flutter.
That could dramatically alter what your team can accomplish.
And we've already seen some of you
do amazing things with Flutter.
This is Reflectly, an award-winning app
on iOS and Android, and it's built with Flutter.
I'd like to invite designer/developer Jacob
Kristensen, founder of Reflectly, to join me on stage.
Jacob?
[APPLAUSE]
JACOB KRISTENSEN: Thank you so much, Will.
So hello, everyone.
My name is Jacob.
I am a co-founder at Reflectly, where I also
head up UX/UI design, as well as front end development.
Now, Reflectly is what we call a conversation-based journal.
Now, what that means is that everyday users open up the app
and go through a series of questions, which
helps them log down their day.
However, instead of just presenting them
with a blank screen and they fill in some text,
like you would in a traditional journal, we
prompt them with very specific UI instructions, such as rating
their day with little a smiley face slider,
or selecting a icon that best represented, well,
how their day went.
Now, all of this is then bundled together
into what we call a Story.
Now, users can then go back in their journal
and reread the story to see what were they up to,
and how did they actually feel.
However, we can also show them how
they've been progressing over time by giving them
aggregated statistics.
Now, all this makes Reflectly understandable and easy to use.
However, what's even more important to
us is we're seeing it bringing immense value to our users.
We're actually seeing users become happier over time
by using Reflectly, which of course, is amazing.
Now, Reflectly is just around the corner
from hitting that 1 million user mark, globally, all of whom
are able to use this amazing app built entirely in Flutter.
WILL LARCHE: That's really great, Jacob.
I want to ask you a couple questions.
Was this your first Flutter app?
JACOB KRISTENSEN: Yes, it was.
WILL LARCHE: And how many engineers were working on it?
JACOB KRISTENSEN: So just me, for the front end.
WILL LARCHE: And how long did it take you?
JACOB KRISTENSEN: So the first line of Flutter
was written in March, and with a learning curve,
we got this completed in two and a half months.
WILL LARCHE: OK.
That's crazy.
Wow.
All right.
Great job, Jacob.
Thank you.
Jacob Kristensen.
[APPLAUSE]
I really believe we might be entering
a new age, one in which we don't tell designers
that we're going to be getting to something later, or soon.
But now, Flutter makes executing beautiful designs easy.
And with that, I'd like to turn things back over to Tim.
Tim?
[APPLAUSE]
TIM SNEATH: So you've heard how the architecture of Flutter
makes it possible for designers and developers
to work together to create beautiful UI.
And again, this is where Flutter stands out,
as you saw with Philip's demo in the Big History app.
It's the composition of text, video, graphics, and UI
controls, whether from Flutter or the underlying platform,
applying animations and transformations
onto a single hardware-accelerated surface
that makes Flutter such a powerful platform,
and a powerful addition to the tool kits of designers
and developers.
But while Flutter bridges the gap to designers,
we think there's an opportunity to give creative professionals
the same boost to productivity that stateful hot reload gives
to developers.
And we've been working with a company who've
been investing in this space for a little while,
and they've got some tools that I think
you might be interested to see.
So I want to invite 2Dimensions onto the stage.
[APPLAUSE]
GUIDO ROSSO: I'm a designer.
And what I really like about Flutter
is how easy it makes it for us to create
beautiful applications.
Now, as a designer, I always have big plans
for what I'm going to build.
I love coming up with new interactions, slick animations,
epic lens flares--
you name it.
That said, once I've got these concepts down,
I then have to figure out how I'm going to actually code
all of this awesome stuff.
And that's when I think, how cool would it
be if I had a twin that could code it all for me?
Well, I have good news.
Today, we are launching a clone program.
[LAUGHTER]
Just kidding.
I am, indeed, lucky to have a twin, and he's an engineer.
This is Luigi, by the way.
But thanks to our new tool, and Flutter,
you won't need a complimentary twin like us.
LUIGI ROSSO: We are 2Dimensions, and we're here
today to tell you guys about a new product we
built called Flare.
Flare is a vector design and runtime animation tool that
exports directly to Flutter.
Guido and I built Flare so that designers
like ourselves and developers can work in parallel.
GUIDO ROSSO: If you're a designer,
the biggest advantage to Flare is
that you don't need to work-- that you
do get to work directly on the assets that
run in your final app.
That means you don't need to design in one app,
animate in another app, red line your mock-ups,
write up a 100-page guide to basically help your engineering
team redo all the work that you already did.
Everything that you design in Flare
is exactly what runs in Flutter.
Not only does this open up your entire team
to be able to quickly iterate, but it also
allows you to make great design a part of your process
from the very beginning right up until the completion
of your app.
So we have a demo, and we're going to show you
how all of this works.
LUIGI ROSSO: So what Guido's going to pull up here
is a Flutter list view that's hooked up to a Flare
pull-down refresh animation.
Now, what you can see is, as Guido pulls the list down,
there's a zoom animation that progresses
with the movement of the list.
And at the same time, there are a couple
different idle animations, like the Earth spinning,
the stars twinkling, and some of the comets
that are shooting by that are blended on top.
GUIDO ROSSO: And this is done regardless
of where Guido's finger is placed,
or where the list view is placed.
This is all animated in different layers.
So this would all be pretty difficult to achieve
with a video or an image sequence.
Instead, these are all animations that I created.
And I'm going to show you a little bit of what
the file looks like in Flare.
So this is our space demo.
And these are all the animations I created for this app.
There's this pull animation, which
Luigi has hooked up to basically progress
as you're pulling your finger.
And as you can see, the earth isn't actually rotating.
The clouds and continents aren't moving.
And that's because there's a separate animation called
Idle here, and that's where all that stuff is happening.
Now, if I blend these two animations together,
you see that all that stuff happens together.
The other animations we have here
are just a simple success state, which
basically happens when the users pull their finger far enough.
It just lets the user know something happened, success.
And then it goes into this loading indeterminate state,
where it's basically waiting for the loading to finish.
That's it.
That's all I created in Flare, and Luigi
hooked that all up to work.
LUIGI ROSSO: So it only takes a few lines of code
to get this actually running in Flutter.
There are a bunch of widgets that we provide that make
it really easy to do this.
And once this is done, Guido can keep iterating on this design
completely by himself.
GUIDO ROSSO: That's a good point.
So going back to the simulator here, now
that I'm actually seeing this running here,
I kind of think that the moon spinning actually
looks sort of boring.
I think we could do something a little more exciting with it.
And that's a good opportunity to show you
guys how easily I can update that, and iterate
on it, without taking up any of Luigi's time.
So I'm going to switch over to Flare.
And I'm in my loading animation already.
I'm going to grab the moon orbit key frames here,
and just hit Delete.
Now, what I actually want to do is have the moon kind of move
from a side view.
I want it to move like this.
So I'm going to set a key frame at the start
here for the position.
I'm going to set the same key frame at the end.
And then, right about in the middle here,
I'm going to put negative 60 to inverse it.
So now we've got the movement.
I'm going to add just some easing to it.
And I want this to be kind of playful,
so I'm going to go for a bit of an exaggerated curve.
I already set up the draw order so that it switches,
and you can see that we've got our new orbit here.
Now, I'm going to do just one last thing to really solve
this animation, and that's to add just a little bit of scale
to make this look cartoony.
So I'm going to add two key frames first
for our normal scale, and then right about here,
where the moon is passing in front of the earth,
I'm going to double our x.
And you'll see that this creates just a little bit
of playfulness.
All right.
I think that's good enough for now.
Let's see how I get this back into Flutter.
Going to hit Export, switch over to our assets,
and just drag-and-drop our new asset over the old one.
Hit Replace.
And then I switch over to VS code,
do a hot restart because we need to reload our asset,
and we've got my new moon animation in there.
[APPLAUSE]
I was able to do all of that without taking up
any of Luigi's time, and I can keep iterating on this
as long as I want.
LUIGI ROSSO: So Flare is really good
that UI components, as well as graphical animations,
like you just saw.
This is an expand-collapse toggle animation
that Guido built for the History of Everything app.
This is a broken heart that shows up in the Favorites list
when it's empty.
But where Flare really shines is at building complex animation
systems that are really easy to control.
We have full support for bones, constraints, and inverse
kinematics.
One of the animations you may have
seen in the History of Everything
is this Amelia Earhart.
She is controlled by one set of constraints
that allow moving her eyes, her nose, her mouth, and her face
without animating all of those properties individually.
Instead, an animator can really quickly key frame
just one node, or have a developer control it
in Flutter, and have all these constraints work there,
as well.
In this other example, Guido can move the hip bone
for this character, and you can see that her feet and her legs
bend and move in the correct direction, as you'd expect,
and that's thanks to the inverse kinematics that we support.
GUIDO ROSSO: So as you can see, Flare
removes the churn between design and development,
and it really allows you to make great design a fundamental part
of your process.
I'm really excited to announce that Flare is launching today
on 2Dimensions.com, and it's free.
[APPLAUSE]
LUIGI ROSSO: If you're a developer,
you'll be able to find a bunch of assets on 2Dimensions.com
that other designers have already shared
and made available on there.
In fact, all of the assets for the History of Everything app
are available for free on 2Dimensions.com.
We're really, really excited to see
that Flutter is going 1.0 today, and we
can't wait to see how you'll use Flare with it.
Thank you.
[APPLAUSE]
TIM SNEATH: Wow.
Thanks, Luigi.
Thanks, Guido.
So that is Flare.
Flare bridges the gap between designers and developers.
Designers are, at last, able to fully participate,
from beginning to end, in the development of an app,
creating interactive content that can evolve along
with the rest of the app.
[MUSIC PLAYING]