Counter App using Cubit | Flutter Bloc | Flutter State Management

in this video we will build a counter application similar to this one so where you can click on plus button and which is going to increase the number so this is the final result so let's start building this so we are going to build this using qubit so qubit is a subset of block and we will use that here so here i am having two files main dot dot and home page or dot and i am going to start from this point so i will be using the library called flutter block and using this we can use qubit so there is you know any separate library for qubit so qubit is now like subset of flatter block so using this package we can use qubit so let's copy this and we will go to the file called pub spec dot gml and here we will add the dependency flatter block so let's save it and it will run the command flutter pubget okay that's it moving forward let me show you my file structure so currently i am having a live folder which contains screens directory but when we use block there is like a specific pattern usually people follow like they create a feature folder like here it's home and inside that they create qubit to manage the state and after that they will create like screens or views and where we store all our view so suppose that i take the home page from there and put it in the in the views okay that's it moving forward inside the qubit we will build the file for qubit so counter qubit dot dot okay so suppose that if we will have more features uh suppose we have one more feature called settings so we will create settings and inside the settings we will create folder for qubit and other folder for views so this is the folder structure which usually people follow when they use block or qubit okay so let's focus on the counterpart so in the counter qubit i will create a class called counter qubit which will extend block so as we are using like flutter block package so we can extend block also if we want and on other hand qubit is also part of that so we can use qubit also so cubit extend the state so this will store the state so for now as we are going to make a counter application which stores the integer so the state is going to hold the integer and now i am going to create a method which is called increment which is going to increment the state value so currently you say state is in you see so updated value is going to become state plus one so whatever value we we are having earlier that will be be used plus 1 and that will be the updated value and we will emit this value so you see end is there if i make string so now the state is string and if i bring my cursor to state it says and now it says double so as you change the value of state it is going to update the value of state variable also awesome so this is one line of code which is going to update the value the increment method so here we can like um we need to initialize the state so here in the super like the parent class needs to be in a slide so we will write super zero and now the state has been in slide with zero suppose if we have some other data type other class or something else we need to in this slide based on that we will talk about that in future videos for now we are going to deal with only integers okay so we have counter qubit in a slide with 0 and after that i increment so now we are going to use that in our [Music] body let's use that in main file so if you have any like previous experience with blocks so you might be knowing that there is a block provider if you have any experience with uh provider package you might be knowing there is a provider so as we are going to use qubit so qubit is a part of block so we just have to use block provider and we just have to provide the counter qubit and the same goes for block also because both are somehow little bit similar okay moving forward to the body so now we have that qubit in the block provider so that can be accessed down the tree so now in the body we are going to have block uh builder so again not a qubit builder because qubit is somewhere inherit lots of thing from block okay so here we have lots of thing we are going to mainly focus on builder because using builder we can do all the things so the builder takes uh or provides two things the context and state and here we have to return something so for now let's return state that's it and if we go to the state it says object but state is integer if you remember i have earlier shown you the state is integer so here using generic i need to specify that thing so first we need to say what qubit we want and what is the state so now you see in is the state so state is in now okay moving forward what we can do we can like have some little bit of style here so we have text in center we can have font size little bit bigger so let's have style and the text style is going to be theme headline four or three yeah now it's visual let's make a floating action button okay so this is going to be the icon is going to be plus one awesome so now here we just have to use context dot read and we need to tell which block we want to read and after that we just have to call the method which is increment that's it so now we will click on plus and it is going to increment it awesome so you can see that i can put this in a provider and provide a routing provider provider also somewhere works similar to the qubit awesome so suppose that if we want to perform any other action uh like decrement so what we are going to do we need to create another method here called decrement and that is going to decrement the value and that's it so now we will come here and instead of calling the increment i will say decrement now this will decrement so i hope it makes sense and you got some knowledge if you have any doubt please let me know

Channel: Nitish Kumar Singh

Views: 1,520

Keywords: Nitish, Kumar, Singh

Id: vDdzA4KuFL8

Length: 7min 31sec (451 seconds)

Published: Mon Aug 29 2022

Reddit Comments

[u/LuchianB94]

Why people keep making counter apps for tutorials, they are just useless imo and have nothing to do with real world applications