Flutter setState Example | Passing Data between Classes

hello everyone today we're going to do some state management with set state so today we're going to build a very basic application let's say we want to build an application that we can choose what our favorite fruit is for the day i know it's extremely valuable so the first thing we're going to do is set up main and we're going to point that to run app inside run app we're just going to point to my app we're going to go ahead and import our material package so this is something we haven't done yet but i'm going to do what's called a stateful widget now i'm not going to go into a lot of details about stateful widgets right now just know that we need that to pass around variables so i'm going to type in the class my app extends stateful widget i'm going to type in override then i'm going to type in my app state create state that arrow underscore my state okay so now we're going to create my amp state so we're going to type in class underscore my app state extends state my app and you're going to see right here we're missing the concrete implementation of state dot built so what we're going to do is we're going to type in override again we're going to type in widget build build context context okay so now we're gonna set up two different variables we're gonna set up a title variable and we're gonna set that to my favorite fruit is and we're going to set up a fruit variable that is just labeled as unknown currently so inside here we're going to start building our look so i'm going to type in return material app it's going to have a home of scaffold inside the scaffold we're going to build an app bar of app bar inside there we're going to do a title with a text of title plus fruit so that's going to take care of the app bar in fact we might be able to go ahead and run this so let's try it okay and there you see it my favorite fruit is unknown so my favorite fruit is currently unknown so just to reiterate what we've done we called material app which gives us access to the material widgets we call it scaffold which gives us access to the app bar and we created an app bar with the title of the title plus the fruit which says my favorite fruit is unknown and because we're using this build here we can actually hot reload now so if i type in here plus exclamation mark and hit save you'll immediately see it over here now so i'm going to take that back out and now i'm going to do a body with a column this column is going to have children one of which is going to be an elevated button so with the elevated button we're going to give it a child of text apples and we're going to do an on pressed which we're going to just leave blank for now we'll hit save and you can see our button over here so one thing i am going to do real quick is i want to cut that put a center in there a child paste that back in hit save and that's entered so inside this unpressed i'm going to go ahead and set fruit equal to apples so we're going to save that and you'll notice when i click apples nothing happens it should be changing this to my favorite fruit is apples and it's not so i'm going to type in here print fruit and hit save and when i press this button now you will see that it's changing it to apples it's just not updating the app bar this is where set state is going to come in handy so what we can do now is we're going to cut this i'm going to type set state and i'm going to put fruit equals apples in there so my favorite fruit is unknown but if i click apples it now changes to apples correctly so what we're going to do now is we're going to take this elevated button we're going to copy it and then we're going to paste it a few more times i'm going to change the second one to oranges and i'm going to change the third one to bananas when i hit save you'll now see three buttons over here and as i choose each one you'll see apples oranges and bananas so it is changing each one individually so this is the simplest way i can show you set state however this is a little bit redundant in the fact that i have these three elevated buttons and this is where it's going to get complicated so i'm going to create a new class where i can simplify these buttons a little bit so down here i'm going to create a class called a fruit button and it's going to extend a stateless widget i'm going to set up a final string called fruit i'm going to grab the name of the fruit when this is called i'm going to do another override and another widget build so right here i'm going to return elevated button i'm going to give it a child of text fruit and i'm going to set on pressed to blank for now add my semicolon so up here now we can remove these three elevated buttons we don't need those anymore instead i'm going to call fruit button with fruit of apples and then i'm going to call it again with fruit of oranges and i'm going to call it one more time with bananas okay so now you see that it looks exactly the same but this is a lot cleaner up here and the code is only in one place but the problem we're going to run into now is our variables that we want to use are in myapp state and we've passed the fruit down into the fruit button but we need to notify my app state that the fruit has changed so it can update the app bar accordingly so there's a couple of ways we can do that but we're going to try to keep it as simple as possible for this example so the first thing we're going to do is up here in my app state we're going to create call back we're going to be looking for a variable i'm going to call var fruit inside there we're going to set the state and i'm going to set fruit equal to var fruit so the next thing we're going to do is we're going to add callback callback here we're going to add it to all three of them then down here in the fruit button we're going to add final function callback inside here we're going to add this callback so inside this on pressed here we're going to just add callback fruit so when one of these buttons is clicked it's going to call the callback with the name of the fruit which is up here it's going to take that fruit and it's going to set it to the variable at the top here and then when it rebuilds it will change the title and the fruit accordingly so let's give it a try okay so the app currently says my favorite fruit is unknown if i click apples it changes to apples if i click oranges it changes the oranges and of course if i click bananas it changes to bananas so this is somewhat clean at the moment but you could see where this could get painful in a much larger application so there are other state management options out there and we will get into those in future videos so here's a video you might be interested in or if you'd like to see more videos in the future you can click the subscribe button and we will see you in the next video you

Channel: Learn Flutter with Me

Views: 15,683

Keywords: flutter setstate example, flutter setstate from another class, flutter state management, flutter pass variable, flutter pass variable to statefulwidget, flutter pass variable to statelesswidget, flutter passing data, flutter passing data between screens, flutter passing data between classes, flutter pass data to parent widget, flutter pass data to parent, flutter passing variables

Id: TVXM6YZ_wcg

Length: 10min 37sec (637 seconds)

Published: Tue Apr 27 2021