Lazy Flutter performance | Session

Learn the limits of performance with lazy-loaded content, and understand how Flutter can help build a smooth experience out of the box.
Resources:
Debug and profile your app with Flutter DevTools | Demo→ goo.gle/3ojoYLB
Speaker: Justin McCandless
Watch more:
Flutter at Google I/O 2021 Playlist → goo.gle/io21-Flutter
All Google I/O 2021 Technical Sessions → goo.gle/io21-technicalsessions
All Google I/O 2021 Sessions → goo.gle/io21-allsessions
Subscribe to Flutter! → goo.gle/FlutterYT
#GoogleIO #Flutter
product: Flutter - Troubleshooting and Performance; event: Google I/O 2021; fullname: Justin McCandless; re_ty: Premiere;

[@DebabrataAcharya93]

My man using vim with Flutter. Absolute madlad.

[@kmp3e]

It’s the only way I use it

[@LucaFang]

The procedural generation example is insane! Nice Work!

[@muhammedsibil8116]

flutter is growing faster than speed of photons

[@wdestroier]

Isn't the speed of photons constant?

[@muhammedsibil8116]

@@wdestroier no it's not stable., it's like communist! 😜

[@MitchellWongHo]

Great demo! I really like the procedurally generated map demo 💯

[@onetdev]

Wowzy, this tutorial outperformed my expectations.

[@SethuSenthil]

Yooo! That game example at the end was dope! I really wanna recreate Among Us now

[@justinmccandless]

There was another Flutter game mentioned in the keynote today that looked really good, it was all 2d pixel art.

[@doombois8170]

@@justinmccandless may i know the link or timestamp? thankyou

[@EdmanPAnjos]

@@doombois8170 It was the bonfire engine, I think they didn't mention the name of the game bonfire-engine.github.io/#/examples

[@BooleanDev]

that game was really cool, i never thought about creating a game with flutter

[@danghaile5528]

Always exciting with Flutter!

[@nvrluki7608]

Awesome, just what I needed

[@BlackSkyUploadTube]

Truely and the only Cross-platform developing language! I use it when I make the dashboard for a project without I have learned UWP, and etc.

[@korouiromcha8211]

These are the only videos without ads.

[@JigneshWorld]

Great content, thanks 👍🏻

[@Kiriyaki65548]

Good job Justin! Nice.

[@baraaaljabban9058]

great topic, thanks

[@ROWROLLIN]

Great idea and tips! I'm learning a lot with this video and others. Thank you! 😊 By the way, as a Korean developer who love and use flutter I really thank to the flutter channel for the Korean subtitle! I love him/her who added that on this video. I clearly can understand what you are talking about! 😂 Hooray~! Also I've never heard of Flame! developing game with flutter? wow~ that's amazing! yay~!

[@mhadaily]

Nice tips, thanks

[@Tonkuz]

Super useful ! thanks

[@KhalidWar]

It's insane to see what Flutter is capable. Procedural generation makes me want to start making games in Flutter. Amazing!

[@flutterdev]

There's no better time to start making games in Flutter than now 😁🎮 Check out the newly launched Casual Games Toolkit: flutter.dev/games?gclid=CjwKCAjwp7eUBhBeEiwAZbHwkRuPztRlKf1ygRt07z_vc_D1KnGdqd4Qz8AJrXz0493Tkamx3_aYGxoC8cgQAvD_BwE&gclsrc=aw.ds

[@flutterdev]

Gaming and Flutter? Oh, yes we did! There are some great resources to help you learn how to build an amazing game. Check them out here: goo.gle/3DzLs42 If you do make that game, share it! We would love to see what you create 🎨

[@cricgamerz2181]

A GOOD FLUTTER CHANNAEL

[@glowiever]

the procedural generation is mind blowing!

[@LUKAS3675]

using vim as ide is a nice tough

[@thomasmabika7291]

do state restoration next please..

[@M37Shadow]

Good!

[@ombhd1131]

this is going to be bigger and nicer

[@JAICHANGPARK]

awesome

[@azackmatoff2570]

Haven't watched the video yet, but this is exactly what I need now.

[@heshansandeepa9471]

Awesome

[@tonytins]

13:08 Part UI Framework. Part 2D game engine.

[@yohanweerasinghe5182]

What is the Debug tool you are using? I think you are in Visual Studio code, but what's the debug tool to monitor the MB size and all?

[@AkashSingh-cr7ly]

