Stateful Widgets in #Flutter

hey there everyone they sure and welcome to another flutter video I hope you're enjoying this series and you have already subscribed to my channel if not I'm gonna be keep waiting here until you subscribe to this channel yep I'm waiting yep go ahead subscribe to my channel okay I'm just kidding let's get started and talk about this and yes of course this video is sponsored by amazing orange juice that I got it for myself okay so let's go ahead and talk about more stuff we've already talked about the stateless widgets in the flutter and honestly they are very easy you just usually have some buttons or probably some images or some text and you just display them on the screen no functionality whatsoever but most of the time what you'll be interacting with are gonna be state full widget the widgets that carries some data that mutate some data probably some mutation of the strings probably some mutation of integers or probably some mutation of double by the word mutation are simply means by changing some of the data's probably making a value named my variable 2 from 1 to 2 or probably from 2 to 1 or any given case you got the point now let's go ahead and further explore the stuff now we want to explore how we can convert or how we can create a stateful widget in case you are wondering that I can just extend that to something like this state full widget and it's gonna be all ok and I can declare my variable no it doesn't work that simply in fact we have certain set of rules that you have to follow and there are certain guidelines like you cannot just update any variable variable you like there are certain places only where you can update your variable and I'll point out some of the places where you'll see some of the similarities between flutter and react native as well on their website they honestly say that it is this project is definitely inspired by react native and they follow some of the good practices of react native like never ever mutate the state outside of said state so I'll point that out in a minute ok so if we're gonna learn how we can do that so go into it app dart and we're gonna be making a couple of changes it's not like just one change there are set of changes that we'll be doing so follow along with me and in case you want to have exercise files the link is in the description section for the free course and you can grab all these exercise files from there so go ahead and download them so first and foremost we are going to change this stateless widget into just state and this is like a little bit tricky part a lot of you are not gonna get it onto the first curve at charlotte's it's not that much hard so go ahead select this stateless widget and we're gonna change that directly to just state yes plain state now use these angular brackets which might be little bit weird for a lot of you but it will all make sense just go ahead use this angular bracket and we're gonna just call app here okay now obviously this is not an app just here this is going to keep a track of our state so inside this particular class we will be declaring our variable in a minute and we'll be changing that variable so we're gonna call this simply as app probably app state keeper or something like that it's totally on you what you wrong what you want to call it I'm gonna call it state keeper and now I'm gonna declare one more class now here's a debate point surely we can create a separate file and can put this class there and then can import this surely doable we can create this small class into our main tour dart file of course doable we're right now just for keeping things simple we are declaring it here in the later complex app if you liked this video and subscribe to the channel and we grow more into the series in the complex app we definitely just write all of this code into a separate file but right now just follow along with me so I'm gonna create a class which is gonna named app the reason why I'm naming it as AB because in my main dot dot file I'm calling this class here that's why I'm calling this app here otherwise feel free to call it anything now this is going to extend the state full widget so this is going to be state full widget there we go and we're gonna just extend that now inside this also we need to write some code so we just write something like this notice here this great state this is exactly it kind of a compulsion to have this just like we have this a build here we need to have this here but this is very confusing and definitely it's very useful but we're gonna use that later on right now we don't need it so I'm gonna just come and see that I'm gonna write this create State method manually so I'm gonna say create State pair of parentheses and there we go now inside this create state I have to pass something which is mutating my state entire class of that so I'm gonna just simply say return my state keeper's so app state Keeper and I'm gonna just pass it like that and there we go so this is all happy this is all good this is like I know this is a lot of steps that we are doing but this is all compulsion so what we have learned so far that in order to create a stateful widget we need to create a state we have to define a method create State and this has to return a class which keeps the state and to be very elaborate here I have kept the name of this class as State Keeper okay that's all good this means that now in this exhibit extends to this estate app I can declare my variables that's good so what I'm gonna do is I'm gonna create a simple variable here I'm gonna call this as integer type I'm gonna call this as my value very bad name I should not be using that something more intuitive would be a counter or something like life of player 1 or probably score or player 1 that would make much more sense I'm gonna start it with one just a random value okay so what I really want to do now is as soon as I click on this button this data should be updated so that's a pretty easy stuff you might be saying that hey I would like to go into this unbraced function here the method which is calling it off and I would like to simply do one line of code which is going to be my value is gonna be equal to my value plus 1 surely there are other ways + + + but let's just keep it simple is it good is it going to work let me show you a couple of interesting things about flutter which definitely are coming up from react native so we're gonna save that and we're gonna hit a shift or reload here and we can see everything is fine but the problem is we are not displaying this data somewhere here so we need to do that so instead of this Instagram I can just replace that by a dollar sign and I can say my value so hopefully according to us right now the code says that I want to display this value on to this Instagram let's try to hit shift our hit reload and there is something not so good that we are doing although our app is working so I can see I can just click on it but hey why is it not updating I have changed the value on pressed and it's not even updating so what's wrong going on with here the thing is there is a rule coming up from react native that says never mutate the state outside the function which I'm gonna show you in a minute and we have to follow exactly that rule so what does that rule say just cut this entire line cut that and there is a prebuilt method that you have to call okay and this is not like a choice given this is something you always have to do so there is a method that says set state probably I can write that correct there we go set state okay and there we go now this set state is a method which also requires a method to be passed on so you guessed it right this is like a lambda function or probably a callback function so pair of parentheses and after that curly braces and hit enter and now we can paste that line you might be thinking hey that's extra work why is that because this is how the flutter and probably react native these are all built up this set state method keeps the track of all the things that are changing so in case you want to change anything at all this is the guy which keeps a track of it as soon as something change this called some inbuilt method and then it updates the UI for us the good thing is it doesn't update the entire UI it just updates that component which is being updated into our application so let me save that and show you again the things what happened when we call the set state let's hit the shift art to perform a heart reload which is pretty quick and we're gonna go up here and now if I just click on that now see it updates the thing but the good thing is it's not updating my entire application which is resource heavy it's just updating this particular UI which is good thing for us but the point is having updated this into our app bar is not something that I've planned up I love the Instagram there so I'm gonna just go back and I'm gonna go for Instagram here okay so where we would like to display this thing here this number here and there are a lot of places I can just go on to the scaffold and notice we are having a floating action button we are having an app bar we do have one more element which we haven't studied yet here probably in the later videos I'll go for that and which is body yes of course we are missing it we are working with this entire upper part and the floating action but we do have to take care about this entire body as well so in the body you can pass on whatever the widget you like whether the favorite one so far we have dealt up with is text and we definitely can pass on our variable here I'm gonna put a dollar and what did I name my weight above my value of course and I need to pass it as a string so my come on dollar my value there we go and hopefully now we will be able to see a small very teeny tiny text up here so let's just perform a heart reload there and hopefully we are gonna get that okay there we go I hope you are able to see this this is a very teeny tiny one here and we are gonna just update that surely it gets updated I hope you are able to see there is a six there very small it's very teeny tiny now this is all good we have learned how we can create an app which can change some of the state we have learned about this create state method as well we have also learned about this set state variable value that is there were set state so remember always there are two things which goes side by side one is the create state one is the set state the create state is necessary to keep the track of all the states and the set state is necessary if you want to update any data at given point of time now here's a quick assignment for all of you now I can see that this text is very small and I don't like it you know me I like big things I like big and bold stuff so what we're gonna do here is a quick assignment I wanted to look into the documentation of flutter and make sure this is visible at least like a little bit big taking like probably this much of the screen part or something and if possible change the color of this text element as well probably greenish or something this is your assignment I'm not going to be doing it this is something that you have to do it and you have to post this into the discussion section or the comment section the exact code that you have to use for changing the text or the font size as well as the color as well so I hope you are enjoying the series and let me know if you are enjoying this should I make more videos of the flutter and post them on youtube if it's yes hit that subscribe button and let me know in the comments section I'll surely catch you up in the next video [Music]

Channel: Hitesh Choudhary

Views: 13,297

Keywords: Programming, LearnCodeOnline, flutter, flutter tutorials, stateful widgets, widgets in flutter

Id: Agss0J3NmS0

Length: 11min 54sec (714 seconds)

Published: Wed Nov 14 2018