Stateless vs Stateful Widgets - Flutter Explained - Level: Beginner

hello everyone welcome back to another episode of flutter explained today I want to take the focus a bit more onto stateful widget the last time we are created as they'd less widget and I try to explain you what are the benefits of that and now I want to make it absolutely clear and want to create with you a stateless widget and a stateful widget to compare them together so and now let's get started this project we can recall from the last time and as you can see I created a branch for it stage less verses stateful and as you can see this is our stateless widget from the last time with hello YouTube in the app bar with a small text on the in the center where I want to improve the styling a little bit that we have that we can read it a bit better so I call it science and 38 and now we can see the hello world so now this is a state less widget so let's say for example we want to have a loading spinner inside till we decide that something has changed so we will create up here a value called boolean which says that this is a true or false value so for example loading equals true and you can see now immediately that this one getting yellowish and that calls that because it is called an mutable that means all fields inside of a stateless which would have to be final and what does it say is that if this is final we can only change that by destroying the whole application more or less so in that case I want to do something like if loading I make here a ternary operator so if loading is true we show this part we return this part and if it is false we want to return a loading spinner progress indicator so if I change now this to false we see we have a loading spinner and if I wrap that in a center we have it even what we should have it even in the center so and if I do it true we have it we have to have a world example perfect but now what is if I have a service that I want to call and in the meantime where I wait for something I want to show the loading spinner at first if it's really ready I want to hide it again hmm all right so we have somewhere a function that we want to call that changes this loading so I don't have any possibility here in the loading to say something like loading equals false and go for it because it is a final variable right so whenever I create this widget I finished off that variable and I'm not able to change it anymore from that state one and this means I can't change that value in the meantime I only can change it if I really change the whole widget so this is state less so the state is one set and stays dead state now let's convert that to a state full widget and as you can see I press option enter on the state list here on top of here and I press now convert to state full widget and what happens now is we have now which it created which is still home screen but it extends from state full widget and a state full widget as you can see inside of this class there is no build function now but what it does is it creates a state and it created me a whole new class which extends from the stage object and now we created a state for this widget and as you can see the build function is now inside of the state and this has a very beneficial thing for us because now we can say okay the state is not immutable so we can really change something inside of here and it will crash now because let's see it is not a subtype of stateless widget in typecast I have to reload most likely yeah here we go so and as you can see now here everything is fine so and now I can do something inside of my build fire which is triggered multiple times whenever I do something I can also say loading equals true and now we change the state as soon as we build the whole widget here and even if I initialize the loading with a false value I change it immediately that is just possible because it is a stateful widget so what happens if I click a button somewhere inside of here and let's say if this loading is false I'm showing off the circular progress indicator and now I read that for example in a in a column and inside of that column I have also a flat button and a flat button I can click something and whenever I click that flat button I want to change the loading loading is the opposite of loading so I toggle the loading in that case so fair enough and it needs something a child because it needs a text and I call it let's say loading toggle voila and now I'm just a bit yeah because I have to help reload to flutter hot restart because we want to get rid of the state that is currently inside of our state object and as you can see now up here we have now a centered circular spinner and a button underneath and to make that a bit more beautiful I also give it the main axis alignment Center with that I push it in the center of the screen and now I want to press it and it should toggle loading and what we also will do is we print loading in that case just to take a look if the value has really changed so we're coming into the state we set the value loading to false and we press now the button and take a look inside of what the loading is so I press now Wow okay the print is true even though the state has changed yet so we still have the circular spinner but what happened why does not the container is displayed with hello world well in flutter there is a little function that we have to call whenever something changes the state and if the state has changed the build method will be retry gerd and will recreate the widget for us so what we have to do now is we call that method and whenever we press it we call set state and inside of said state you can see it takes an a parameter function so a function as a parameter if we jump into the front in the whole method you can see this avoid callback so we don't want a return statement in that case and what I will do now is I will do this loading unequal loading inside of said state and after that I will print the loading again so I save as you can see already because the set state will after the hot reload the state will be stay the same as before Andrey triggers the build function which creates now the correct one for us but we want to clear again the state and as you can see we have now the circular spinner and the loading button that if I press it set state will be called and what hello world should appear yes amazing it worked so as you can see a state is much more complex and there is much more inside and I really recommend you if you want to work more with flutter to understand these two concepts of state less which has no state or no changing state with a final property with only final properties and a state full widget which has a state object which can change the properties inside of the class all right so now we know the difference is a bit better from stateless and state full widgets and I really encourage you to try a bit around and maybe Reaper this example to just see how the differences work and also how you can work with the said state because it is a really important thing to learn and understand in flutter so that is everything to for today thank you very much for joining me on that adventure again on the right side you'll find a subscription button and the top of me you'll find two videos that you know already and if you have any questions please let me know in the comments or on Twitter and thank you for watching me see ya

Channel: Flutter Explained

Views: 6,046

Keywords: Flutter, Stateless, Stateful, Widgets, Stateful Widget, Stateless Widget, Development, Training, Learning, Coding, Code, Basic, Level Beginner, Beginner, News, New

Id: Nui8IXeI3Yk

Length: 9min 50sec (590 seconds)

Published: Mon Feb 03 2020