[MUSIC PLAYING]
FILIP HRACEK: Hi, I'm Filip from the Photo Team.
And today I'm going to give you some tips on how
to make your apps performant.
We have a growing set of documentation pages
about Flutter performance at this URL.
This video is meant to give you only a high level overview.
Flutter apps are performant by default. For example, here's
an app that orbits 100 individually painted containers
around the screen, recomputing each position every frame.
All in Dart and Flutter, all smooth at 60 frames per second.
That is to say, don't optimize majorly.
Test first, and only if your test reveals an issue,
then optimize.
Also, Flutter and Dart themselves are getting faster.
For example, some very important performance benchmarks
saw significant improvements just in the last few months.
That is to say, the Flutter team really
cares about making it easy for you
to build performant apps without you having to do all the work.
Still, sometimes there's work to be done.
Sometimes you want to squeeze that extra bit of performance
out of Flutter or you see a performance issue in your app
and you don't know why.
For these reasons, we have these videos, the Performance Related
Pages on flutter.dev and, of course,
the Performance Tooling.
This five-minute intro video will not
teach you everything you need to know about performance.
I'm here to give you some pointers and some terminology.
Broadly speaking, there are two types
of performance issues, those relating to time
and those relating to space.
Performance issues relating to time
arise when something takes too much time
or when it forces the device to run at a faster pace.
Jank is a time-related issue.
Jank is when there is an animation that
is otherwise smooth, but it skips a frame or two.
The effect is unpleasant.
There was not a problem on your side, by the way.
It was just us trying to illustrate jank on video.
Anyway, jank is when your app spends
too much time building a frame.
The frame is not ready in time, so Flutter
has to skip one or more of the others.
What you see here is what we call the timeline view.
The dotted lines are when each new frame should be ready.
We call them vsync.
The green bars represent the amount of time
your app spends building each frame.
When the bar is short like this, all is good.
It's ready in time for its vsync so it gets shown.
But when a frame takes too long to build, it can be missed.
Flutter has nothing new to show so the UI kind of freezes.
That's jank.
Sometimes your app doesn't jank but it
consumes too much battery.
That is actually a very similar issue.
Here's what the timeline view looks
like for a battery hungry app.
Every frame takes way too long to build.
It doesn't jank, thankfully, but the device
needs to do a lot of work.
And for mobile devices, that translates directly
into shorter battery life.
Ideally, you always want the timeline view
to look like this.
And of course, if you're not showing an animation,
if your UI is static at the time,
then Flutter it is smart enough to not do
any frame builds at all.
So these where time-related performance issues.
What about the space related ones?
Your app might be too big, which is a problem when it doesn't
fit on your user's phones or when it's
too big of a download for them.
Your app can also take too much memory
or it can leak memory, which means you are unwittingly
keeping some memory you don't need anymore forever.
Both performance problems, time-related and space-related
can be awful for the user.
Flutter gives you tools to deal with both.
There's the Performance Overlay, the widget Rebuild Tracker,
the DevTools Timeline, the DevTools Memory Tab, and more.
Check out flutter.dev/docs/perf for more information.
We'll be adding more tutorials and videos like this one
so that you can make your app as performant as possible.
Battery's full, frame rate smooth,
and, ultimately, users happy.
[MUSIC PLAYING]