Flutter Bloc State Management comprehensive Tutorial

so as developers want to know the state of our application at any point in time and also easily test every case to make sure our app is responding appropriately that's where block comes in which stands for business logic components so it's a state management system for flatter and it helps in managing the state and makes access to data from a central place in your project so it basically encapsulate the business logic of your application and it add data between the UI layer and also the data layer handling the processing of events and also emitting corresponding States so in to this tutorial I'll demonstrate how block operates by using an example that involves retrieving gab users from an API in this tutorial so that said let's Jump Right In so following the architectural part we have the presentation layer where all the uis are found so it contains the screens pages and also the wget we also have the data layer which is responsible for retrieving data from Oneal sources and also manipulating our data under the data layer we have the data provider so the data provider basically provides the data and also exposes the apis from a remote Source the data layer also contains um the repository layer so it's basically a wrapper around one or more data providers with which the block layer communicates and finally we have the block layer which handles the business logic right the functionality of the app so starting with um data provider we have a class of data provider that has one method of fetch user we Tes in the username right so we have our endpoints here AP gab.com then we search for a particular user passing the user name over here then we make a request using the HTTP right so to make sure the URI URL is in the valid format we the URI do pass then you pass in the API URL then we check the status of the response if that's 200 we get the user data that comes in the form of map of string with Dynamic values right and decode the body of the response then we return user from Json then pass our user data right so we want our first user function to return the return type of that should be the user right that's the model we just created so when I check this user over here that's F within the model you can see we have we accessing the login that basically bring us the name the Avatar URL and also the bio over here then we have from J method and also to J method right here so within the data provider I want the return type to be a user right so if it doesn't go through you dra an exception I also cutch an exception over here right so under the user repository we inject our data provider and require that in the Constructor then we make the same function f are passing the username and try and get our data from the data provider so we return a weight data provider then we F our user passing the username right if you have any error we catch it's over here by 3 sh so that's basically what should be within the repository so let's move on to the block layer over here so within the block I'll be creating a new class right so we have an extension that will create a class for you so the name of this class is going to be the user block right so I'll name it as user right so it's going to create a user block a user event and a user State over here so I'll add that right so now when I open with in mind block directory you can see you have a user block a user event and also the user State So within the user block right make sure you have the input from the flatter block so I'll just remove this UT and import the block from flatter block so make sure you have that imported so once we have that imported we get error within the event and also the state right so since we using that IM mutable we can just import with the material do do and that will fix Arrow So within the user State we here right so basically we fing an API there are three things we consider under the H the loading State when we encounter an error also when there's a sucess state right so that's basically the state over here so we have an initial State I'll repeat that three more times over here we be having our user loading right that's when we initiate the call to fish our user right and that's going to they us it you also be having um a user loaded class that's where that's the sucess state and also a user error this is basically when we get the error so these are basically the states you're going to have fing a user right so when the user is loaded we need to get the user back right so I'll be creating a variable which is going to be of type user entity right the user within the model so make sure you have the are imported right and that's going to be from our model and proceed to require that in the Constructor right so within the Constructor so the Lo passing this there we go so we be doing see within the error right we want to know the error state right so we'll be creating an a varable of error message that's going to be of 10 type string and do Same by requiring that in the con Str right so final string error message so here be having um the user error then we passing this without error message so that's basically it so when we are in our user loading right we don't want to do anything right we use that state to check and return a widget so when us is loaded we need to get the us back when it get any error we need to return the error within the user event right there's one use case over here that's only when you're are fishing the user right if you have any use case you need to add that for instance if you want to get all users and also any other use case right so our situation you're only going to fetch user right so that's going to be our event over here so I'm going to create a class of fetch user event and this going to extend the user event right remember F user event we passing the usern name right so we need to pass in a variable over here that's going to be final string of username we do Same by passing that within the Constructor all right so it's going to be this do username there we go so that's basically going to be what is going to find within user name sorry within our user event and within the user block is where the magic happens right so first of all let's bring in our user Repository over here right we need to inject our user repository over here so final user repository then the variable name is going to be repository so let's make sure that it's required within the user block Constructor so require this dot user repository right I think for now we can just get rid of this event event right and return the fetch user event so on we have access to the event and also the M state right so the type of this event is going to be the feser event right that takes in the event and also the emit State over here so make sure we have the user repository imported right so once we have that imported within the function and first of all let's emit user loading right before we initiate the fetch of the user right so we need to emit the user loading so after that we can use try and cash block over here so in our Tri block so first of all let's make this an synchronous function I'll start by creating a variable of user then we are wait and call a us a repository instance then which as fet user method that you need to pass in the username right so we can get the username from the event right the event is more or less like the input over here so event the username then we can emit a new state right so the new state is going to be when our user was successful so we return the user loaded right withing the user can see you have access three user right here then we passing that user there you go if anything goes on that will happen within the cash block so here we also emit a different state and the state is going to be the user error you need to pass in the error right you can have access to the error over here so passing e do to string yeah I think that's pretty much it over here so basically we are calling our fetch user um event right and we are using our user repository which has the fetch user method and it's passing the usern name and emitting a state of user loaded and passing our user right so let's proceed to provide this user block to our homepage so I'll remove the homepage over here and return the blog provider so this basically provides the blog to the sub widget beneath it right so it Tes in the create function so T in the contest so move it underscore then return the user block over here you can see the user block tting the user repository right so I need to pass in the user repository and also the user repository also requires the data provider all right so you can see this is the concept of the pendis injection right you are basically inting our data provider in the user repository which also intend we passed it on to the user provider over here right so the blog provider testing the child where can just provide it our homepage wiget right so we are basically injecting our user block to our homepage so we can have access so when we move into our home widget over here you can see we've created the username controller for handling the user name input we have a display theer profile and also within the body we have a test field and also a button that triggers the call So within the button within the Press of the button can see you're assessing usern controller test and assign to variable of username so in here we check for the username if it's not empty right so if username do it's not empty we check if it's not empty then we proceed to add a function that F data right and to do that we use contest. read right so the type of this is going to be a user block right so we can add an event right and the event we have is the fet user event pring the usern name then you pass the channel just like this so This basically will trigger the function and fetch Thea right think that's basically it so you can see we have our input F and Al the button outfit theer so let's proceed to display it below the button right so over here we start with the block block Builder so this basically rebuilds the UI when there's changes within the state right so it Tak in the Builder and the Builder the Builder right here is a that is in the context and also the state so you can see passing the state as well and Returns the region based on the condition of the state so the type of this block Builder is going to have two um types over here so that's going to be our user block and also the user state right so we specifically passing the type over here there is a block and so there there is States So within the Builder we can check the different states over here right so first of all let's check if um the state is loaded right if the state is is are loaded so basically we going to show um the cular progress indicator over here so here written um the circular progress indicator just like this we can also check if we have a user back right so else if they will check for the state if the state is user loaded right that's when we get our user back that's a successful fetch of our user so if the state is user loaded um first of all let's we can just grab the user from the state right so I'll create a variable of user and can assess daa from the state do Visa just like this then we can just return a column over here and the column takes you how the children there we go so here let's first of all say the main AIS alignment of the column to the main AIS alignment of Center and within the children over here we will display a circle to show the image of the user right so with a radius of 50 you can also pass in the background image since you're accessing this image online you can use the network image then you're pass a user Avatar URL just like this so below the Avatar is going to be the username as well that's basically going to be in a test wet right so I'll provide a space so I just grab this size box for spacing and below that will be having a text displaying the username right so the username is going to be a user do login right just like this right so below that we also going to show the bio of the user right so I'll repeat that and it's going to be user. bio and you can also check the other stat as well so for now we've handle when the US is loading and also when we get the us back so we can also check if the state is um iser error right we want to display to the user right something went wrong so if it is user error can actually also return the test wiget with the message of the error message so it's going to be um is that oh sorry you can assess um the error from the state over here going to be State not error message my B there you go and also you can also check for the is initi as well if you in initial state or you can just display some kind of message to the US that maybe enter there a name to get the details right so enter is a name to get details so you also need to handle the default case right so else we can also return return a text of no available so basically blood Builder um listen to the changes and add accordingly right be on the state and rebuilds the UI there we go so you can see over here so I'll start by typing my username get up username that's Cod and and there we go you can see my profile my username Ando so let me ENT some random name can see we get the error and the error is being displayed right so I'll go with another name which I know and there we go all right so see this until then stay here

Channel: CodeWithDarkwa

Views: 278

Keywords:

Id: 8J7x4v8Tswo

Length: 17min 46sec (1066 seconds)

Published: Mon Mar 25 2024