Flutter Bloc Pattern and API Calling | Weather Application

hi friends I'm not a flop from easy approach in this video we're gonna make a complete and comprehensive flutter application individual be implementing block pattern for state management and we'll be calling ApS as well actually so whether application in which you can give the name of the place and clicking on search the application will show you the current temperature of that place so these are all the core functionalities that you could have in any mobile application I mean your application is interacting with Internet and it's implementing the blog patron as Perez standards so I want you to watch the full video so that you can have a better idea that how can you develop complex application and flutter using these rules now let me show you the UI and the project structure first it's actually a single page application I use the scaffold widgets at the parent widget but the background color and the body I use search page visits which actually this is screen that you are currently watching in the search page in the build method I have used column visit whole layout Ching and the column visit I used two different widgets the first one is the center container and second one is just a container this centric container actually holds the flare actor that's hair world spindle flr and it's actually this animated object from flare package and if you want to know how can you use flare package in your flutter project Nathan better watch my video on flare and the link is appearing at the top of the screen in this container actually holds this whole form with two tags one text wheel and a button and whenever the user will hit the search button our application will call the API and we'll get all the record all the data and this container actually which is the form will get replaced by this show whether a stateless widget and this show whether is it's like existed like a grid which will show all the all the record that we'll get from our API so this is how our application does work now let's see what's in the pub spec file we have added these four dependencies the first one is the flare flutter to use this animated object and the second one is the flare of the flutter blog which is to implement the block patron and the third one is HTTP to call API sand 41 is the equatable which is to make objects comparable and and one thing more I have fair use I have a sign here or added hair assets to make this assets available for our flutter application and I have I have a world spin dot FL our file that I have downloaded from two dimensions and if you want to use this I will put the link in the video then you can better download the download this file and can use in your project so this is hold from the project structure and from the design perspective so now we will implement the block patron first to implement the block pattern we need to and know about blood pressure on a little so let me show you the blood pressure enforced the block patron actually have four different parts the first one is the UI screen that we have done the second one is a block business logic component that we need to make against the against every UI and the third one is a repository and fourth one is the data provider from where we are getting the data but what is repository repository actually do all the communication with the network provider it actually gets the data from network provider and and gives the data to the business logic component so all the API calling will be doing in this repository part but what's the network provider in our case actually we are getting our data from this rather open weather map or our G and this is the the API that we are using in our project and it are in order to use it you need to subscribe it and and read the API document but if you don't want to do this all you can directly use smiling to call this API and this is the link just replace it by the city name and you'll get all the data into JSON format so this is how it will break it will return you this JSON object which has so many details and if if it is formatted it is this and it has so many details like coordinates weather-based visibility and so many things but I am just interested in this main object in this main property which is a JSON object again and in this is an object there is a temperature pressure humidity and temperature min and Max so and just parsing this part I'll call the API which will return this whole object and I'll just parse this main Jason object to get to use in my project so this is how it will work so now firstly we'll make our will make our repository part and to show you a to save that better that we'll be getting from API I have also make a better model which has all the properties that we we have seen in main office Jason I mean this main will return these in temperature pressure humidity and these all properties are here define temperature pressure humidity min and Max and I have have assign here or define here three getters as well and as the temperature will be returned in Kelvin so I have I have converted into temp in centigrade and this is just a constructor of this model now let's make the repository part first now I'm gonna make a new repository class so go here and live create a new class and name anything you want by the red book and here you need to import to think the first one is STD Bedard as HTTP and the second one is convert to convert our JSON object into weather model now we'll define the class and this class will be calling the API to do so I am defining here a future that will return a better model and name it anything you want get weather and will receiving a string city name as parameter a name it SN Cronus future now we'll call the API and store the result so final result equals to await HTTP dot client this is how you can you you'll call the API dot get and you need to pass here the URL of your API so here is the URL of the API so just copy it and paste it here but you need to make sure you need to pass here a CD name so I am here passing the city variable here so this is how you will call the API now you need to check the status code of your API if the API is status code returns two hundred it means you are okay but if it does not return 200 it mean you need to tour exception so now I'll check the result dollar status code if it does not returns 200 it means you need to throw exception else you need to parse the response of your of your API calling into integer in your weather into a weather model object so what I am doing I'm returning sorry I'm making another function that would parse the JSON response the the API calling response into J into into weather model object so I'm defining here a method that would return a better model that would parse D Jason into into a better model object so it would return it will accept a decent API response so HTTP response or just say response and what it does it would it would convert or it would parse the response that we would get from API into weather model object now what we'll do we'll just call this function and we'll pass result start body so this result body would returns the whole content this content and now firstly you need to decode the whole response into adjacent object and then we need to map the jason object into weather model so how can you decode the taste and are there HTTP response so you'll make a variable final jason decode it and you'll call Jason dot decode here you need to pass the response and this is how you will decode the Jason and this season or will return to use JSON decode it will return you at this whole thing the whole object but what you need to do you need to just access this thing and how can you do so you just go here and in this final you'll just say the jason main or jason better and you'll just say call Jason decode it and here you need to pass me this would return you only this part only this jason object and now you can map this object into your weather model and the type of disease and whether it would be map a string coma dynamic now what we need to do we to convert this jason weather which is in map is shrink on my dynamic form into our weather model so i'm going in weather model and defining here a factory method that would convert our jason weather which is in a method model in it which is in map form into into our weather model so go here a define a factory method I'm naming it form Jason and it would receive is training call my dynamic as parameter and now what we need to do you need to make a better model object or a correspond to the Jason that we have received so just go here and create a better model return of rather model and in here you need to pass all the parameters of that you fetch from Jason so you need to first pass here temperature so this is how you'll fetch the Jason temperature temperature from Jason and here you need to pass pressure so this how you'll access the pressure field humidity temp Max and at last temp min so this is how you will you will map your jason weather into a jason model so this is all we have to we need two done in the repository part just now we need to return the weather model dot form jason and into pass here jason feather so this would return you the weather model of the jason you have parts from from receiving the response from HTTP call so this is what you need to do in the weather repository file now we will make our block component but before going to block let's see what we have achieved so far we have done this UI screen part we have done this network provider part I mean we know from where we are getting the data and we have done this repository part as well the repository that we have just made and it is getting the data from our data provider but just we have left this blog part which will get the data from repository and would give the data to the you ice-cream now that we need to make this unblocked component but before going to make this block component let's talk a little about LOC component actually your UI sends event to this block and this block would take care of the event that's coming to it and it generates a new state based on the event it received it first get the data from the repository and and create a new state and returns to you ice cream and then UI screen rerender itself to show the new state of the application for example we have a search button on our application whenever the user would click on the search button your UI would send the search event and your block as an input and then your block would take fetch the result from your repository based on the city that you have give and it returns you the data and your blog then contained then produce a new state that would contain the result information of the of the battery of the city you have searched and it would give back the result or the new state to the UI screen and then the US wind will rerender itself to show the latest version of your application so this is how it will work so now let's make a block component and I'm gonna create a new class file which is the block of our applications so go here in the dart file and name anything you want I'm naming it weather block and at first you need to import block darts out now before defining the class you need to figuring out two things which is quite important which is very important actually you need to figuring out how many events you have that could be given as an input to this blog and how many how many states you have that could be generated by this blog by taking event as an input so basically there are two or there is only one event that could be given at as an input to this blog whenever the user will click on this search button your application or the you I will send at this search or the fetch whether event to this block it means you need to fetch the weather of the given city so then the weather blog would communicate with your repository and it would ask to bring the weather data of the given city and it would generate a new state that weather is loaded and it would it would return the new state with the data to your UI and then the UI will show the new RISM so this is how it will work it will take event as an input and would generate the estate so firstly before defining and defining the blog you need to know how many events that could be given to this blog and how many states that could be generated by this plot so at first I am defining a clause as an event which is the weather event it's actually the base class for all the events that would be defining in this in this block it's a class event and you need to unity in extend it to equatable as well in order to make the object of this class equatable because we'll be comparing the object of this class so that's the reason why we extend it to equatable and if you want to know more detail about equatable you could visit the dick documentation of this so that you can have a better idea and you need to import here one method s or you need to override one method and you'll just it'll just pass here empty list so this is how you'll make a base class of even and now you can make how multiple events that you could have in your application or you could have in your block so now I'm gonna define the first event that we could have in this in this block which is the fetch weather event whenever the block would receive this even it would fetch at the weather from the repository so bad weather event and we need to extend it with equatable sorry with the weather event and there's one other event as well which is a reset weather reset whether it's actually fired whenever the user wants to search for some other city after searching one so this is these are two events that we need to have in this block and now we need to define the better States as well so I'm gonna go here copy it and paste it and just change it to state and now I have basically four different states in in this block that that could be generated the first one is whether is not searched yet the second one is whether it's loaded the second the third one is where is loading and and the fourth one is whether is not loaded so the first one I'm defining the weather is not search it is the initial state of our application when the user has not searched any weather and extends it to weather state now we need to define another state which is better it's loading after the user hits the search button your application would give in would go in the state of whether is loading and it would show some progress bar or something and now whenever the the weather is wood would be successfully loaded it would go in the state of weather is loaded and it would have a weather instant as well but you'll define it later and the third one and the last one is the weather is not loaded it's in the case of error we have encountered during the API calling or something so weather is not loading it's just in the case of error but these are all the events and all these days that we could have in our blog now we need to make or we need to define our weather blog clause and we need to extend extends it with the blog and now here in here and the type parameter we need to pass two different things first we need to five has the events weather events all the events that we could have in our blog and we need to type you need to pass the type of all these states that you could have in your blog so these are all the events and all the states and now we need to override two main things the first one is the initial state method and second one is the map event Tuesday so the first one that at the stage you need to pass here as output hours output is just the weather is not search state so you need to pass here this state as an initial state of your application and this is actually the main thing or the main logic you are doing in your blog so it what the what it would do it would map the event it would first receive the event and Matt the event to the new state after calling or after getting the data from repository so what i'm doing here first was i'm making it a synchronous stream and now i will first see was what kind of event quite kind of event we have received in this in this block actually and a based on the event we receive we generate some results but so last second if the event that we have received is the fast weather event then we need to do things we need to do few things we need to first pass the new state which is whether is loading and now we need to call the our repository or we need to access we need to access the function of get weather from our repository so how can we do so us we'll make the instance of the repository in our weather blog class so go here at the top and declare here weather repository and you need to pass it in constructor as well so this is how you'll get the repository for mopsa outside and now you'll call the Attica to weather method up in your tribe blog so how would you do this you first right here weather model because this method would be returning you the better model and you'll be calling here feather wrap or dot get is to get weather and in the past here the city name but from where you're receiving you'll be receiving the city name it's actually from the event that you have received that is fetch weather so you need to define the city field in your fetch weather class as well so I'm going here at the top and writing here city and you need to pass it in constructor and one thing more whenever your classic is equatable you need to override this props method and you need to pass hair the property name that's in your head that's in your app in your class actually so there is only one few so you need to pass this city field in this props so now and and you can access you can get this value city value from your event so this is how you'll call this get better and you have to use here evade as well this would return you the better model that the user has search for now what you need to do you need to produce a new state that is whether is loaded and you need to pass this weather model in that weather loaded estate so you need to again define an instance of better in your weather is loaded clause actually so I'm going here and defining her final weather is the weather data Spach from the air from the internet for the latest from the pro deposit tree actually so I'm going here and the fascinated constructor as well and one thing more you need to override the props because it's also equitable and inter-pass hair feather so this is how you would you it pass the weather into your weather is loaded now what you just do you'll just yield that's you will return the weather is loaded and you need to pass hair whether one thing more this yield operator actually returns something but does not terminates the function so this is the difference between yield and return and now you need to define the cache block if we get some sort of error will just yield the weather is not loaded that's the actually state that we have defined for the for actually in case of we get any error so this is how it will work now we have add then our main part now we'll go in the UI and will F F will make our UI interact access with our blog and can add the events in our blog so let's pull forward but one thing more that we haven't done yet is there is another event that we have as this block event which is the reset whether it would be fired in the case when user wants to research some other cities weather so in that case if we encounter this event that is a reset weather will just simply produce a new state that is weather is not yet searched you so this is it from the weather blog now we'll move forward to our main dot dot south where we need to access this block and to add the events in this in that block but how would you access the block your weather block in your application or in your main tour dart file where you have to bear the UI is defined so to do so you need to first add or you need to first import flutter underscore blog dot cell to use the blog widgets and now you need to wrap the search page in a widget that is called blog provider so just call here blog provider and in the Builder you need to pass the context and you need to return here your blog that is weather blog and the weather blog you need to pass hair whether rapo as well and in the channel you just paste what you cut that is the search page so in this way yeah what it does the blog provider will give the axis of this weather blog to the descendant of search page so this search page this class can I can access this weather blog and as this show weather would also be called here in this plus so this show that can also access the blog the better block so now let's move forward and add some events when the user would hit a would hit add the search button so I'm going in the search page class actually had to add the event but before adding the event we need to have an access to the blog or V you need to refer our blog so to do so you need to make a final weather blog and you can refer your blog by using blog provider turn off and need to pass here the context and you need to pass here the type of the blog as well this is how you can refer your blog so that you can add the event but before adding the even one thing that you should know that this part of the application from search weather to this button is replaceable or variable and it based on the current state that your blog returns or the current state of your application whenever the state of the application would be whether it's not searched the application will show this container which is actually this form and whenever the state would be the weather is loading you would replace this container by a circular progress bar and whenever the state would be like weather is loaded you would replace all this this this form by this show weather widget which is basically a grid that shows the current temperature and the values so this part actually based on the current state and whenever the state changes at the this part would be changed so to listen the estate changes or to get the latest state you could use the block builder actually this block builder would give you the latest estate and whenever the whenever these status changes what's inside it rerender itself okay so well I you need to pass here two things that the first one is the feather block the type of the block and the second one is the weather estate so this is how you can make your block builder and in the bigger you need to pass here the context and estate and this state actually would be the latest estate and whenever the status changes this block builder is fired and a hair you can receive the latest estate so now based on the state you can return the visit you want before up for now I'm just giving here the text widget which is just a placeholder but will replace is based on the current estate now we have total four stage that we can receive in our builder and we have to render the UI according to the current estate so firstly we need to check what current estate we have received actually to do so you just have to write if a state is whether it's not searched and whenever this would be the state of the block then you would just return the form that you can currently see on the screen so that user can search so just cut this container from here which is the form and you'll just paste it here and now if the state would be if the state would be weather is loading you'll just simply return the Center with the child a circle progress indicator so that user can know that our weather is loading and now if the state would be weather is loaded so now you have to return the show weather which actually a great that shows a big feather detail and you have to pass here the weather and the city and the weather you would receive in the state so you can access that state dot weather but I think I have been defined the getter so I'm going here in the better block and in this weather loaded I'll I need to define here the getter for this weather so how can we define this is actually a better model and to define here you need to write her get and you'll just simply write the name of your getter so get weather and you'll return your weather field so this is how you can define here the better get her and now you can access this get weather and here you need to pass the city name that the user has searched for but for now I'm just giving here a constant value and in the and the other rest of the cases as just simply added hair a simple text with this error text in it because this would only be the case when the state would be weather is not loaded so this is how you will do at the vo you'll render the UI based on the current state we need to add the event to our weather blog whenever the user will click on the search button will add the fetch event to the weather block so the button is placed actually in this container parrot is now on the on press let's just simply add the event weather blog dot add so you basically add the event by using this add or add and you'll just pass here the fetch event that's whether in decide whether you need to pass the city name as well and how can you access the city name from this tax field I have actually assigned or associated with the tax field a city controller which is actually a tax editing controller which is used to get the text from any field and here it is defined city controller is equal to stack sizing controller and how can you access the tags from this you just simply write here city controller dot text and it will give you the latest tax that's inserted insurgent to it and now as you know how can you access the text now we can also pass here where we have a define as constant so city controller dot text and now we can run this I think it's over so it's restarted now let's give some city now I'm clicking on search I think there's an error yeah you could see here on the black to make it prominent I can do one thing style now let's restart it now you can see there yeah there's an error now let me see it what's the problem oh yeah I have miss here HTTP so now let's run the application again now let's give it something right now and now we can see the data the better data that's actually fetched from the API that we have called so this is how you can make a proper and complete application I know the live here was a little longer but I promise as I promised you would have a great idea now that how can you develop a complete and a complex floater application and if you like the video please I subscribe my channel I I put all that all the code I'll put all the code on the github and all the resources where in the video detail so that you can easily access all the thing so please subscribe my channel in order to get the new videos and these are press on the bell icon so that you can get the notification and please share the video so thank you for watching

Channel: Easy Approach

Views: 39,168

Keywords: flutter, flutter bloc, flutter tutorial, flutter bloc pattern, bloc pattern, learn flutter, flutter app development, flutter sdk, flutter app tutorial, flutter basics, flutter bloc pattern explained, flutter api, flutter bloc pattern series, flutter bloc pattern rxdart, flutter widgets, flutter app, google flutter, flutter json, flutter tutorial app, flutter tutorial beginner, flutter whatsapp clone, flutter tutorial for beginners

Id: yfn1w2Z-Ooo

Length: 34min 59sec (2099 seconds)

Published: Sun Nov 17 2019