Multiple Cubit | Theme Change | Flutter Bloc | Flutter State Management

hello there in this video i am going to build a application which will use multiple qubits so currently i have one qubit for counter application so in the previous video i built it so you can see i have block provider with counter qubit so now i am going to build one more qubit for setting so let's create the view for that so setting page dot dot and this is basically going to switch the theme from light to dark so first of all we will import material dot and after that i will create the page called setting page and it is going to just written scaffold with a app bar app bar and title is going to be text and of course setting and let's make it const okay moving forward so now we have one page so now what we want so we will go to home and from the home page we will navigate to that page so for that i will create a button called elevated button and text will be settings awesome so now we have a button called settings and when we will press this button what we want is that it should navigate to the other page using navigator dot push and it takes context and route so let's define the route so the route is going to be material page route and it will like take a builder so let's go to the next line and let's provide the builder so so this is going to be a callback context and let's name the page or widget setting page that's it let's make it const so now when we click on the setting okay it will go to the settings so in this page i wanted to have a setting to update the theme so for that i will create a setting qubit which will help us in updating the theme so for that let's create qubit for setting which will called setting qubit which will extend qubit of course and it is going to hold the theme data and so here we need to provide what basically it wanted to hold so it wanted to hold theme data and let's call super so let's initialize it so now uh we need to initialize the parent with team data so i will say theme data dot light so it is initialized with light theme okay now we have a qubit ready moving forward we need to create a method which will like update the state so for that we first need to check if the theme is light or dark so using the state we can confirm if the theme is light okay if the theme is light we will emit new state and that is going to be theme and data dot dark so the next theme is going to be dark else we will make it light so if the theme is light make it dark else make it light so that's it so now our qubit is ready currently we have only one provider and which is counter qubit so we need to provide the other qubit also which is setting so i will remove it and i will type multi block provider and it takes multiple block provider so i will say block provider and here i will provide the first block or basically the qubit as provider okay and coming to the next one we will write setting qubit so now we have 2 qubit as provided okay so that's it so now we need to use the value so how can we use it so for that what we need to do we need to take this code and create a block builder why block builder so whenever the setting will change this can update its state so the builder will take context and state and here we will return the thing which we just copied so now the ui or material app is being written using block builder so if you remember here we have to tell the generic from the previous example also in the block builder we have to tell two things the qubit and the state so here we will say setting qubit and the state so state is going to be theme data so now the value of state is theme data so i will take it and say theme and state and i think that's it something is wrong okay const so let's remove the const and add it here because we are using variable there so it's not a constant anymore okay that's it so now we need to update the theme so for that what we will do um we will go to settings page and here we will build a button and on press of that button we will update the theme so let's build a elevated button and child add text which will be say toggle theme and there will be a callback like whenever we press this button something needs to be called so on press and let's write an anonymous function and that is going to be context dot read and let's import block now let's import block and here we need to tell which qubit we wanted to read so we wanted to use settings qubit so now we got this qubit so we will say cubit dot toggle theme that's it so whenever now we will press this button it is going to toggle the theme so let's refresh that let's go to settings so you see now the theme is dark so it's working so if i press on this this one is also working but looks like there is one issue toggle theme is not working anymore not sure what's the issue let's see the toggle theme so if the theme is light make it dark otherwise make it dark again it was wrong let's make it light awesome so now this one is working so i hope you got the idea how this is working moving forward we will do one more thing which will improve this one so we will create a class because usually we do not have only theme in setting state so we will have language also some more things so i will create a class called setting state and this will store theme data as one of the property but there could be more property in real app so that's why i am moving to the class and let's create a constructor here which will say this dot theme let's make it required awesome now i will use it instead of theme data so now the state like this in the super we need to initialize it with setting state so theme data dot light light okay so this one is good now moving forward we need to update the uh toggle theme so it says the state dot theme because the state is setting state so if it will be dark or basically light in that case we wanted to make dark so we need to update the state so state needs to be updated whenever the theme is light based on that it will make it dark so let's create a variable called updated state and the updated state is going to be dark and we will take the new state and we will emit that and i will copy and paste it here and i will make it light so now if you have a more data in setting state you can make a class and do something like this so let's come here let's update uh theme data to setting state and the state dot theme and that's it and now i think everything looks awesome let's restart that if i click on let's restart i think it is not restarted yet if i press on plus it works if i go to the setting theme get changed if i press on plus it works if i go there and yeah everything is working as expected so thank you see you in the next video

Channel: Nitish Kumar Singh

Views: 4,557

Keywords: Nitish, Kumar, Singh

Id: 4gA-5qhSJfM

Length: 9min 44sec (584 seconds)

Published: Thu Sep 01 2022