All language subtitles for 23. Updating Correctly with Stateful Widgetsf

What's this state thing I mentioned? In general, state is data or information

your app or your widgets in your app use. State can be things like a username or in our case, the index

of the question we want to show.

So app wide state would be things like is the user authenticated or if we're building an app that users

can use to find new jobs,

we could have the overall jobs we loaded from a server. widget state could be things like the current

user input or are we currently loading data and

do we want to show a spinner or as in our application, the widget state of the app widget we have could

be

which question is currently selected and that state can and typically will change in an application.

However as the name suggests

since we're extending a stateless widget here, this widget can't have state.

Now that might sound very restrictive and strange, since we typically have interactive applications where

things should change,

why would we have widgets that can't change? Typically in your Flutter application,

you will have more than one widget and we'll soon have more than one which is here as well and some widgets

are only there to output something, like that text widget which is built into Flutter. This is a widget

which has no state in it, it gets the text from outside

passed in, that is passed in when the widget is created so it never changes whilst the widget is

there and it just outputs the text, it does nothing else, it doesn't react to clicks on the text or anything

like that.

Therefore, text would be a perfect stateless widget and indeed it is and a lot of the widgets are only

concerned with outputting data with certain styles, certain colors or in a certain structure. Some widgets

however need to change data, like our app here, we want to change that question index and for this, we

can convert that stateless widget into a so-called stateful widget.

The difference between stateless and stateful widgets is that in a stateless widget, we have our

widget and the build method which is used to render the UI.

Now we can pass in data from outside into the stateless

widget through the constructor of that class,

so of the widget class, we'll do this later too. And this data can change and actually Flutter would rebuild

that widget when that external data changes

but inside of the widget class, the data will never change,

we can only receive new data from outside and that will basically rebuild the widget.

Now a stateful widget also has a build method that builds a widget and that renders a UI

therefore but here, we can also get our input data, so data passed in through the constructor of the widget

class

but we also can have some internal state and that's the core thing here and this widget will get

re-rendered, so the user interface will get updated by Flutter whenever either that external, that input data

changed or when our internal state changed and

that's the core difference. Here we really just have a MyApp widget which doesn't take any input data,

so it doesn't even take that but it certainly can't have internal data, internal state because it's a

stateless widget.

Now how can we turn this into a stateful widget now? For turning this into a stateful widget, you could

think that you simply rename this into stateful widget but now we have an error because it's not that

simple.

You also can refactor this in Visual Studio Code and Android Studio if you have the Flutter extensions

installed which you should have. Then you can check your key bindings and search for refactor and you should

find a key binding which you can use to get refactoring suggestions

and if you place your cursor on stateless widgets, if you click on that and you then use that key binding,

here I get the suggestion of converting this to a stateful widget.

We could do that and in the future, we will take advantage of this because it's super fast

but here I won't do that because I want to show you what makes up a stateful widget step-by-step.

Now the first step is indeed that you rename this to stateful widget, stateful widget is a widget,

is a class provided by the material package here,

so this exists so you can use that.

Now however, a stateful widget is a bit more complex than a stateless widget.

It's actually not just one class,

it's instead a combination of two classes.

So let's close the curly brace of our first class here and

let's add a second class with all of that content down there, with the build method and so on

being part of that second class. This is now typically named MyAppState, not my app state but your widget

name plus state after it,

so in this case MyAppState because my widget here is also named MyApp. MyAppState now extends state

and now you can open your curly brace again.

State again is a class imported from material.dart and state is a generic class.

Now comes the more complex part,

why do we have two classes

first of all? Because the way Flutter works internally, into which I'll dive a bit deeper later, is that

the widget itself can be recreated,

this class can be recreated, when the external data changes,

this will be recreated

basically. The state however is persistent,

it's attached to that widget, so it's attached to that element in the user interface which you see

but unlike that class here, it's technically not recreated

and that's important for storing your state so that when you question index changes and the external

data passed into the widget itself changes, only that is rewritten, is rebuilt and our data here is

not reset

and if that's not entirely clear yet, it will become clear once we start passing data into the widget

itself.

So we have that separation so that this data here, the state can be persistent

whilst this widget itself can be rebuilt. Now we need to tell Flutter that this state class belongs

to this widget class

however, to us humans, to us developers, it's clear because of the naming, MyAppState and MyApp

but the naming is just a convention,

it's not a rule and therefore, Flutter does not take the name as an indicator that this class here belongs

to this widget.

Instead to set up a connection, we need two things.

First of all, state is a generic type so we should add angled brackets there and in between, we add a pointer

at our class here,

so here I add MyApp.

This tells Dart and Flutter that this state belongs to the MyApp class,

so this is one part of the connection.

The second part has to be done here inside of MyApp class,

so inside of the widget. There,

we have to add a new method, the createState method.

Now here, I get a suggestion by my IDE and if I hit enter, it automatically adds it for me.

Now createState as you can see is a method that takes no arguments but that in the end has to return

a state object which is connected to a stateful widget.

Now that's exactly what we have down there,

it's an object that's of type state in the end because it inherits from state and that is connected

to MyApp which is a stateful widget.

So here, we want to return a new MyAppState

object. Here we create a new object based on that class, which also knows about this class and therefore

we now connected the two pieces, the two classes from both ends.

Here we also have override again because createState is a method provided by stateful widget,

it needs to be overriden and again to be clear that we are doing this deliberately,

we add @Override here. Now we have the connection set up from both sides

and now with this change, the build method is now inside the state, not inside the widget because the

state holds the data that is used by the build method.

With this now changed and nothing else changed, if we now save this and we restart our application because

if you do such a transformation, hot reload typically doesn't work

so you need to do a full restart with that green arrow here or the shortcut which you chose there.

Now with that, if you go back and you click Answer 1, please watch the what's your favorite color text,

still nothing changes.

We see the output go up there with the print statement which is still part of answer question but still

nothing changes in the UI.

Well the reason for that is that still, even with this transformation to stateful widget and state, Flutter

doesn't automatically update and re-render the user interface

just because we tap the button and that's good because for performance, it would not be that great if

Flutter would re-render the user interface on every tap of the user. If we tap somewhere and Flutter takes

this as an indicator to re-render everything, then our app would certainly have a horrible performance.

Instead we have to tell Flutter that we're about to change the state and that when this state is changed,

it should re-render this widget. We do that by wrapping the code where we do change data inside of our

state, that is reflected in the user interface and the question index is of course reflected because it

controls which question is shown.

So when we change that, we wrap this in a set state function. Set state is a function or a method to be

precise that is provided by that state class which we inherit and set state takes a function, typically

an anonymous function,

so a function here with no arguments and then a function body and inside of this function which we

passed to the set state function,

so a function that takes a function as an argument, that's just how it is, inside of this function, we

move that code or we change our property in this case, the property which also is used in build. Now

with that if we now save this and we do a full restart,

if you now watch what's your favorite color and I click Answer 1, you see now it changes to what's

your favorite animal

and this now happens because of set state and us using a stateful widget. Now throughout this course, we'll

work with both, stateless and stateful widgets. As you learned, the majority of widgets will actually

be stateless because more often than not, you're just concerned with outputting something in a nice

way

but occasionally, you need to change data, you need to react to user input and change something and then

we'll use stateful widgets which are the other core type of widget Flutter supports and knows. By the

way, please note that if you press this more than once, you of course get an error because then you change

question index to two and you would try to access the third question which we of course don't have.