Optimize Flutter Apps Using Dart DevTools by Aswin Gopinathan | Flutter Fest Workshop | GeekyAnts

right am I audible to the end perfect so before I start let me start with the basic question how many of you have created flutter apps here mostly everyone so next question how many of you have created apps for different screens of your mobile like there might be a different screen like small screen big screen how many of you have written code for that cool that's responsiveness that's with respect to the UI what if I say you have to do the same thing when it comes to the hardware as well like you have to consider the performance of your application for different app sizes so another different phone says it's like if I consider my old Lenovo phone from 2016 the app that I run might not that I create now won't run properly in that so that is something that we need to consider before we actually create apps so today we are going to talk about how to optimize your flutter apps using devtools so if you would like to follow me while I'm coding here just go over to this link and clone the repository and run on your local machine so it says bit dot ly slash geeky flutter so let me start so my name is ashin gobinavan I'm a software engineer at zest money um I am mostly active on Twitter you can follow me on my Twitter handle and that pic I took during the lockdown so I look different now yeah so what are we going to learn today so we're gonna learn about five things in devtools that is flutter inspector flutter inspectors like the Sherlock Holmes of flutter adapters you can actually analyze your entire application how it looks when you run and all those things the second thing is app sizing tool it will give you an information about your application like the size it consumes when you put into release the third thing is performance overview how your application performs while running on different devices and the next one is network and we'll be talking about CPU profiler so let me just get started but after this talk make sure that this doesn't happen to you adding a small optimization should break your entire code make sure then by the way optimization you add doesn't I mean doesn't break your code make sure that it runs smoothly that's the basic idea for optimizations right so let me get started then but two things you need to keep in mind while optimizing your flutter apps always use profile mode there are different modes in while running your application when it's a debug mode which we usually run while debugging applications the second one is the profile mode and the third one is the release mode which we use while uploading the applications to the Play Store the app store and the next point is avoid premature optimizations it's basically it means that after what I'm gonna tell today you don't have to follow the same steps every time you create a code it's like more like uh be optimize only when it's required not like it's a normal practice or something it's something we optimize when it's required so always avoid premature optimization now let's get started all right is the phone visible to the back all right how about now good so let me just run the application it's already running actually somewhere where is it running um yeah so this is the application that I'm gonna build and already built so we're going to optimize this further by the way I'm a big French fan so if you're not like these are the characters and Friends so let me just put it over here now let it be here so I've already written some code codes all these things so if you click on each character there'll be certain things like animations or certain actions will be taking care of that so we'll be optimizing it further by analyzing the entire I mean entire Matrix that dot devtools give so in order to start with DOT Dev tools we go to I am using vs code so we directly have option to open Dev tools so on the top you can see that open Dev tools we click that and open devtools in web browser it directly starts in Chrome because that devtools are highly supported for Chrome so it usually doesn't open Safari or other browsers so this is that Dev tools let me just zoom in a bit all right so I'll standard flutter inspector flutter inspector is basically the Sherlock Holmes of dark devtools you can analyze the entire flutter application using this particular tab so here we can get an entire hierarchy of how we have managed your flutter core it shows you the hierarchy of widgets how we have aligned everything in your particular course so obviously we'll start with the material app followed by a certain home page or anything similar that you write in the code so this gives you an example about how your entire widgets are painted onto the screen so let me just zoom back a bit all right so this is the layout Explorer which gives you an idea about what each widget does what are the information about each widget so in this open One widget here I think it hangs for me this minute all right so I am considering this image widget that I have given for this application let me just so here you can see a lot of images so the hierarchy that is shown over here is for this particular screen so here you can see an image widget and we have the corresponding widget over here so when you click on a certain Widget the widget details 3 shows up the entire details about that particular widget like the values that you assigned for each of the attributes in attributes for that widget and also there are certain things at the end which gives you an idea about render objects so today Sri might be talking about render widget how the widgets are rendered onto the screen towards the end of the day here we're talking about how widgets are rendered onto the screen so this information gives you a detail about the entire render object part of the widget tree so now um basically here let's let me select a widget here we have selected a card widget this shows the details about the card region like how much width it occupies and how much height it occupies provided that you have not given any specific bits let's say I am using here a great view dot Builder where I have not mentioned the width required for the particular widget it automatically takes up the widget width according to the scope that is given so that the scope here is the entire screen width so the bid automating comes up to be 196 right it's equally dividing the widget based on the grid View and the details you have given in the cross axle main axis facing over there so if you are not sure like how much width your application your particular widget is taking up you can just open the widget tree and here you'll be getting the details about the widget so that is something that layout Explorer helps you will find it but there are more a lot of things you can do with this uh the efficiency on the top um right corner you can see five options here slow Animation Show guidelines up till highlight oversized images so these are ways by which you can manipulate the visual Aesthetics of your application such a way that you can understand how each widgets are laid out to a screen so let me start with the slow animation so I'm going to select this option now what will happen is let me restart the application here so what will happen if one of the animations are there in your application it will be slowed down by five times so that way you can analyze how each animation application is working how they I mean how they are formed onto I mean how they are rendered onto your entire screen so let me just open one screen over here you can see it's slowly coming up let's open another screen the animations are performed very slowly because we are analyzing how the animations work in slow motion so that is one way of analyzing slow animations the second approach of flow animation is by writing code you don't have to necessarily open that Dev tools every time you will just write a single line of statement to enforce this slow animation application so for that we go to the void main function because it is the entry point of your application here we're gonna give a variable time dilation equal to 5. this means the entire animations are gonna be five times slower and this variable belongs to the scheduler package or within threadup module itself now let's let me just it will be turned on here because we are using the variable and now when we start and the same effect let me just put it back to one so that we can visualize how it's happening it's the same thing because I've turned on here sorry it by if I set the value to 1 that means we are setting the real actual behavior of the animations so depending on the value we give here that many times it's gonna be slowed down so that we can analyze the entire animations that happen in the application this is very much required when you are building a flutter application that has a lot of animations in that sometimes animations happen so fast that you never know what happened so this time dilation actually helps us analyzing each and every um animation of your application so now let's see I'm just going to remove this from here so that was slow animation the next thing is show guidelines so let me just activate this one from the devtools dashboard it's already activated so this one shows you an information about the widgets how they are rendered onto the screen so this green arrow Mark shows the direction of the scroll so let's say I am using a grid view.builder over here in the home page I am using grid view.builder by default Builder as an access of vertical Direction so that means whatever the widgets are rendered onto the Builder branded by the Builder it will be aligned in a vertical manner so this Arrow Mark shows the direction of scroll of the particular application so in case if I change the axis to horizontal uh let's see if it's it will work here scroll Direction axis dot horizontal in this restart now the direction has changed the horizontal Direction now this scroll will also happen in that direction itself so this particular guideline shows how you can how the widgets are rendered onto the screen in which direction they follow and what are the different types of widget talking about different types you can see blue color boundaries around the widgets these are called the render objects uh it's uh you might have seen in computer vision like once something is related there will be bounding boxes around the object so this is something similar to that the bounding boxes over here represent each widgets of the widget of the application so each of these blue lines indicate that it's a widget and it's surrounding the widget that is it is actually rendering onto so now so that's that um let's see another example over here okay yeah there was an APA running so that's the delay so here I have a list view that lists all the um some items over here so here you can see two green arrow marks over here that is because let me just open the screen so here the pro the thing is that I am using a listview.builder initially that is something that is defined by the one of these Arrow marks because I am using a list view Builder over at the bottom and the entire screen itself will be a column will be sorry just again the entire widget itself is a column so there are two items over there one a column and inside there is another list reader Builder so these two green lines represent one is for the column and the other one is for the Builder list without Builder so similarly you can analyze each and every moment of the widget or the axis of Direction they are rendered onto so that is the main advantage of using this show guidelines option next um yeah I'll start the show Baseline option so this is more of it's more related to the text widgets that we use in our application so basically let me just open any screen over here so you can see a green line over here this shows the text widgets are aligned properly it's something like when we used to write um back in school time we used to write a paragraph or something on a rule the book it's something like that we follow a ruled approach over there so this Baseline shows if the text widgets are aligned properly we make sure that it doesn't go beyond the line of something so that is Baseline there's nothing much to talk about because it's basically showing whether all the widgets are aligned in a single line and it's mostly used by the QA people so that they can actually get back to us with bugs or something so that's one approach now next thing is my favorite this this is called highlight repaints repaints is a major issue when it comes to flutter application it basically shows what all widgets are getting repainted unnecessarily let's take an example of this particular screen the border of the entire application this is a rainbow color thing that is glowing from different colors that means the entire screen is getting replaned over and over again so that means like just for this particular circular progress indicator that it's at the middle the entire screen is getting repainted over and over again which is not a good behavior when it comes to Big applications so in order to avoid that we're going to do something we're going to go to that particular widget we're gonna open get this one sorry so these are the circular progress indicator which you are seeing at the bottom here because of that circular purpose indicator the entire screen is getting replanted over and over again to the canvas so in order to avoid that we're going to wrap the circular progress indicator with a repaint boundary widget so this will make sure that the repainting happens only for the circular progress indicator now you can see the Border it's a single color it's a green color that means it's not changing that means it's not getting repainted over and over again so because of this circular progress indicator we don't want the N test need to be re-rendered I mean repaint onto the canvas so wrapping the circular purpose indicator with the repaint boundary constraints that repainting to the particular widget that is that requires repeating so yeah so if I just put it back notice now the boundaries are not changing because I have used repaint boundary now if I hurt these reload it's back to the rainbow color of the boundary because it's repainting for every animation that is happening in your application same thing applies for another animation that I've given here if I click on the sandwich it's gonna rotate it's an animation and the entire screen is again repainting on its own so now let me just put it back I'm gonna go to that particular widget so it was this gesture detector no not sorry oh it was the other widgets just give me a moment all right does the animated below which was animating the entire screen I mean entire image over there I'm gonna wrap it with repaint boundary now let me just restart true now you can see only that particular widget is getting repainted the rest or the entire screen you can see the boundary color Remains the Same so that means only the widget that is required to be repainted mostly when animations happen they have to be repainted so only that widget that require repainting should be should be wrapped on a repaint boundary widget and that way you can avoid the entire screen from repainting but this has a problem the problem is that um every time this animation triggers a repaint it will create a completely new canvas over there but in flutter canvas Remains the Same it's it's like a single canvas the value inside the canvas keeps on changing every time repaint is required but here when we wrap it around a repaint boundary the canvas itself gets changing it's changing every time we repaint the call the repaint method so that is one caveat with this particular widget that it's creating the canvas over and over again so that that could rate leads lead to some performance issue but that's I mean that's based on our analysis like whether we need we need to work on that or not so I'm just gonna change it back okay well yeah that was we highlight repaints now comes my favorite thing another one of my favorites that is highlight oversized images when I turn this on and restart the application something's happening it looks like a ghost over there but it's not a ghost it's actually pointing us out which images are overly sized over there I mean it's more like let me open this particular image let me just turn back it's back to normal so let me just open that particular widget let's take one of the images over here um so when I open I'm just examining the size of this particular image so you can see it's around 82 KB but that's okay but the resolution of this particular image is very high compared to the amount of resolution we need for this particular widget this region just needs a small area for rendering it but the resolution of the image is very very high it's too much high that don't need that much resolution when it comes to very small widgets so even this throws an exception essay let me just show that when you activate this particular option and it's already activated here if you go to the debug console you can see exceptions are being caught this basically tells the widget let's say the image friends dot PNG the one that I use at the bottom has a display size of this much resolution but a decode size of this much has been used that means an additional 1927 KB is being used by your application because a big image is actually compressed to a small widget over here we don't need that much resolution when it comes to rendering on the smaller widget so that's the main reason this particular widgets are inverted and vertically um what's mirrored so that's how our Dev tools tells whether certain images are oversized or not so in order to solve this one what we can do is we go to the particular image widget should be here yeah so the image dot asset or any image methods that you use will have attributes called Cash height and cash width so let me just set a cash height to this oops cash with as well now let's let's restart the application it's still having some issues let me see height should be 300 I mean the size box I have provided a height of 300 let me just remove the width it because it's automatically taking off still some issue I don't know why let me just check um let me start with the bottom which is easier I'm like oh sorry I was in the wrong file I need to go to home page and here the height that I've given is 350 and this image which will be here cache height I'm pasting the height required for the widget and let me just restart the application now you can see it's not getting flagged by the dark Dev tools so that is how cache height Works cache tells the compiler or whatever runs the flutter engine it tells it that even though we have a bigger image we don't need the entire resolution we just need to Cache the entire image into a smaller widget height the height that is required for the particular widget so here we have defined a widget height of 350. so we just cached the entire image to a 350 height something I mean image so that way we don't have to worry about some additional data being used um we have one more exception here that is for the the image that was available here so I'll just redirect to that here also I'm gonna set the cache height to 200 because I have given the height of 200. I'm going to restart again now that is also not having an issue because we have given a cash height that is required for the image widget we are not using any additional spaces over there so that way we are removing the issue that was flagged by the dev tools so that is how you find the oversized images and correct them so this can be an issue when you are building an application for the play store or the App Store when you build an APK or an ipf file these additional science can add up to the size of the application let's say your APK was meant to be 30 MB but because of this it can reach for TMD of 50 mb so solving these issues in your application early on can actually prevent oversize for your application so that's with that well that's basically flutter inspector now I'll be talking about the app size part of the devtools where you can analyze the entire build that I was talking about so in order to generate the bill we'll be using a command so the command here is zooming in a bit oops so the command is flutter build IPA and that's basically the build command for both apks and IPA if you're building an APK it will be a flutter build APK since I'm using an iPhone over here I'll be using Twitter build IPA then we will be using a flag called analysis analyze sorry analyze size we'll be using this particular flag to get a size information Json file which we'll be uploading in the dev2 so that we can analyze the entire size information of the application so let me just run this application so the file that it generates is called the size information file it gives an entire information about what all constitutes the entire build so let's say the bill takes around 30 MB so we need to know what constitute the 30 MB what are contributes what is called contributing to that particular 30 MB so this particular information gives you an entire overview about what all I mean it's the reason that application build came out to be 30 MB so let's wait for this to complete it usually takes some time depending on the application that you have online something happened here yeah so the size information has been generated by our terminal and you can actually get an overview about what all particular items consider how much space in your application so the entire build that was created have as around 82 MB size and here it gives you an entire overview about whatever and what are components in the application took how much space in your entire build so this is just our view we'll be exploring it further here so it's generated at this particular point I'm just gonna open that one this is the file I'm just going to delete this okay my I think my application froze a bit yeah it's completely Frozen so might have to wait a bit um okay um great yes I'll just restart again okay even they have tools is not opening now let me just open this one yes sometimes you know like when we are running from vs code sometimes the dev tools won't agree to open so in that time what you have to do is go to terminal type the command dot Dev tools it will open depth but we have to paste something over here the item that has to be paste will be available in a debug console so I have to just restart this application yes so when you restart the application once the application starts you'll be getting a link to the debug observatory in your debug console you just have to copy that and paste it over here usually what happens is when we run from vs code it directly opens up but due to some reason I don't know why it's not opening up right now in that case we follow the terminal approach we use the command dot Dev tools and that will host a local I mean it will open the devtools in localhost in some server over here and what we have to do is once yeah this is the VM service that is created by flutter framework and we just have to copy this entire link I don't know if you can we can call this a link but this link we can copy and paste it over here and when we click on connect it will open that Dev tools so this way in case your dark developers doesn't open up from directly from your IDE you can just use the terminal approach so we were in the app side section and I'm just going to zoom in again yeah and this is going to import the file that has created and again it flows okay well it doesn't agree with me I guess it's just freezing again and again let me just start a new instance okay I guess app science is having some issues when it comes to it I'm just gonna drag and drop its better I guess we can back and talk by the way instead of randomly opening it so I'm just going to click on analyze size after you have imported the Json file that was created after running the build IPA command or the build APK command accordingly so now here you'll be getting a graph of how much um the capacity I mean how much space your entire build is taking up so the entire framework that is the runner.app that was generated has around 76 MD so when you click on it it will again split into a different section and each rectangle shows the proportion of that particular module with respect to the size so if it's taking up a majority space it will be a bigger bigger rectangle over there so the size proportion of the rectangle with its with respect to the size it takes up in the entire build so if the rectangle is Big so that means that particular module is contributing more towards that particular um size of the build so I'll be opening our app part because that's where we have written the app code so here you can see the app code is just 4.1 MB and the remaining around 72 MB is contributed by the flutter framework in other files that are required for the running of the application so similarly if you are planning to create a similar application using native Android or native iOS it will be close to 4mp it might be around 10 MB or 15 MB because it won't have the boilerplate code that flutter framework provides so now you can analyze the entire contribution of each of the modules within the application so let me just open up framework foreign book takes around 19.9 MB over it's shown over there and the assets itself is around 15.4 MB so that means all the assets that I've given over here the entire asset folder contribute around let's say 30 to 40 percent of your entire application so one way you can reduce your app sizes by reducing the quality I mean reducing the size of your images all the assets that you're planning to use in your application so now let's see here so this is S3 as well and I've used it for some purpose in the application so these are the images that I actually downloaded from unsplash.com and basically the image that you download from unsplash will have a bigger side because they have a bigger resolution so that's the main reason I mean all these files that I downloaded from unsplash are contributing Appling a major role in contributing towards the size of the application so one way is you can actually reduce the size of your image by compressing in or might be using a webp for a format file format mostly remains will be jpg PNG or something like that so if you are using webp format it will be even compressed because they follow a low C and losses compression it's like following both the compression techniques so webp is considered a better approach when you consider using images in your app assets so now let me just close this so this is basically the entire app size section you can actually analyze each section how much each space is contributing each module is contributing to application and there are certain sections at the bottom so I'll start the Dominator three part so here it gives you an entire overview about what all packages are being used in an application so let me just open one hour here all right the name of this entire application was okay I don't know why I gave that but here I'm using HTTP package and other packages in the application so this will be showing it three like Steps about what all packets are being used in your application so that we can get to know whichever packets are actually contributing the size and which are not required which can be avoided from our side so when you click on certain items let's say HTTP it will also show which all other packages are being imported by that particular package we have not directly imported the string scanner package but it is being imported by the HTTP magnet because they have implemented that so if you go through the perspect over here I'm talking about this string scanner if I search in Pub spec not here I am not given any package with the name String scanner but it somehow ended up in our application and it's contributing towards the size of the application so we might be confused like why from where it's happening so we have the entire tree over here which shows from where it's being called so we have used the HTTP package over here that we mostly use for our Network calls we have the HTTP package used over here the HTTP package calls the package HTTP parser which in turns call the package string scanner that's how string scanner ended up in our application so this is the best way you can analyze the entire package three of your application we have one more option over here called the call graph this actually gives you an entire hierarchy of how the packets are being called from your application so let me just start with the package any family package let's take let's take the hdb package so the HTTP package is called from the entire application I'm named the application okay so that's why it's called up the package is called Pokey over here so the sorry [Music] um let me say it yep so the package was called from the Poke baggage or this entire application we are implementing and it in turn calls the app package that is shown over here so the list that you see on your left side is from where the package where this particular HTTP package is being called and the package that you see on the right side is what are packets this this particular HTTP package being calling is calling so this will give you an entire hierarchy about which package is called whichever package and how they end up in your application so this is the main purpose or the main benefit of using the app size tab of your flutter application so now let's app says till now do anyone have any questions till now like we can go forward with that does anyone have any questions with whatever I talk till now all right and feel free to like stop me in between if you have any questions so I'll be happy to answer that and now let's talk about another tab over here that is called the performance tab so this particular tab gives you an entire performance of your application it's very much required when you're building an application for a smaller screen app phones so let's say we have a Lenovo Vivo phone from 2016 or 2017. we don't know how the application is going to run on that so after running the application you can enter you can analyze this particular section to know where all some glitches might happen because of some framework issue or something related to the hardware so for that we just run the application first foreign so whatever action we do here let's say I'm doing certain actions we can do anything so all these things will be noted over here it will be recorded over here so these graphs that you see is called the Jang graph or the frame graph we can say so most of my application follow a 60 frame per second approach I mean the rendering happened in 60 FPS so that means around 60 frames are entered every second so if you do the math let me do the math that will be easier um calculator so we have 60 frames per second so we need to find out how many how much second is provided for each frame so for that we do 1 by 16 . it's around let's say it's 16.6 milliseconds are required for each frame to be rendered when we follow a 60 frame per second approach that means each the time allocated for each particular frame is around 16.7 milliseconds what if it goes about that um most of you might have played pubg right so when you're playing pubg sometimes your phone starts to hang sometimes glitches happen sometimes the frame starts to skip all these things are due to because the frame that was used for rendering when there was 16.6 seconds milliseconds so if a particular frame takes more than 16 milliseconds it's gonna be a junk it's called a junk and that tank leads to some glitches or some rendering issues in your application so when it comes to mobile application it's also an issue because certain animation follow a 60 frame per second approach and let's say some frames went about 16 milliseconds that means that that frames are going to be skipped by the operating system so the OS is going to skip those frames because it went above the required threshold time so that is called a junk so now let's see if any Jank happened here yes one Jan happened so this particular frame took around 30 millisecond to render that was around 200 more than what is required from the operating system so the OS expected that this particular frame will be rendered within 16 millisecond but it took around 30 millisecond so that means this particular frame was skipped by the OS and let's say if it was a vital frame it would have been completely skipped by the application so this is something we need to observe while we are running certain applications so when I select this particular frame it gives you at what point this particular build I mean this particular junk happened so if we keep on zooming here it will show all the flutter activities that happened while this particular frame was going on this things might not make sense to us because this is the internal working of flutter how it works behind the hood and what all activities or what all methods or functions are being called from the application so this will give you an overview at least an idea about at which point this particular junk happened so if you keep on going ahead this is the point that's the end point of this particular chart so that means something so while rendering some particular animation this particular junk happened so since I was doing a lot of movements here we never know which particular point is that but if you are very specific let's say I close this one and I open this that's the only action I did now let's see it will keep on going because um background tasks are being run by the flutter framework so we can't do anything but we can't scroll also sometimes we just pass it over there and we go back we go towards the end so this is where I started the animation and till now you don't see any junks anywhere so that means that particular action that I did from the home page I clicked on this particular image and opened this one no particular Jank happened now let me just clear this one restart this let it keep on going and doing some action survey here some animation is happening over here I just drop in I just pause this one here let's go back and see if that animation cost any junk still when there was something here no that means even that animation did not create any junk in your application obviously it won't because it's a very small application and the animation was just translating the image in a clockwise Direction so but when we actually Implement some let's say complex animation this particular Jang is very and this particular Matrix is very much important to us because we can analyze which animation is creating issue for our user but if and since I'm running an iOS simulator they won't be much junk but if I run a very old version of an Android phone I mean if I run the application on Android phone chances are there might be more junks happening because the processor for Android the older version might be less compared to what the application is built for so this particular Matrix gives you an entire overview about how your app is performing in each of this particular frames so whether it's performance now let me start with networking this is a very interesting thing for me because when we are let's imagine we have created a big application let's say Google Play is build using flutter and there are a lot of API calls being run in there and if you check the logs for that particular application let's say you are the developer for that and you check for the locks in their application we never know like what API calls happen and how much uh data were consumed for that so for that we have a network tab Network tab gives an entire information about how much and what all Network calls happen in your application so I have a section over here which calls the API from the background and it fetches some data now I have the entire information about which API was called what was the request header what was the response that it gave entire information can be gathered from here so we don't have to go through the entire debug console and search for the application API response and headers you can directly come to this particular Tab and search for this particular I mean response and headers over here so the API that I was calling was a food API because the foods are displayed over here here we get information about the request URL that was called the request method the status that is responded with was a 200 status okay and the ports and every details that a back-end engineer would need to debug what happened in your application and it also has information about the headers what are I mean there are a lot of request headers that we send to the API and this list all of them and we also have the response once we get the response what most developers do is we go to Json formatter and we just paste it over there so then we can analyze the entire API response one issue with debug consoles that sometimes the response that is printed might get translated at the end you won't be able to get the entire response unless you're using some log method or something so that in that case this particular time is really helpful we can get an entire API response and we can just format it accordingly so that was Network time um let's uh the remaining time I'll just give you a walkthrough because there's nothing much to talk about then I'll just give you about trouble how it works sure um yeah so CPU profiler so what CP profiler does it gives you an information about how much information or how much processing the CPU is doing for rendering some some of your application screens or animation something like that so let me just so this is a record basis so I have to record the flow before you actually analyze it so we run the application here let me just keep it here it will be easier so we start the recording we perform some actions on the application not here so we do some whatever you want to do you can do some activities over here and we stop the recording so this will generate a matrix about the entire action that you took for the application it will show how much time each of the events took while you were doing the actions so whatever you can see over here is the internal working of a flutter application these are the things that happen on the flutter um on the back and behind the hood of the flutter framework so these are all the activities that happen and how much time it took for them to run so this will give you a proportional value about how much with respect to the entire processing time did that particular process took in the application for example this report task event some event that happened on the back end I mean on the backend code of flutter took around one two three zero milliseconds that contributed around 11.6 percentage of the entire CPU time so if you are really good at if you know how the entire flutter framework works you can actually think about how you can reduce this for good time you can analyze how much we can reduce this particular time by optimizing the entire framework or the code that you write so let's see if there's anything familiar to us um okay all of these are actually flutter events so this is nothing much we can think about here so but that's how you actually analyze the entire CPU performance like you run the activity on your phone you record the metrics and then you analyze how much each of the activity took so this will basically mean that if any of this particular section is taking more time that we need we may have to write a better course so that that particular function can take lesser time so that is one main advantage of using CPU profiler well there's nothing else here well that's actually a CPU profiler and let's move on to the next one memory this is very much important when you are when your user is using your phone it's definitely a much capacity in there I mean they're running out of space and this particular section gives you an overview about if any memory leaks are happening let's say if I did not I mean in the home page or character I have an animated animation controller if I do not close this animator I mean animation controller object memory leaks might happen that's something we have learned in our Basics like whatever you call you have to dispose them otherwise it will create memory leaks so this is just a single variable over here which won't contribute much to memory leaks over here let's say you have like 100 animations in your application and the 100 controllers you forgot to close so now the graph will go above the required point that way you'll get to know whether the memory leaks in your application or not so this particular tab is really very very important when it comes to analyzing memory leaks and how much certain code is accessing your certain code is contributing to a memory so that is that and debug is similar to our debugger that we have in vs code like we can attach break points over here anywhere it's similar to that how it works over here but one issue with the debugger in that Dev tools so let's say if I add a debugger over here I've added a debugger here but if I restart the application it will go off so it's an existing solid it's an existing bug in the flutter Community when it comes to dark devtools so if you are looking forward to contributing to the FedEx package or Dev tours this is one issue you actually look into like I add a breakpoint here and I restart the application the breakpoint is getting dismissed over there but doesn't happen over here let's say I've added a breakpoint here and I restart the breakpoints are still there so this is an existing issue with devtools which you can actually think of contributing to well that's debugger and logging we all know that how loggers work in debug console like if you write a log statement and it will get printed over there so the logger section basically talks about the logs that is printed by your application well we have one more tab this is the providers tab it is not applicable for this application because I am not used any block providers or any type of providers my application let's say I have a parent block provider which actually contributes to around 10 or 20 block no not block uh 10 to 20 providers are being used in the application so at a particular point it will list down all the providers here and for each provider you can see how many what are the values that are stored in the provider rather than printing it from the dashboard you can actually see the entire list over here so that is basically provide us and I think we have covered everything over here here you go so do we have any questions till now like is there anything that you would like me to clear yeah please yeah yes correct okay so for that actually we have some option here um there was announced more debugging option I forgot where it was there was an option by which we can turn on the widget we can see which widgets are being causing that issue so actually forward where was it they were selected yes you can see which widget is causing a junk so we have an option but I forgot where it was um yeah yes yeah you may have to analyze the entire Matrix that is generated because at certain points at certain frame one animation may not finish certain animations may require more than one frame so you have to analyze the entire tree that is generated so that you can get an idea about which animation takes up which range of frames so that is one way you can do it and coming to the first question we're talking about there's an option called track widget bills inside the enhanced tracing option which will track the widgets that is causing the performance issue so by I'll just show one example I am just doing something here oh it was clear okay so I just clicked something okay let me just select some um it's pretty hard it's hanging bed all night let me just remove this one oops I'm sorry actually my laptop is hanging a lot due to which um yeah I know I'm able to see we just have to zoom in a bit yes you can see here an animated Builder was shown so that means animated Builder was the widget that he was using to create the animation so you can actually see at the at certain point I selected this point and at that particular frame this particular widgets were being rendered so if you turn on the enhanced tracking and enable the widget tracking option you can see which widgets are causing the performance issue so that's how it works so any other questions yeah so I'll just wrap it up so that was for that's the entire part of the thing so if you would like to connect with me on social media and just go to Twitter or follow me on LinkedIn or even Google search my name because my name is pretty unique so you can see a lot of social medias over there so yeah that's basically thank you so much [Applause]

Channel: GeekyAnts

Views: 4,307

Keywords: Flutter App Optimization, Flutter Tutorial, How To use Dart DevTools, Flutter Fest Workshop, Cross platform app optimisation, Flutter Tutorial for beginners, Debugging Flutter apps, Debugging Flutter apps programmatically

Id: dTNMxeIfS-o

Length: 57min 40sec (3460 seconds)

Published: Thu Oct 27 2022