Flutter Performance Tips for Fast Apps

the best way to make your ass perform better is by reaching out to every single one of your users and telling them to get a better phone just kidding just kidding that's a terrible joke in this video we're going to go over some real tips that will make your app faster and better and consume less memory and the second half of this video in my opinion are the more interesting performance tips so make sure you stick to the end but let's get into it [Music] so before we start with any problems we need to make it clear that flutter is actually already really fast and it's only getting faster and faster on every update so most likely if you're seeing some problems it's because you're doing something wrong in the code so hopefully i'll be able to guide you to how to figure out what those issues are and other little tips to make your app more efficient so first things first if you think you have a pretty good app and you see it struggling to run a little bit make sure you're not running it in debug mode when you're debugging the app it compiles with a lot more extra code so that it makes it possible for debugging it's a lot lot slower than if you actually build the app for production so first thing you should do before you try to debug any other issues in in an actual production mode and see if it's still struggling but now that that's out of the way let's get into the actual problems that you could see with performance there's mainly two types of performance issues time and space so space means you're running out of memory your application maybe is too big things like that and time means you're not performing the app as quickly as it should be performing maybe you're not loading frames in fast enough and things like that so let's go over space first actually all the links for this video will be in the description for memory for performance and some videos that i use to learn about this so you can find the size of your app in the google play console or with an xcode or you could build your app with the analyze size tag this analyze size will basically spit out a report for you that you can check where the size is really big which packages are taking up the most space and things like that and if you remember the previous video where we talked about the dev tools they had a memory tool in there so you can not only check what's taking up a lot of memory while you're debugging the app but there's actually another tool where you could put in your like built app production build app and it will analyze the memory for that and it also does a thing where you could find a diff between the two so let's say you had your app that was performing well and then you had the app that was not performing well and you did some update in there you want to see what's actually causing the difference that's a great tool as well unless you figure out your app is a little bigger than you would want it to be well there's four little tips i'll give you to reduce that app size so when you're building your app you could specify a tag called split debug info it takes some debug information i'm not too sure exactly what it is and instead of putting it in together with your app it actually puts it in a different file location but double check the link in the description to make sure i'm not lying to remove the unused code in your code base this is a tip whether you need to save memory or not i think it always cleans up your code base and also reduces memory so do this consistently whenever you're refactoring if the code is not in use it shouldn't be there in the first place and then you've heard this tip from me before to reduce the number of plugins you're using when you're first creating an app we're creating the mvp product use as many packages as you can to get it done quickly but then as your app becomes more mature and you want to be faster actually you should try to remove as many of those plugins as you can last one is pictures and videos take up a lot of space in your app try to compress those as much as you can and that'll hopefully help you save some space as well all right enough talk about memory let's get to performance with the time aspect these issues are a lot more interesting to solve in my opinion because you can really use the dev tools that are provided and you can really find what's causing your app to perform slowly fix it up and hopefully that'll help a lot so once again make sure you're running it in production mode or profile mode i believe it's called as well not in debug mode debug apps are obviously going to be a lot slower so you want to make sure you actually have performance issues and not just think you have performance issues so there are two common problems that are so common that flutter actually put it in their documentation directly so if you're having performance issues these should be the first two things you look for so the first big problem is rebuilding a ui a lot more than is necessary what does that mean let's say you have a screen and you put everything in one build function anytime anything on that screen changes the whole screen rebuilds but really you only need maybe one number to change another issue is potentially performing a calculation inside the build method maybe nothing even on your screen changes but since you're performing a calculation in there it will run that build method and it'll recreate the frame even though nothing changed on the actual screen so just be wary of that another problem i guess a lot of people have is if you're building a list directly instead of using a list view widget so list view widget kind of renders the things as they come onto screen when you're scrolling down the list view it renders them hopefully before they actually appear on the screen but that's how it manages all the performance and memory if you just have a list directly defined where you maybe have a thousand items in there it'll actually try to render all those objects in the frame and you should probably see some performance issues so here i wanted to illustrate a little bit what kind of problems you might have with performance you can imagine each one of these lines is a frame and this little square over here is the time it takes to build that frame so if you've heard the term 60 frames per second let's pretend there's 60 frames here every one second so while performing normal app should look like this the frames don't take up that much time and they're done well before the next frame even needs to start building if you've heard the term jank frame which we addressed in the past video about dev tools so it builds all the frames and then it gets to one frame where it stutters and the stutter is caused because one frame takes too long of time and it goes into the other frame so this causes a little bit of a freeze if you have your app ever completely freeze then that's because all the frames are taking way too long and it's just stuck on that one frame another big problem could be if your build times are getting close you might think that's not a problem it's getting done building before it gets the next frame while technically yes for this specific device but there are three issues that kind of come with that one it will drain the battery a lot faster since your app is always trying to build a frame for the whole frame time pretty much it's going to be draining a ton of battery but another thing is you might be trying this out on your phone maybe you have a newer phone that means for phones that are a tiny bit older a tiny bit slower your app will have freezes all over the place it's not going to work at all and the last thing is phones are coming out with 120 frames per second that means for every frame that we see here there'll be another frame added in here and you see since those are a lot longer than the frame length for that part you're gonna have a lot of problems with the phones that are 120 frames per second as well unless those phones have a processor that's like way faster than this one so you went over the types of performance issues you might see now let's go over some best practices to avoid these in the first place so really the main way kind of the umbrella fix for all your performance problems is to minimize the build cost and time these kind of go hand in hand so some tips to control that is to avoid repetitive work another big tip is to split up the widgets into smaller widgets like you said if everything's in one build method that whole thing will try to rebuild but let's say you have an app that has your main scaffold in one build and every little tiny widget that might change in a different build method only one of those small build methods will actually have to be called if there's something that really needs to be calculated for every single build method then try to put it a different isolate isis is a great solution for any performance issues that you have because you've separated out on a different thread and your whole ui will keep running until your calculations are finished the next tip is to use effects only whenever they are necessary so things like opacity or color filters they actually take a lot of runtime and there might be better ways for you to get the point across what instead of using those widgets and the last little tip is to build lists and grids lazily which means you don't try to load the whole thing all at once build it as you use it using a list view builder things like that and three rapid fire tips to quickly avoid when you're using animations try to rebuild as little as possible try to not do clipping animations and try to not pass long lists into constructors so there we go went over the two main types of performance issues with space and time if you want some help trying to debug these issues click the link for the devtools video it might be in the top or in the description i don't know somewhere in there all the information i used to research this video is in the description make sure to take a look at those to learn more about it and hopefully i've been able to help you solve some of your performance issues today or if not then hopefully prevent future performance issues but that's it if you enjoyed the video make sure to like subscribe and share and thanks for [Music] watching [Music] you

Channel: Tadas Petra

Views: 15,924

Keywords: coder, coding, programming, coding fundamentals, programming fundamentals, OSSU, open sourse, cs university, flutter, flutter development, flutter peformance, performance, performance tips, app performance, app performance tips, memory issues flutter, flutter memory issues, flutter performance issues, flutter performance problems, how to make flutter app fast, fast flutter app, how to make flutter app more efficient, how to increase speed flutter app

Id: MWEz-TB9mGM

Length: 9min 12sec (552 seconds)

Published: Fri Dec 11 2020