Flutter Bloc State Management With API Calling (Dictionary App)

so let's search for a word like bear and it has multiple meanings so if i go on first one so it's saying it's a verb carry the weight off endeavor and if i go back to see the second meaning it should be an animal a large heavy mammal that walks on the souls that's great [Music] hello friends i'm maz aftab from easy approach and in this video we are going to make dictionary application using block state management the dictionary application will will not be a local application however we will use some api service to get the result of the user search query or the user search word so the api service that we are going to use in this application is actually a free service and it's dictionary api.def and you can find the endpoint that you have to hit in order to search for a word so we basically need to uh call this api which is uh written here api dot dictionary and so on so here you just have to replace uh the word that you want to search and then you will get the response of all the words that matches your query so basically we will receive a list of words you can see this is a word however in this case there's just one word however you can receive more than one and in this response you would have a lot of stuff that that you can use in your dictionary application you you have phonetics how you have to pronunciate this and you have meanings and as you know there there could be several meanings of the same word so basically we have a list of meanings so for each meaning you have you have the the part of speech of that meaning of that word specifically and then you have the definition with the with the sent sem with example of the sentence so basically you have all the stuff that you can use uh in your in your dictionary app you also have uh the synonyms with the with the definitions so you can also use this so there are a lot of information but we will use uh some information like the meaning of word and the part of speech and maybe the synonyms so you can use whatever you want so the the main uh target in this video is basically using the blog estate management and calling the api get the data from the repository and and see on this and show on the screen so uh this will actually uh this will actually make us learn how to make a proper application with the with networking interaction using blog state management so as you can see i'm starting this application from the very from the very uh scratch i haven't done a single line of code i've just created this project and so i have to do all the stuff from the scratch so first of all uh what i'm gonna show you i'm gonna show you what are the dependencies you need to have in your pub spec uh so that you can complete this application so let's open pubspec.ml file and we need to have couple of dependencies in this project to implement all the stuff that we have just discussed so there are only two dependencies that we are going to use the first one is flutter underscore block to implement the block pattern in the application and the second dependency is http package in order to make http requests we're definitely going to hit the api that we have just seen the api dictionary and blah blah blah so we definitely definitely have to hit the api so we are going to use http package in order to uh make the cat request or or the post request whatever the request type is so these are the dependencies that we need to have in spec.tml file to complete this application and and make sure you hit the pub get in order to uh so that the flutter actually install all those dependencies that you have just added in your public spec.tml file anyways now the thing uh that we have to do secondly is we have to create a project structure so what i'm gonna do i'm gonna creating uh the first folder that is is screens so that would have all the screens of the application because we are going to have three screens the first screen will be the home screen on which the user can type the word he want to search and the second screen would be the list of all the results uh all the meanings because you know we we can have multiple uh result or multiple uh basically yeah multiple results for a single word so we need to show a sort of list uh and then user can select one item and then he can go further in the detail page so that he can see the meaning he can see how to pronunciate it and all that stuff so we basically need to have three different screens in this application so i'm gonna make three different packages or three different folders inside this screen so the first one will be home okay and then the second one will be the list oh sorry it should not be inside the home make sure you create it inside the screen that's good and the last one would be of detail okay so let's uh okay now the second thing we are not going to create uh the the dot file right now but we will definitely create it the second thing that we have to consider is for the each screen uh we would have a block not for the whole for for all the screens but the screens that will require an explicit state we need to have a blog for that screen so here it is and and definitely we need to have a repository folder also that will have the repository file because you know the flow is something like the ui uh communicates with the block and then if block requires some additional data from the network then block requests the repository to provide some data and then repository make the http request and it gets the data and it returns to the block and then the block returns to the ui and this is how it works so we need to have the repository of of the dictionary uh so that we can get the data of the search word and another folder that we need to have is the service like or we know you know we have http service i guess so i have made it inside the servers and the screens maybe no that's good so we would have the http service in order to in order to make the http request so we will explicitly make a http file in which we will make the get request and the repository would have the instance of the http uh service and then he will use the get future uh that would be inside the service so we'll make all these stuff don't worry if you're not getting it now the thing that we have missed is we need to have a model folder also because it will contain the response model for the for the uh dictionary search word so here it is the model and i think we have done with all the folders the blog repository screen service yeah uh that's good so now we will start from the from the very uh first thing uh the home screen so what i'm gonna do i'm gonna create a home screen a widget so it will be definitely a dot file and let's name it home underscore screen and it would obviously have material dot dot file imported and then we are going to make it a status widget since we are going to use blog as a state management that's great and we need to have a scaffold widget as a root widget okay let me run this application so you can see the application is running and as expected it has the default uh screens so what we can do we can give the reference of the screen that we have made because the default screen will be home screen in our case so let's uh first get rid of this uh stateful widget of counter app and let's give the reference of uh home screen over here that's great and what i'm gonna do uh firstly i'm gonna have a background color and there's a scaffold of blue gray with 900 okay if i okay refresh the app so this is how it looks and actually i have copied some uh code so that i don't have to do it from the scratch because it's just a basic code and you can easily get it so this is get dictionary form widget uh which is the default uh widget in this screen so you can see it has a column widget and has some title dictionary app and some subtitle and then it has a text field uh on which in which user can give this query and then it has button so very basic stuff so what i'm gonna do right now i'm just gonna call this uh in in the body so that you can see what uh what it looks like however we will definitely going to have some logic and based on the logic we will show the ui so now we'll uh we'll come back to the ui again since we don't have the functionality so we cannot render the ui dynamically so what i'm gonna do now i'm gonna i'm gonna make the http service uh class so let's go inside the service and let's create a new file and let's name it http underscore service okay so it will be http service class and it would have a base cl a base url variable so the base url would be in our case let's uh open the google chrome and the base url would be this so it will be from you can you can think from start to the entries however we are just going to make a single uh request you don't need to explicitly have the base url but just to keep everything simple and clear and then we would have a static future inside it and that will return obviously the response and it will be get request [Music] and we would have end point in this as the parameter of this future and in order to use the future uh that is useful for making get requests from the http package you first need to import http.file and okay so it's already there and let's give the alias because inside it we have some futures and by giving the alias we can easily access okay so for for accessing the future we need to first write http and then we have get request and inside it it will actually return as the http dot response type object it is and then you can initialize it as it's a future so we need to use a weight keyword and here we have to specify the url okay since we are using a weight we need to have the async keyword so that's great and for creating the url instance basically this is uh you have to provide uri instance so for obtaining this what we can do you can use final u r l equals to u r i dot parse and inside it you first need to this should be string and you first need to pass the base url and then you need to pass the endpoint that's great and simply you can you can pass the url inside it and what i'm gonna do i'm going to wrap this thing in try and catch blocks so that you we can ex we can catch the exception if we get any so in case we get exception we can throw exception back to the cauli uh method or the future so we can just throw exception through e and in case we didn't get any exception we can simply return the response that's it now before moving to repository that would have a future that will actually get the search words uh from the api service uh what i'm gonna do i'm first gonna create a model a response clause for uh for the response that will actually get from the api service so what i'm going to do i'm going to use quick tab dot io for for generating the response so what you can do you can simply paste the whole response the example response and you can paste it inside quick type dot io and you can give any name like word response and then you can copy the whole code that's generated on the right side and inside the model you can create a new class or new dot file actually and you can give the name like word response that's good and you can paste the code over here now let's move to the repository and we are going to create a new file in it and it will be dictionary or maybe we can say word repository that's great so we're going to make it a word repository class and then inside it we would have a future that will return us the list of word response and let's give it a name get words from dictionary so we have to import this word response and then what i'm gonna do i'm gonna simply use the http service clause that we have made and i'm gonna call the get request and i have to pass here the end point so to get the end point what you can do simply you can go to the to the api service page and here is the endpoint that you have to call so basically what we have to do uh we have to replace this hello to the to the user search query so we can accept uh the query which will be string and we can simply replace this hello to the query that's good and what we can do further we can check if the response so we have to use a weight also since the get request is a future and we are using a weight so we need to use async also and simply we can check if the response or the status code is equals to 200 it means it's okay we have got the response uh then what we can do we will simply parse the response into the word response type object uh and then we will simply return the the response so what we have how to parse it so we have word response from json let's call word response from json and then here we have to pass the string response so you can get you can use response.body and this way you can you can parse it and then you can simply return the result which is actually the list of word response and in case you get some error simply you can return no and what we can do further we can wrap this whole thing this whole thing and try and catch and in case we get any exception or we can get a few types of exception like socket socket exception in case there's no internet connection so in that case we will throw exception to e we can also get the exception the second one could be http exception even though we are just throwing the exception there is no point of making these individual exceptions or catching these exception individually uh in in my case specifically but obviously you can you can handle these according to your needs and you can return the exception object based on the specific exception you are getting so basically you can you can do whatever you want so i'm just keeping it separate and the third exception could be format exception in case you make some format uh error or from format mistake in in the end point or in the url so these are all the exceptions that you can get so we are just throwing the exception we are not doing anything fancy so this is it from this word repository and now we will make to the main important thing which is block so what i'm gonna do i'm gonna create a plot class inside this blog package so let's give it a name because this block class will be will be used in only home screen and we will get the response uh and we'll get all the data in the home screen and then we can simply pass to the list and the to the detail so we are just making this uh for specifically for home screen so what i'm gonna do uh we can maybe we can give it a name home block or i think we can make it dictionary block and since we are not using block actually because we are using qubit which is simplified form of block so it actually avoids the uh boilerplate code or not exactly avoid the boilerplate but it actually makes the block simple to use because it handles the imaging of new states pretty smooth and pretty easily uh not like uh overuse in the in case of block we have to explicitly uh we have to explicitly add new states into the stream of the states however in the case of a qubit it's it's more simple and also we don't have to explicitly have the events we don't have to add the events into the block we can just simply call the method inside the qubit and this is how it triggers the new state so obviously you i i would i would imagine that you would have a small understanding about block so so this will be dictionary qubit and let's make it dictionary cubit and you need to extend it with cubit and here you have to specify the type of the qubit or actually the type of the estate which this stationary qubit would have as you know how block works blog accepts the events from the ui and then that blog pro process it according to the received event and then it generates the new state accordingly and the new state will be passed to the ui again and then ui will re-render itself according to the new state so this is how it works so you have to specify the you have to specify the actually type of the states that it can actually return so what i'm going to do i'm going to create the estate file or sorry the state clause first so let's make a state so what i'm going to do i'm going to say it dictionary states or just stationary state and that's great and what i'm gonna do let's make it abstract loss since we this is the base class for all the states that we would have and we will now make different estates that could be possible that could be possibly in the application so the first state that could be possibly there in the application in case user has not searched any word yet so we definitely have to show the form uh dictionary form widget uh in that case so let's create a widget no sorry let's hear the new state no word searched so this will be the will be the case when there will be no word searched and you should extend it with the dictionary state as that's a base clause for it and since we we don't have the application open yet because i had to i had to restart the application there was some of cash issue so let's open the application again and while it is uh opening the app we can continue the second state that could be possibly there in the application is when user has searched for the word and we are actually fetching and it's in the progress of actually so in that case uh it will be a loading state and we have to show a sort of loader uh in case of this estate so let's create word searching state so whenever this state will be uh released or returned from the qubit to the ui so we obviously in this case we will render the loading stuff so it will also extend the dictionary state so if you have the knowledge of block i think that you won't have any issue but if you you are having issue and you are not understanding really how block works and what is what are the states and what are the events then you probably have to go to the blog first and you don't have to really go in the detail you can just search for the for the very very basic stuff even though i have discussed in it already but still if you find it difficult you can go for the specific uh basic details so these are the two states that we could possibly have in the app when no word search so in this case we have to show this form and when we're searching in this case so we have already made the api request and we should we should show some progress indicator so this this is the second state and the third step state could be when we get the we got the word response so word searched state in this state okay let's uh add the state also in in these three well in this word search estate we have gotten the data from the server and this is the state uh that would have the response in it and it will actually uh tell the ui that the word that you have requested for uh already gotten the already got the response and you can show the ui uh accordingly so it will also extend the dictionary state and since as an as i said it will contain the response so what we would have inside this we would have a list of word response let's name it words and in the constructor we can have something like this so these are three states that we could have uh possibly in this application and there may be a we can make a third fourth state also uh it will be error state so error state will be in the case when we make the http request and we get some sort of error then in this case we will have this error state so now as we have states for the for the qubit we can simply write here dictionary state and you can see it's still giving error because there's some thing some stuff that we need to call so you can see we have to call the super and inside the super uh actually you can remove this inside the super you have to have the default or the initial state given so the initial state of the application uh you can you can guess it's very simple the initial state would be word searching is it no because the user uh would not actually search for the word when the application opens so definitely when the application opens so it it it should show this form because user hasn't searched for any word so the initial state would be no word search state so that's great also we need to have the reference of word repository in this qubit so what i'm gonna do i'm gonna create uh a final word repository repository and then i'm gonna take it from the constructor that's great so let's format it and another thing that we would have because you know we have uh the uh this text field so we need to get the text from it so we need to associate a controller with it actually so it uh inside the qubit we can make a text editing controller so let's make it query controller and it will be text editing controller and now we are going to create a function or actually a future get word searched so the ui will call this future and this future will actually get the data from the repository and it will actually emit or generates a new state and it will return uh to the ui and so your ui can re-render itself according to the new state so this is how it will work so let's create a future get word search and let's have async since we are going to use a weight inside it so the first thing that will happen uh when this future will call so this is actually you can imagine this it this is an event so this event whenever this event will occur it means the first thing that is going to happen is uh you are going to emit a new state you're going to return a new state that is word searching state because whenever this get worse search will will be called so it means user has pressed the search and he has provided the uh query also so the very first thing that you have to do you have to show the loader so you have to your application will be in the state of searching so that is why you have to emit the image and emit means you have to this is how you release or this is how you emit the new state and provide to the uh to the ui now the second thing that you have to do you have to uh contact the repository for the data you want it so what you can do you can simply call final words and inside the repository there's a future get words from dictionary so it actually returns the list of word response so as it's the future you have to use await with it and in the query parameter you can simply because we have the reference of query controller you can simply get the word the text from it by using query controller dot text this is it and the there are two possibilities uh the words can be null so in case it's null or we can emit the error state however if it is not null we can return the word searched state and in here inside it we can pass the words [Music] that's great and since this repository get words from dictionary can can also throw the exception so uh what we can do we can simply wrap this whole code and try and catch and in case we get any exception simply we can foster print it on the console or we can also show it on the snack bar and maybe we are going to do that also and also we can emit the error state or what we can do simply oh inside the error state we can have the error message and rather than showing the rather than showing the progress bar we can simply sorry rather than showing the snack bar we can simply uh have the error message on the screen so in in the case of when a word are null so the there may be the any case i'm i'm not sure what so or we can simply say there is some issue and in case we get exception so we can simply we can simply pass the exception message inside the error state so this looks good and i think we have done with the with the block and now we can integrate it with the ui and then we can use it with the ui now to integrate the block with the ui the first thing that you have to do is you have to inject the qubit or the block to the to the tree or where you want to access the block so as i just want i just want to access the block inside the inside the home screen because we just have to have the reference of blog in the in in the home screen because in the list screen we can simply just pass the list and in the detail we can simply just pass a single word so there is no need to have the block in the other screens so what i can do inside the main uh before we actually use this home screen i can simply wrap this widget in block provider so the the main reason of using block provider or the main benefit of using block provider it actually provides the instance of the block in in the child so you can simply in the child access the reference or the instance of the block that you have passed in the blog provider so this is how you have to do it in the child you have to provide the home screen and then you have to create here we have to pass the contacts and then we can simply create the instance of dictionary qubit and inside it we have to provide the instance of word repository so just let's create word repository that's good and now we can easily access uh the this stationary qubit inside the home screen so now we will see how we can access it and how we can then access the text field controller text editing controller and we can associate with it so for accessing what you have to do first you first have to import flutter underscore block that's great and now there are several ways to access the reference of block the one which i'm using is final qubit equals to you can use context and inside the context you can have watch so i'm not getting it because let's uh give it a type now we should be able to get watch okay that's good and you have to provide here the type of the qubit so it's stationary qubit now what happens when you when you call this watch so it actually provides you the instance of the qubit and it also do some magic the magic is it also render the ui whenever there is new estate so whenever there is new state emit it actually rebuilds uh the whole screen so whenever there will be uh like uh imagine of uh say searching a state so you don't have to do anything you just have to handle uh in the in the case of current estate you have to show some specific ui you just have to handle this sort of things uh however blog will itself re-render the ui you don't have to call like satis day you don't have you don't need to have some builder that will listen to a new state or anything you just need to have this line in your court and now simply in order to associate first because so we first need to associate the controller so that uh it actually gets the text from it so you can simply call cubit dot query controller and then inside the on press you can simply call qubit dot get word searched and now so this is only we have associated just the controller and we have just called this a get word search we don't we haven't uh yet uh actually handled the all the states and we haven't defined how our ui will look like in each of the states now let's uh create the ui in case of loading state so what i'm going to do i'm going to minimize this thing and i'm going to create get loading widget it will be simply a cyclist circular progress indicator in the center so this circular progress indicator and we can simply wrap this thing in the center that's great and also let's create get error widget in this case it will have a text widget and let's have a message parameter it will have a text widget with a message and we can simply wrap this thing also in the center okay that's great and now how we will actually manage uh the ui how we will compare the current state and how i will show the ui accordingly so firstly for this purpose we first need to get the reference of the qubit because we haven't right now have the reference of qubit inside this build let's define the type dictionary cubit and as we have used here watch so it will rebuild the ui or rebuild this build method so first of all what we can do we can simply get the current estate from the qubit so to get the current state you simply have to call qubit dot estate so if the current estate type will be equals to you can call uh is you can use is for this purpose if it is word searching state then in this case we will show get loading widget however however if the qubit dot current state is the word or its error state maybe so in this case we will simply show get error widget with the error message so you can get the error message give it dot state inside it you should have okay we will as we will right now we're just making this some error okay so this is this is the error state and now we will see if the qubit dot current state is equals to sorry is no words are state then in this case we will we will show the get dictionary form widget however if there is some other state then we can simply show an empty container you may be wondering why we didn't uh handle the ui for the word searched estate because in that case we are not going to update this page but rather we are we are going to take the user to the list screen to the other screen so we are not going to uh handle the ui in that case in the same screen so this is how it should be and it's giving some error so there should be a column instead of the question mark so this is good so if i refresh the application it should show me this form widget maybe i can close the application and then reopen it because the current state or the initial state is actually no word search estate so it should show me this get dictionary form widget and meanwhile what i'm i'm doing actually i'm going inside the inside the qubit so you can see it's showing me the correct state of the application so just to make sure uh we are actually oh it should be inside the emit just to make sure we are getting the data or not what i'm gonna do i'm gonna return or i'm gonna print this uh response uh into the console so that i can see if i'm getting this case the null case or if i'm getting the uh data case so i think we can test the application so this will actually print the data on the console it will not take us to the list screen because we haven't yet uh in the application have the list screen but we will surely going to make it so let's uh restart the application and let's open the console so that we can see the progress okay so the application restarted let's search for a word maybe like um good so when i will click on this it will call the it will call this and it will first return or emit actually a word searching a state so in that case we have handle it and we are showing the circular progress indicator in the center so it should show us when i hit on this it should show us the circular progress indicator in the center then it will uh get the data from the repository and it will play and print on the on the console in case we get exception it will have the error state so let's click on this you can see when i click on this it's showing me the progress indicator and it also it also returned the instance of word response it means we are getting the response but you can see that after we have successfully searched the word it it should show us uh the form again it should take us to the to the list screen we are going to make it however this screen uh should show the previous state because the word is searched and now we are going to create a new session so we can simply again we can call no word search estate in this case so when we will receive this state in the ui we will uh we already have taken user to the to the list screen but this the order screen should have uh the reset of state actually or it it should be no word size the state so that when user click back from the list screen he can he he he should not just see this empty screen but rather he he can see the no word search estate so i hope you are getting this point if not you can simply see what i'm saying when i refresh it and if i search again some word like word and you can see it's saying a progress indicator and it it returns the response and on this response we would have taken user to the list screen but you can see this screen now reset it to the to the previous screen but to the previous state or the default initial state so that's uh what i was saying so that's great it means it's working so we just need to have the list screen now so that we can we can show the actually response in the correct way or we can show the data correct in correct way so what i'm going to do i'm going to creating a list screen inside the list and it will be a simple stateless widget because it will not have some fancy stuff it will just show the list so let's name it list screen and let's import material.dart and also inside this list of screen we would have a list of word response not the word repository or response let's say it's words and it will have a scaffold okay we have to make a constructor also let's have a scaffold and in the body we will have a list view dot separated the item count would be word start length the separator builder will be first we need to have context and index and the separator builder will be divider with a color that will be a little darker because we are using dark background color in it and the item builder would have a list style in it and inside the list style we can simply call words sorry first we need to have child or title property and in the title we can show text and you can get the text from words to get the current correct current instance you can call words index let's reformat it that looks good and inside it you have word that's just a string so you can show there's a string and also we need to have a dog background since we are using dark theme maybe the dark theme it's not actually a dark theme okay so we can use colors dot blue gray and this is 900 so so whenever we will receive the the estate which is actually uh the word search state what we will do we will take user to the list screen so let's see how we will do this so what we can do whenever we have to listen for the estate and we don't have to render the ui however we have to take uh we have to perform some action like navigation like uh showing a snack bar or something like this not updating the ui but take you have to take some action on the new estate you receive or any state you receive so what you can do you can use a block listener in this case so what we can do we can simply wrap this whole content in the block listener and in the listener you actually have a context and you actually have a instance of your of your state the new estate that you have received so you can actually use this estate and you can compare it with this estate you actually want to take action on and then you can perform some action so this is how it works but the second thing is you have to tell which block you are going to use so we are going to use this dictionary block which is qubit so this is how you have to do this and then what we can do simply we can see if the state or the new state we receive is word search estate so if that's the case and also we will see maybe we don't have to do this but still if state dot words is not null so you have to check both that first the state should be word search estate and then the state should contain words that's not null then this case you have to take user to the to the list screen and in the builder you have contacts and then after it you have less screen maybe we should format it and in the list screen you have to pass state dot words isn't defined for the type okay you have to import this that's great let's format it that looks good so now if i run the application again let's close the application and let's reopen it since we have added the list screen so it should now in the case of successful uh api requests uh it should take user to the uh to the list screen and it should show the list of all the words that's available in the result based on the user search query so if i search for a word or like what we can do we can search for best so if i click on search it should first show me the loading and it should show take me to the list screen so you can see it's actually taking me to the list screen however we have a use black text and since it's a black background so it's not really visible so let's uh change some things like we can style this and we can give some color okay so let's refresh it so now uh you should be able to see the word and you can also uh do some indexing stuff like you can simply concatenate the index value so this is how it will look that's great so in this case we are actually getting only one uh word so that's why it's doing one word however in case we accept we get many words so it will definitely show many words now what we have to do we have to on on pressing this button we have to take user to the detail screen and we have to pass the word response only that word response that is tapped or that is clicked so we have to pass that word response object to the detail screen and then the detail screen will fetch the information from the object and will show on the ui so actually we have done with all the thing but still just to just to ensure you that it's actually working so what i'm gonna do i'm gonna create a detailed screen also so it will also be a state less widget with detail screen and it will have a final word response reference or the object and let's import material.dart that looks good so actually this is the type we also need to have a name with it that's good so at first we would have a scaffold with the background color dark blue gray and just to save the time because it just what information you want to show and just a simple ui so what i have done i have recorded some stuff so if i can if i can really explain this so this is just simple container with the column widget and at first i have uh showed the word in a in little bigger size so that user can know which uh word he is actually exploring and then as as i said you the words can have different meanings of several meanings that is why i have used here the list view and then inside the list view i have a column widget and in the column widget i first show the part of the speech and then a a single word or the single meaning can have multiple definitions and the multiple sentences so that is why i have used here again list view this is the nested list view inside it i have showed all the meanings and all the definitions so these are all the things that have showed so you can you actually get the word response object and you have a lot of information like phonetics and all the stuff so you can show whatever information you want to show so now what we have to do inside the list style we need to have ontap so that we can define the navigation code and on tapping the individual item we can use navigator.push we can call material.page root and here we have a builder and we can call detail screen and we can simply pass the current word response so you can do it something like this oh what happens so let's format it so this is how you can do so that looks all good so let's uh maybe we can close the application and we can reopen it there are still a lot of things that you can improve in this application the the main target of this video was not actually to make a complete product the main target was to let you know how you can use block how you can make the http request how you can combine them to make some meaningful thing you can definitely improve for ui you can definitely improve the user experience you can uh there are a lot of things that you can really improve so but i have just given you the basic idea and then you can um you can move it you can take it to the further you can take it to the next level you can you can make a complete application you can obviously you can publish it on the play store and you you you would have a portfolio so what i'm going to do i'm going to search for a word like we can search easy because it's a part of easy approach and then if i click on search you can see it is uh taking me to this uh uh to list screen so if i click on this so you can see it's showing me the word easy and saying that it's a adverb and the definition without difficulty on effort and the sentence is null uh it's not um it does not have any sentence in case of null you can handle it and you can you can remove the sentence line from the ui and detail screen so this is how it's actually looking so i think this is it from this video also we can also do some make some requests that is not a word a proper word like say something some random stuff and if i search on it you can see it's it's saying some error so it's it's actually in black but it's it's actually showing the error state so you can do you can improve a lot you can and and i want you to improve this thing and and publish it on play store or an app store so that whenever someone asks you if you have some portfolio or you want to show something then you can obviously show this and that would really help you getting a new jobs and i when i when i actually create my channel uh it really helped me a lot because whenever someone come to me and i want some job i don't have to prove anything to it to him i just i just give the reference of my channel i just give the reference of the github repositories that i have for you guys and that works so the portfolio really matters so as you already know action speaks louder than word so this is it from this video uh in the next video we will see some new thing so if you like the video please give a big thumbs up and if you haven't subscribed the channel please because i need your support please subscribe the channel and share the videos with those who want to learn flutter with easy approach so thank you for watching

Channel: Easy Approach

Views: 7,212

Keywords: flutter, fluter tutorial, bloc, state management, api, api calling, flutter ui, state, management, api calling with flutter, api calling with bloc, cubit, http package, flutter http, flutter state management, bloc pattern flutter, api calling in flutter, how to make http call with bloc, dictionary app in flutter, widgets, flutter widget, flutter bloc pattern, flutter bloc, flutter state management bloc, bloc state management, bloc pattern, flutter state, flutter dictionary app

Id: GY2em79kFaM

Length: 64min 38sec (3878 seconds)

Published: Sun Apr 04 2021