the procedural generation is part is awesome(zoom in and out) where can i find the code of this part??

[@justinmccandless]

Here you go. I had planned to show the code in the talk but I couldn't fit into 15 minutes. github.com/justinmc/flutter-lazy-performance

[@AkashSingh-cr7ly]

@@justinmccandless thanks for the reply and share the code :)

[@delmontee]

Great video - question...what's the reason for the existence of "singleChildScrollView", when "ListView.builder" always handles it better? Is there any time when singeChildScrollView would be a better option?

[@audisatriaharyanto4609]

I think it is exist if we want to do a simple scroll of a fixed set of menu, widget, etc. Not a (presumably) large set of data.

[@soulwriter9655]

Just Imagine you have a simple screen with few text widgets and you want to be sure that it is readable on devices with small displays. That's when I use single child scroll view. Very fast to write, and you don"t need to worry about its performance because the small text widgets are very light. A good example would be FAQ screen in settings and such.

[@timothychng7747]

Please make a tutorial on how to use Vim with Flutter. Do you get auto complete or in-line docs using vim?

[@ulbsualbrykya7141]

you can use vscode vim plugin on vscode

[@justinmccandless]

Here's my config, should be mostly up to date. I really should clean it up and make a tutorial, thanks for the idea. github.com/justinmc/dotfiles/blob/master/init.vim

[@Wilhelm_LAS]

There should be a way to block popping problem. Like instagram, it doesnt lags when i scroll down.

[@0x0blu]

Imagine non-developers reading the title of the video 😂

[@32zim32]

I can not understand how it is possible that we can run games with a lot animations, sounds, networking and other stuff, but we can not scroll 100 items without frame drops

[@ulbsualbrykya7141]

because of JVM. it limits our app memory usage, the bigger the memory it consumes the laggier it becomes. so we need to implement lazy performance like the video demonstrated

[@pianoman16]

I don't get the zooming thing at the end. Why doesn't Flutter just tell you what cells are visible when they zoom just as it does when they pan?

[@DominikRoszkowski]

Is there any chance to get the demo source code?

[@pierre-louisguidez2040]

Sure! github.com/justinmc/flutter-lazy-performance

[@konfinoyair]

5:19 Justin Time

[@JohnDoe-jc4xp]

so how do we prevent pop in?

[@justinmccandless]

I think there's a tradeoff depending on how your app will be used. You could trade a bigger memory footprint for less pop in by loading more items in advance, for example. I probably would have gone into more depth about that in the talk, but I really wanted to include the procedural generation demo :)

[@rvb6516]

@@justinmccandless hi how can we load more items in advance ?

[@edutech_ke]

Improve dart at the same rate so that we can abandon python for intelligence services . Flutter forever

[@viditkhanna3721]

The scrolling problem with Flutter web is really serious.

[@DigitalDesignET]

Why do I feel like flatter is made just for me?

[@the_fluffychan]

any extension and tutorial for vim with flutter?

[@flutterdev]

Hi there! We think you might find the following resources helpful: Full vim config here : goo.gle/3OZWtOT Dart-vim-plugin and coc-flutter: goo.gle/3zyYH1V goo.gle/3d6LhT2. Hope this helps 😎

[@viditkhanna3721]

We need a widget like recycler builder from native Android.

[@ulbsualbrykya7141]

using SliverList/ListView or SliverGrid/GridView on Flutter is equivalent of using RecylerView/RecyclerBuilder on Android. They give us those recycling feature a.k.a. caching the only needed items.

[@viditkhanna3721]

@ulbsu albrykya but, if I am not wrong, the recycler builder also recycles and reuses the already made widgets while scrolling, which improves the performance. Does listview do that?

[@ulbsualbrykya7141]

@@viditkhanna3721 from my experience, yes it does. I set automaticKeepAlives to false though, so it doesn't keep unnecessary items on screen. you can read it more on flutter's doc about ListView

[@user-tx4rq5sy1t]

ScrollView vs. RecyclerView

[@maksimryabovol4592]

But InteractiveViewer don't have a builder constructor :(

[@justinmccandless]

Not in stable yet, but here it is in the master docs: master-api.flutter.dev/flutter/widgets/InteractiveViewer/InteractiveViewer.builder.html

[@viniciusbarros9361]

I would like a paid internship opportunity for a startup in the US. if you can point me to any opportunities. i'm from brazil and i'm studying flutter for a while and i have experience in other languages. I'm perfecting my English too. if you can help me. thanks