ValueListenableBuilder and ValueNotifier in #Flutter App | #DevKage

hey guys welcome to channel damn cocky so in this video we will take a look at a widget called when you listenable builder the main purpose of this widget is to provide you a way to optimize your apps and avoid unnecessary rebuilds of the whole trajectory to understand how exactly this works I'll first show a simple case where unnecessary builds of widget tree happens unknowingly and then I'll show you how value listenable builder can help us optimize the rebuilds so first let's get rid of this text widget I want to return a container as child of this center visit for that I'll call that container method now let's define this method it will simply return a container with its color property set to blue and width and height set to 300 if I save this code you will see a blue square in the app I want to rotate this container about its center using a button so for that I'll add a floating action button to this scaffold let's keep the unpressed function blank for now and set its style property as a rotate right icon okay so now we have a battle to control the rotation now to rotate the square you will need a variable which will store the angle of rotation I'll call this rod and initialize it with zero next I will remove the get container call from here and add a transform widget I'll use the dot rotate named constructor of this widget let's set the child property for this transform a skate container the angle property needs angle in radians as I'll use rod as angle in degrees we will have to convert it to radians for this style multiplied by pi and divide it by 180 for pi I'll have to import arts math package now in the 1 fresco floating action button I will increase value of rock by 30 every time the button is pressed and since rotation value more than 180 will not make any sense I'll reset it to 0 if it exceeds 180 finally we will have to put this whole thing the such state call to actually see the transformation and as you can see the square rotates when I press floating action button now to show you that dole widget tree is getting rebuilt every time we press that button I'll set a breakpoint in the great container method and if I rotate the container again this point will get it now this might not seem like a major issue at first look but if you think over it a little you notice that there is no real reason to rebuild the container everything because all that we are doing is rotating the container why can't flutter just call that container once to get that container and keep on rotating the same container again le so you might say this is happening because I have called it container from transfer music but even if I call the get container at startup build method and pass it to transform visit nothing will change it will still generate a new container every time we wrote it during dinner and this is happening because of such state call it basically rebuilds everything by calling the build method and all this code gets executed again and again but this app it will not show any performance impact but imagine the case where get container actually returns a much more complex widget with hundreds of sub widgets it will definitely show performance impact in that case so let's see how well you listen simple builder can solve this problem for that first I will cut this transform widget and add a balloon listenable builder here I will start get container as the child for this widget next we need to tell this widget which object it should listen to for that I'll make rod variable an object of value notifier I will set its initial value as 0 now we can set this object as value listenable property of value listenable builder next let's define the builder function for this widget this builder needs three parameters context value and an optional widget value parameter right now is same this is because the value listenable object right now holds an integer if I change the initial value of rod from zero to a string a value parameter for builder will also change to a string basically when this builder will get called we will receive the current value of the listenable object I'll name this three parameters as context N and C n being the value and C being the child budget from this builder I will return the same transform widget as before you will only have to sightsee as the child and instead of rod we will have to use then the current value of rod now last thing is to make changes in the on pressed letter first I will remove this such straight column and instead of changing rod we will have to change rod dot value at all these places let's save this code to see the changes so now if I press the floating action button this container will still rotate the same way it did before but let's see break point that's it inside get container and as you can see that container is not getting called when we rotate the container this is because when we change the value of God it just calls the builder of value list level builder and here we just rotate and return the input widget see we are not trying to rebuild the widget so if you put a breakpoint in the build method of this class you can see that it does not get called when we try to rotate the container and if I place a breakpoint in the builder function of valueless level builder you'll see that it indeed gets called directly so that was it for this video in this way you can save the builds of the whole veggie tree and optimize your app a little although I have shown a simple example with integer you can extend similar logic to listen to an object of a custom class that you created I will put a link to the official documentation for this visit in description for your reference hope you enjoyed this video and were able to follow along if not you can always use the comment section to let you know your doubts also all the code is available in the github repository linked in the description so if you liked the video give it a thumbs up and consider subscribing for more such contain

Channel: DevKage

Views: 11,610

Keywords: Flutter, flutter widgets, devkage, DevKage, DEVKAGE, Devkage, android, ios, app development, mobile app development, android app development, ios app development, value listenable builder, value notifier, valuelistenablebuilder, valuenotifier, flutter performace, performace improvement in flutter, selective re-build flutter

Id: YI9DQDCUvPA

Length: 5min 46sec (346 seconds)

Published: Wed Jul 01 2020