Flutter BLoC Introduction with Cubit - Simple and Basic Tutorial

flutter block is an alternative to set state and provider if you are new to flutter use set state if you are having problems with set state provider is likely easier if you are having problems with provider or don't like it try flutter block it's a beginner tutorial for people with no experience with block it introduces the concept of separating out the business logic of your application which is the primary difference from provider the tutorial also covers three distinct states of the application because this is a very basic tutorial it only covers cubic it doesn't actually cover block but they are very closely related you can start with a qubit in your code and swap out a block with very little modification we're going to start with our brand new flutter project so completely blank completely brand new just to build up the concepts of block one by one i'm gonna run it on windows platform but most people are gonna run it on ios or android there's no difference in the code between this type of windows desktop application and an android or ios app i'm calling my app b underscore setup for block setup we're actually going to have to cover some of the vs code extensions that i'm using with block just to make the of the code generation a bit easier add flutter block to your project with flutter pub add flutter underscore block notice that flutter block also installs provider as well as block we're also going to install this package called equitable and random underscore color for the random color package i'm going to use the null safety version so let's first add equitable you're going to need this for flutter block otherwise you have to do some boilerplate code to set up the equality between the objects and we'll also add the random color package for the random color package because i'm using the null safety version it's not the the default version i'm going to add the actual specific version of it into the postpic.yaml file so just copy the version that is 1.05 hyphenal safety and you know it's possible about the time you watch this video that the default version will be the no safety version once we have the packages added to your project we're going to go into the main.dark file and delete everything there just to focus on these main concepts of block so i like to start off with a completely you know blank app just so that every line that we add you can understand why we added that specific line uh we are going to return the material app which which is you know it's almost every flutter app is using this material app so at this point you can run your app and test it out it's going to be an all black screen there's no app bar there's nothing on it which is exactly what we want because we just want to focus on these concepts in vs code make sure you have the block extension as well as dart data class generator this will make it easier to generate some boilerplate code that will need uh just to focus on the main concepts of what block is so now that's set up if i right click on the lib folder i can scroll all the way to the bottom and there's there's qubit new qubit so i'm going to call my qubit color so i'm just going to change the color of the background of the screen now thanks to this awesome extension i have this new cubic folder that's automatically created and within the qubit folder i have my qubit and i have a state of the qubit also my qubit state automatically is extended from equitable so we're going to have the material app home be a block provider the syntax of the block provider is the same as provider if you're familiar with provider so if you're not familiar with the provider it's actually pretty straightforward there's this create colon and then you have the parentheses and in there you drop in the context and you have it do uh the callback is your name of your qubit that was automatically created for us when we did the right click and it's called color qubit so very similar to provider and this thing will require a child again it's the same syntax as provider so the block provider it you requires these two parameters one is create and the other one is the child which we'll just start off with something simple maybe like a container or something and by wrapping the app uh by wrapping the block provider around the app that's just how we're gonna connect all the different parts of the state however unlike provider we are going to need to use this thing called a block builder and that's how we're going to get the the screen to update when there is a change to the state so we're going to have the child be the block builder and we're going to pass it to qubit and the state that was created for us earlier if you look on the left hand side of the screen you can see it it's name of the qubit and the name of the state so now that we have the framework for the state management setup we can now do the fun part of editing the state so let's check out our color state here and notice that it's extending equitable so that is going to make it a lot easier for us to compare the different objects and we don't have to put the boilerplate code in we'll create a final instance variable for the color state because it's always going to have a color in this case and we'll just call it color and the constant constructor will just pass it the color and we'll set up the color initial so the color initial is the first state so it's the initial state of the app when the app we're going to tell it when it first loads to load the initial color state we're going to set to a drab gray because it's initial state and it'll be more obvious when we change the state for the initial state i'm going to use the super and then that will call up the initial color state class and set the initial color to colors.gray which is part of the material colors by default so now if you go into your container and the color parameter you can access the state right there state dot color and now we can start axing the state of the color qubit from the color state and you could move this around this is the whole purpose here the magic is starting to happen i'm going to add a floating action button to get some interactivity onto the app uh this you could put any type of button here i'm just using this one because it's a little bit easier you don't have to have a child for the floating action button and just to make sure the button is working i like to test it initially let's put a little test message in here that maybe some change is coming we're going to change the state just to remind us to connect the button press to the change of state in the future so now we have this completely humongous floaty action button that's completely waiting it's like it's begging for for some interaction here and so let's use it to change the state so in order to change the state we have to create another state so the first state is this color initials the initial state of our application we're going to create another state so the basic concept is that you're downloading some type of information from the internet like a video or a file or you're getting it from a recoil theta camera you know but uh so the second state will be when you've downloaded the asset that you're trying to download so in this case to make it simple we're just using a color so we're going to call the second state color downloaded and in your mind just imagine it's just some fantastic and huge 360 video file from rico theta and you're enjoying some vr experience but for now it'll just be a color so after the color is downloaded we're going to set a new color and this would be similar to you know if you had downloaded a big video or some some big image here but we'll just call ours new color so you can change you can see what happens when you change the state of your application so the state has a const constructor and it's going to accept a new color and then it's going to set the super with the new color that it receives so pretty simple so in the color qubit the uh the actual qubit we're going to make a change here and we're going to create a method to actually change the color and that method is going to use something called emit so it's going to emit a new state here and the state that it's going to emit is the color downloaded so emits a new keyword for this block pattern and it's going to emit the color downloaded and initially it will set it to red just do that it's obvious that there's been a change of state here and although there are more files here than with some type of state management like for example provider um you may want that separation uh this is actually the reason to use block so that you can separate out the state and the business logic so now that's set up we can now go back to our humongous floating action button and use the button on pressed to change the change the state so we're going to use context.read if you're familiar with provider it's almost exactly the same we're going to have a qubit and then after the period here we can access the method from the qubit which is change color and boom it works so you can see that the qubit is sending over states to the ui the ui is running a function and that changes the state to keep the tutorial short there is no separate data class i'm going to use the random color as a way to simulate some type of data server that's sending data over to the qubit the block is very similar to the qubit it does add events so instead of having the ui run the function you can have it send an event you can start off with qubits and swap in a block into your app later it's recommended to start with qubits and only use block when you need it so normally there'd be a separate data class to hold the the data and then you'd pull it from some type of server or the camera but to keep the tutorial short i'm going to use this random color package just to be able to change the color randomly and i'm just going to jam it here into the change color method but in your mind you should be thinking that in the future you'd be this this would be pulling it it acts as a method on a data class and that would then get the data into your application so we're focused on showing the interaction between the qubit and the ui and also how the the keyword breaks up the state from the business logic so we're just going to drop in a random color here every time that you change the color from the qubit to actually change the state effectively we're going to have to go back into the color state and the equitable package has a property list here and we're going to have to add the color to the property list to make sure that everything is going here otherwise it won't update so now that we can change the colors we're going to add a little bit more network simulation ideally this would be in a separate class but i'm just going to put it right here into the change color method so that the tutorial is a bit shorter so we're going to have a async because if we were simulating coming from the network uh there might be some network delay and we're actually gonna add a simulated network delay so that we can see the state of the application when it's loading something from the network so i'll just put a future delayed here to put a one second delay and imagine that it's taking uh maybe one second to download a big image or maybe a small video file here the delay clearly could be longer but we'll just use i think a weight to put a one second delay so at least we can show a loading spinner with the state is that it's fetching the data from the network so now that we have this fake network delay we're going to go back into our color state and create a new state to for when that's downloading this color from the fake server so we'll call it color network fetching just to be nice and clear that the state is that it's coming over from the network even though the network itself is fake in this example so we'll extend the color state and we'll have a constant constructor we'll use the same gloomy gray as the default color for the loading state just so that you know maybe the spinner the progress indicator will look a little bit brighter compared to the gray background so super old just pass it gray again so now the cool part is that we have a new state for fetching the color so every time we change the color we could set it to um first set the state that is fetching the color and then after it receives the color then it will change the color so again this would probably be better to have in a separate data class but i'm for this tutorial i'm just jamming it into this change color method um and then we'll first emit the state for that it's the color network fetching then it's going to wait for a second and then it's going to change the state emit a new state so within the block builder back in main.dart we have the state from the builder right so we can now check to see if the state is one of the states that we have right so we have three states we have the color downloaded we have the initial color and we have the color is fetched being fetched from the network so if the state is the color downloaded or the state is the color initial we want this default screen here which this humongous floating action button and the background screen but if it's a different state then we might want to show the loading spinner for now so we'll set up an else check so if the state is either color has been downloaded or it's a color initial then it'll have this nice humongous floating action button or else we're going to show a loading spinner because these are the two conditions that we have right now it's either loading or it's showing the color we'll have it return a circular progress indicator and then we'll do a hot restart and there it is so right now the network delay simulate network delay is always one second uh i'm not going to put a error so like a failed network error in here although that would be another state to add next but we'll just have it be if it's if it's fetching the data from the network it's going to show the circular progress indicator and then then we'll just stop it for this shorter tutorial so the else will just be a container it won't be won't be checking for a network error in this particular tutorial so now that we have the block state management set up the next step is to connect it to the camera so if you want to try this subscribe to the channel and you can see the updates when we update this type of tutorial if you are interested in using block for state management to separate out the business logic give the video a like so that we know that we should put a bit more resources into this type of video and have fun with flutter block

Channel: THETA 360 Developers

Views: 10,257

Keywords: RICOH THETA

Id: mSXKvWjojpo

Length: 19min 57sec (1197 seconds)

Published: Fri Dec 10 2021