[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]
