GetX State Management In Flutter With API Calling (Flutter Tutorial)

[Music] hello friends i'm mad after from easy approach and in this video we are going to make news application using get x package just few days back i created video on get x that was the introduction video and people were requesting me to make some uh practical application using get x after watching that video so i come up with this idea so at the last of the video we would have application something like this you can see on the screen so it has two features basically it first shows the news headline so you can see the list of news headline on this screen and then we have another feature on this screen on the other screen that is search news so it will search news uh worldwide you can give any query and it will show you the news related to your query so if i search here china so you can see is giving result that contains something like this combination of words so if i try something else like pakistan you can see it's showing result against your query so these are the two features that we are going to have in our application you can see functionality wise it's not a pretty big application however we are going to use a lot of practical things in this application that we normally use in in big projects like uh like api calling weight management and dependency injections and all that stuff so i want you to watch this video complete you would definitely learn a lot from this video so now we are going to start this application you can see this is the brand new flutter application and you can see the default code everywhere so first of all i'm gonna add the dependencies that we are going to add that we are going to use in our application so for the dependency the first one is the due package so it will basically we would need it to make http requests so i personally prefer this one so that is why we are using this uh we can use the http or retrofit or anything you want so you can add it after the cappuccino icons and you can click on pubget now the other dependency that we are going to use is this json serializable so this would help us parsing the response that we will get from the server so we don't need to write boilerplate code we can use this serializable and this will generate some code for us and definitely we are going to use get x package you can find the dependency the installing line that you have to add in your pub spec after the json serializable you can add this line and at the loss we will use this build runner this will help us generate some code for us so that we can use it for generating models code we can add this in-depth dependency since we don't need it to be compiled with the application we just need it while development so at the last you can just click on pubget this will install all the packages or all the dependencies that we need in this application and for getting the news from the server we are going to use this service that is newsapi.org so it is pretty simple you just have to create an account and then you can get the key on clicking on your email as your key and you can also find your key everywhere in the example you can see this is my key they actually provide three endpoints and we are interested in two of them so the first one one is top headlines so you can see this is the of endpoint for the top headlines to get the top headlines of the country you specify so you have to at least specify country or time or something so we are going to specify country so that we can get uh the top headlines of that country and you have to send the api key or video request as well so you can see you can send it either in in as a query parameter or you can also ascend as the better token so we will send it using better authentication so we are going to use this endpoint for getting the headlines and for search news feature we are going to use this everything uh endpoint that will search the news against your query from everything from every news not just related to a specific country or specific domain so let's just start the real development and i will suggest you if you haven't watched my first video and get x then please uh make sure you watch it first uh because uh i have covered everything related to get x in that video in detail and i'm not gonna discuss about them in this video so that would have definitely helped you understanding this video so let's start making this application so first of all i'm starting from making the uh architecture or the structure of this application so as you know we have two features inside this application the first one is the top headlines or the news headlines and the second one is the search news i'm gonna have a feature folder inside the lib and inside it as you know we have two features so i'm gonna create two subfolders the first one is for news headline and the second one is search news and make sure you make it inside the feature folder not inside the news headline and for the each folder we would have three things the first one is definitely we would have view for each feature that is the screen and we would have the controller so controller would actually hold the state logic against your particular feature and at the last we would have binding so i have already covered binding uh in the last video that i made in get x but just to uh just to understand just to make it easy for you binding actually helps uh bind the dependency and the state with your uh with your view so it makes code more managed and more readable so if you want more detail about this binding you definitely need to watch the first video so let's do the same for this one as well binding and controller and at the last let's make view and for the stuff that will be shared different uh between different features we are going to have another folder inside the live that will be called or and for the services i'm going to create another order inside the lib that will that is service so these are a few things that i need to have before starting the development so this is very uh simple so now i'm gonna start from the very main thing of this application that is http service because we are definitely going to call the api for getting the news data from the server and in order to do so we need to have some http service and as you know we are using dev package for for this purpose let's create uh a service let's create a service http service file inside the inside the package and let's name it http service and i'm gonna create it an abstract class so it will define a contract and that will have the generalization all the general good and we will provide the implementation of this uh in the clause that will implement this uh abstract class so for the http http service we need to have two uh methods for this application the first one would be init that will initialize this http service and the second one would be the get request because we are going to call we are going to make only get request in this application so i'm just going to have the get request method and as you can see as you can see we have specified here the return type as future response because you know the calls are asynchronous so that's why we have used here future and in the return uh we are we will get this deal response so that is why i specify here this and the second thing we need to have in this get request in order to make the get request we need to have the url on which we want to hit so let's specify here the url made this abstract class uh just for the sake of achieving the loose coupling we don't want our other clauses to depend on a specific code uh that is vulnerable to change so we want the clauses to be dependent on the generalization so that when we change things in the specification that doesn't affect the clauses that is actually using that code and now let's define the implementation for this http service i made a typo here it should be in it okay so for the implementation i'm gonna create a new file inside the services and i'm gonna name it http service implementation so this will be a normal class http service mpl and it will implement the http service so now as defined in the contract it needs to have this http service implementation needs to have these two functions in it so we have to override these functions first one is the get request and the second one is init so first of all we'll define the init method that will actually initialize the http service so before initializing i'm gonna have some constants here so the first one would be the base url and the second one is the api key so let's get this base url and the api key from the service that we are using so this is the base url and for the api key you can get it on clicking your email and there you can find the api key and now as we have the base url and the api key now we can configure the seo package in order to make the http request so first of all i'm gonna have the due instance and inside the init i'm going to initialize it and inside this we have to specify the base options we want to use so inside the base options uh we can specify the base url so the base url is space url and then we have the header so as we as we have the api key and as i said earlier that we will send the api key in the header so i'm going to send it the header so it will have the key authorization and for the value we have to write here bearer and we have to specify here the api key so this is what you require for the configuration of your your package in order to make the http request and then we have the second thing second method that is get request so we have to provide the implementation of this as well so for calling the api or calling the for making the http get request we have uh we have co dot get and here you can specify the url where you want to hit so as this is asynchronous we have to use here a weight and you are using a weight so we have to add the async as well and let's wrap this thing and try and catch so that we can get the exception also let's make the instance of response outside and for the exceptions we'll get the deal error if we get some exception so what we can do we can print the message and we can also throw this exception so that we can get in the caller method and after this if there is no exception we can return the response in case of exception we are doing nothing and at the last we are going to add the interceptors for the duo as well the interceptors actually helps you monitor the requests you are making so for making sure that you are sending the correct data you are you are hitting the correct url and all that stuff you need to add the interceptors in your duo configuration as well so for this i'm gonna create another method inside this which is initialization or initialize interceptors and for adding the interceptor you need to use duo and inside it we have add interceptors or just interceptors and then we can call at and inside it we can provide the interceptor wrapper and inside this we have three things uh what you have to perform on if you get any error first of all let's specify on error inside it you actually get the error instance well you get while making the http request so what we can do we can print this error on log so that we can uh we can know what sort of error we are getting okay so this is error okay and for the request what we want to do while we are making the request so here we receive the requests instance and then we can just print you can just print first the request type okay so it is method and we can also print the request path it's actually the end point part that we are hitting and at the loss we have the on response we get the response instance so while getting the response so this will happen for each uh request that you'll be making so for the response i'm gonna print first of all the status code so that we make sure that request has been made correctly and we got response that we want to and then we want to have the response status message and at the last we can print the response data and inside the init after initializing the duo we can initialize the interceptors as well so this is it from the configuration of the http service and we can now proceed to the next step but before proceeding further let's run the application at least once because i haven't run this application since i've created the project it's installing the application so the application is installed now let's see the output so it will be the default ui of the application because we haven't changed in the ui part we just make changes in the we just configured the http service and now we'll proceed further now as we have done with the http service now we can create the news repository that will be responsible to make the api calls for getting the news from this from the server so let's inside the or let's create repository and inside the repository let's make news repository so again i'm gonna make it an abstract class in order to achieve the loose coupling then we will implement this repository clause in the implementation so for defining the contract we need to have two things the first one get news headline will be the first method so the return type will be future and the second future that we need to have is get searched news and inside it we need to have the search query so these are the two uh functions that this repository needs to implement so we are going to implement this interface or abstract class as well so that we can inspire the implementation of this generalization so let's create news repo implementation and let's make it an ordinary class and you just need to implement news repo class in it and as defined in the contract we need to overwrite we need to specify the implementation of these two methods inside this repository and now before proceeding further let's create the model class for the response that we will get from the server so this is the whole response that we will get from the server so you can see it has a status it has total results it has the article list so basically there are three things if i minimize this thing so it has a status which is in a string and then we have total result that is integer and then we have a list of articles so this is the same response that we will get in the in both of the apis at the top headlines and the everything we need to make the model clause for this for this response so that we can parse it accordingly and we can uh convert this json into our dart object so for this what i'm gonna do uh first of all i'm to create this sub model that is of article and then we'll make the model for this whole response so for this let's uh create another folder inside the core and let's name it model so make sure you make it outside the repository and inside it let's create a model file for the article so let's name it article and let's make a class article and we need to add here json serializable here we have to specify nullible false and we need to import here json annotation dot dot and now let's see uh what we have in the structure of the articles we first of all first of all we have the source so we are not actually interested in this source we are rather interested in rest of the parts so the first one is the author and then we have title then we have description url to the detail url to image publish it and the content which is in this case null but it's actually a string so let's say create the uh variable for each of these fields so first of all we'll make json key and we'll specify here the name of the key actually this is a key value pair so we have to specify the key against each value and then as it is a string you can say it author and make sure this key should be same as this because uh this model uh will parse uh the response and it will search for this key in this in this response and it will fetch the value against this key and it will store the value in this variable so you can give it any name to this variable name but you have to make sure that this key should be same as in the response and similarly let's make some duplicate fields so the other one is for description so for the description we have this key so you can paste it here then we have the title so let's copy this and for the title we have we can paste it here let's rename this and then we have the url to image which is again a string so i can name it image url and then we have uh the url just url which is actually for the detail uh of the news and then we have content which is uh the complete uh description of the news so we will you we can use it in in the detail page of the news but we're not going to make the detail page it's your homework to make it so but we'll still keep it in the in the response so these are actually six things that we have right now and see if we have missed any so we have published as well so let's uh include this as well not sure if i'm gonna use it but still we are going to have everything that we are getting in the response just uh we are leaving the source so you can you can store it in a string however this is actually uh this should be parse in the datetime format so let's make get datetime get published at it okay so i think we should keep the data type before get and we can try parsing you can just send publish at inside it so this is it we have all the fields uh in the uh in the model class of this uh article model uh but now we have some boilerplate code that we have to add also in this uh in order to make this build runner to generate the file that will be used for parsing purpose so let's open uh let's get the boilerplate code from the json serializable because i always forget that code you can see these two lines we need to copy these two lines and we need to add here just make sure you change the name from this person to your name of the class so which is article and another thing that you need to do is we need to create a default instructor which is actually the retire which is actually a requirement for um generating the code for it and another thing which is the losses tab is we have to include a file and the name of the file will be same as your current name of the model file so which is article.dart but you just have to add dot g before start so this is what you have to do in order to uh gen in in order to make build runner generate the code for you that will be used for parsing purpose so these are all the things uh you can see it's showing error because this file is not currently present so we have to generate it using some command so flutter pub run belt runner built this is the command that you have to use in terminal and you can see it will generate uh the article.g dot file g dot dot file and it would have these two implementation of these two functions so this error will be no more after this file will be generated you can see now the file is generated and you can see there is no more error uh in the in the code so this is at the model class for the article now we have to make the modern class for the whole response so let's get another file and i will call it news response news response model and i'll name it news response model and i think we can get we can escape this model thing and similarly we have to add the json serializable we have to pass at nullible falls so that we can avoid nullability this model cannot be null while parsing and we have to import the json serializable or json annotation and then you have to specify the json key and the first name will be i think a status we can go back again to see what's in the response so first of all we have status we can minimize this thing so we have a status which is a string and then we have total results that is integer so first of all we have a status that is ring and then we have the total results let's copy this and then we have third thing which is articles that is the list of articles so as we have already made the model for this articles which is um article file so let's import this file so you can name it anything so i'm giving it articles then we again need to add the boilerplate code so let's copy this from this file and just rename this article to new response and again we need to add the default constructor which is news response and leave it empty and another thing that you need to do is you need to include the news response model dot g dot dot file and let's again run the build runner so that it generates both for you so you can see now there is no more error in this file so we have the model class for the article and we have the model clause for the whole response so this is the essential that we need to make uh then we need to make it uh before actually calling the api so you can see the generated file as well so this is actually generated by the build runner so now we can go back to repository to implement these two methods so now uh before doing anything let's go in news repo because we have created the model and this get news headline and this gets search news will return the list of articles actually so let's uh give it a type and let's import this article file so we have core we have core inside the core we have model and inside it we have you have this article file and for this for the other method you can just copy and paste a return type and in the implementation let's remove this and let's re create these methods okay so this is good now before for the each of the functions we need to communicate with the server and for communicating with the server we need to get the http service involved in this repository so what i'm going to do i'm going to create the http service instance and i'm gonna get this service instance in the constructor of this repository and how i'll get this i will use the dependency injection from the get x package so let's initialize it get output and here you can specify uh sorry here you can specify the http service implementation so this is actually uh we are registering this uh class uh this service uh in the get package so that we can use it uh for for for future in the different classes and in this class itself and you can see we have this is actually the code for initializing within the get package any class that you want to initialize so you can see we have created the instance of service implementation object and we are assigning it to http service so we can do it because you can see the http service uh implementation actually implements this http service so we can have the object uh of this uh instance and you can assign it to http services so this is very simple thing in oop so i hope you can get it and after initializing it you can use the you can initialize the http service so if you have any confusion in this code so you can go back to my first video in which i have explained it how we can use the dependency injection from the get package so if you have understood this then we can proceed it now let's write the code for this get news headline so first of all uh i am going to make a variable that is response and because uh we'll make the api calling so that will be async so we have to use your async and we have to get the http service instance and inside it we have get request and here you can specify the url on which you want to hit or make the get http request so let's get the url for news headline so you can see this is the url for news headline and i'm gonna use the us country so we can copy this from this to this and you can change the us to your country as well so just paste it here and we have to because you know this get request is actually future so we need to use a weight as well and for catching the response for catching the error if we get any we can wrap this thing and try and catch so for this what we have to do we have to make this response instance out of the try so that we can access it outside the try and catch i think this is cash related issues so what we can do we can escape uh we can just make it inside the uh try and get so that it automatically gets the best type for it and inside it or we can first parse this response so let's make final parsed response so this will be a raw uh response but in order to parse it we need to use the function from the generated file which is get news news response model actually okay news response and inside it we can pause the response dot data and inside the exception we can print the exception also we will return null okay so we need to return here the list of articles as well so you can return a list of articles which is inside the parse response so similarly uh you have to make almost the same code just you have to change the api you need to use here async and let's get the best api for it so we have flash v2 and we have to paste it so you can paste it here and we just need to change here uh the bitcoin thing we need to make it dynamic and we need to replace it with query so you can just use here the user specified query so this is it we have created we have implemented these two methods that will be helpful in order to get the news headline and the search news and now we will use this repository in the controllers of our ui uh that is actually there is responsible for calling the methods from the repository and to provide the data that will be provided by the repository to the uh ui so that it can show on the screen but before writing the code for controllers uh let's first create the view because now we have done with the uh with the pro with the repository part with the services part now we are good to work uh with the controllers and ui so let's first create the ui for news headline so the ui would not be so fancy you can however do some fancy stuff but uh because we have limited time so i'm gonna create it simple news headline green or view so just create a stateless widget and let's give it news headline view we need to import the material.dot file so that we can get rid of error we would have a scaffold as a base and inside 8b have an app bar for the title you can specify here the tax widget inside it we can give news headline and for the body for now i'm just giving an empty container okay so you can we can copy and paste the same code in the other file also or let's first create the drawer also so that we can navigate between different screens let's create a list view because we have two [Music] menu bar or menu options in the in the drawer the first one the plus one will be so inside the list we have title so let's name it news headline we have ontab in which we'll specify the method for navigation and the third one is the leading widget which will be the icon before the title so we can we can give any icon i'm using some random stuff okay so i'm gonna go with this this is actually icon and we can copy the same thing for the other page which is search news and for the icon we can use the search icon as this drawer will be shared in in both of the screen so what what i can do i can make this global inside the core so let's uh make another folder inside the core and let's name it widget it will be the widget that will be shared across different screens let's name it drawer and you can we can have a function get app drawer that's it and now we can specify here the get app drawer similarly we can copy the whole code and we can create another view for search news view you can get the same code because we need to change the name and the title and now we have a couple of screens and we have two features also so no need to create another screen okay so now we'll get rid of the default code change the name color as well so we can get rid of this my home page widget and first of all what we need to do we need to change this material app to get material app so that we can use the navigation from the get x package so that we can avoid the boilerplate code and we can also get rid of this home property first we will define the roots so for defining the roots we have get pages and inside it for a single route we have get page here you can specify the name of the route because we have two routes the first one is the news headline so we can give it news headline and for this name we have the news headline view okay so actually we have to return this widget something like this and for the other page we have we can give any name so we have search news and for this name against this name we have this search news view so in order to go to this screen we can use this name and for going this screen to this screen we can use this name so the initial route because the initial screen of our application is news headline so we can specify here news headline okay so let's run the application so you can see this is the news headline screen and if we open this so you can see there are two options however we haven't specified the navigation code here so let's write the navigation code also so let's open the widget drawer and inside it we can write get dot 2 and sorry to name because we are using name root and here we have to specify the name of the root so this uh tapping on this news headline should take us to the news headline screen so we have to specify the same name that we have specified in the main so you can see for news headline view we have specified this name so we can use this name and for going on search news uh we have this name so we can copy this name okay so if i rerun the application so let's see if we can navigate so if i click on search news you can see we are back we are on the search news and if i click on news headlines so you can see we are on news headline now we have created the ui actually some part of the ui because we have to create some more part but now we are good to create the controller uh file which is the uh estate file for this news headline or search news screen let's create the controller file so i'm gonna create news headline controller which will basically holds the state logic and let's make news headline controller and it will extends the get x controller because we are using get x as a state management okay so before doing any code for this controller i'm gonna also have the binding clause for this screen and as i said you uh the binding actually binds the controllers and the services that we are using uh for in a specific screen so it actually binds the services uh and the dependencies uh with the uh with the view so that the code will be more manageable and more readable actually so let's create the binding class news headline binding oh what happened so let's create class news headline i think i have to recreate it because i have did something wrong news headline binding and it will extends the bindings which is from get x and now we have to overwrite a method which is dependencies so here we have to put all the dependencies in the get x that we will use for this news headline feature because on this screen on this news headline screen we need to have the reference of this news headline controller and also the reference of repository so that we can get the data from the repository and we can also manage the controller so what we can do inside this binding class we can put get.put first of all let's put the let's put the news repository and then let's put the uh the news headline controller so this is actually to get the data from the repository the news data and this is the state uh this is a reference of the state so we need to have these two things uh bind together with the view so that is why i have put all these uh things here and now to to actually reference this binding uh against this view we need to register this uh in the get page so we have a parameter which is binding so here you can specify the reference of the binding that you just made news binding this is it and similarly we can create the controller for news search news actually search news controller this will also be the state holding point for the search news screen and it will also extend the get x controller right now we don't have any code but we are going to create the binding class for this as well search news finding this will also uh will be used for binding the dependencies and the services that this search news view will use this will also extend the bindings and let's override the dependencies and here we have to put the search news controller and we don't need to put the repository class because we have already put it in the in the search news sorry in the news headline binding and since the news headline will be uh will open first and when it opens so it will register the uh it will register the repository so we can get the reference of the repository in the in the next uh down the three widgets and the next down the trees screen so as we will go search news binding after the news headline so we can get the reference without putting it putting it again so we don't need to put it again now we can again uh reference this binding to the get page search news binding so this is it we have uh bind the uh dependencies and the state files of with the root and now we can we can further proceed and we can write the code for the controller and the ui now inside the news headline controller uh what i want to do actually for this news headline screen i want to load all the news headline when this screen opens so by default uh we don't have to do anything when we when we will open the app by default it will load all the news headline uh on the on the screen so what i have to do i have to initialize or i have to load all the news headlines from the from the news repository and they can in the constructor of this news headline controller so what i'm gonna do first of all uh for getting the data from the repository we first need to have the reference of the repository so what i'm gonna have inside the controller i'm gonna make the news repo reference and inside the news headline controller i'm gonna have uh i'm gonna i'm i'm going to initialize this news repo so you can get the instance of this news repo implementation by using this code get dot fine and how you are getting this uh how you are getting this news repo instance because you know uh in the binding clause you actually initialize this uh this class within the get package and you can whenever you initialize something in the get you can access it outside or the or the next classes or the other classes you want to access so this is the beauty of get x so we can because this is initialized after the news wrapper implementation so definitely we can access the instance of this news rep implementation inside the news headline controller so we are going to have the reference of this and now we need to call the method that is inside get a news headline that is inside the news repo so before calling this we need to have the variable for storing the list of articles so for the observable list we have to use rx list so it is observable means you can observe the changes in the list and then you can update the ui accordingly so it's what get gives you and inside it you can specify the name of a name of the class that you want to make list of so for getting this inside the core we have model inside the model we have article so now we have the list of articles actually it's just a reference let's create the load neos headline method and it will be async since we we are going to call async functions and what we can do we are going to call the method that is inside the news repo for getting the data guest get news headline so it will return the list of the list of articles you can see the return type of this is list of articles so uh we have assigned it in result and now we have to first check if the result we get is not null if the result is not null what we can do we can assign the articles we can actually assign this result into articles the result is just the list of articles and the articles that you have that we have created here is the rx which is observable list to convert the normal list into observable list you just need to add obs after the name and in case uh we didn't get the expected result we can just print the okay so we have to we can just print it no data received okay so because i want to load all the news headline when this screen will be open by default so we need to call this method uh in the in the constructor and also i'm gonna show the loader on the screen as well once while we will be making the api request so i'm gonna create uh another variable which is rx bool the observable bool variable and let's give it a name is loading all right initially the screen will not show any loading so we are setting it to false however we are creating two methods that is show loading and we have hide loading so for show loading what we can do we can toggle the is loading variable because it is observable you cannot do something like this you can you have to do it this or the better way is you can just toggle similarly for hiding you can also toggle again we can keep the we can have the same function for this purpose but just for the readability we are creating two functions and what we can do now before calling the api we can show the loading and once the api calling has been done we can hide the loader so this is the code we need to have for the controller and now we will do the ui part for this for this screen okay so before making changes in the ui what we can do because we have associated the binding and the controller with the view and we have put it the code on the constructor for loading the headlines we can run the application uh it will it it should uh load all the data and it should show in the terminal because you know we have added interceptors and the reason we have added is uh we want to see the progress and the we want to monitor the request what we are sending what we are receiving so even though we haven't showed the result on the screen but we will still we should actually get the response on uh in this terminal so let's uh open the application so you can see it's calling the api and we are getting some error so this is the benefit okay so we have uh issue and is not a subtype of a string oh i have made this total total results as a string but it should be uh it should be integer value so let's uh make change yeah this should be integer and after changing we need to run the build runner again okay now this should uh run so our first screen is open you can see it's calling the api and it's getting the response okay and it's we are we are getting the data well actually we have done the core thing uh we have actually achieved what we want to do in this tutorial however we just need to show it on the ui so it's more like a ui part we have left but still we will complete this thing now firstly what i'm gonna do because uh you know uh while the api uh gets called it's been called actually so we need to show some sort of loader on the screen so that we can make the application interactive and so for this purpose we have also created the uh is loading bool variable inside the controller so that we can uh observe this variable because this is observable and can change any time so we can observe this variable variable on the ui and based on the value on the current value we can update the ui like if the value of is loading currently is true we can show the loader and if it is false we can show some other thing that we need to show so for this what i'm going to do uh for observing the observable variable and to render the ui and to return the ui accordingly we have a widget that that's provided by a get x which is obx short of observable so inside it you can return you can first check uh the is loading if is loading is true or if it is false so for checking is loading we need to get the reference of news headline controller so we're getting the reference what we can do we can just use fi final controller and you can just use get dot fine and here you can specify news headline controller because as you know we have initialized this controller in the binding class so we can get the reference of it and inside it you can use return and inside the controller we have is loading and we will check if it is true so if it is true we will show in the center circular progress indicator and if it is not true it means the data is uh has been loaded we can rather show list view okay we can wrap inside the container with some margin and we can have a list view dot separate it oh sorry so the item count that is actually the account of the items uh of the list so we can get the count from the controller dot articles dot length this will be the total of count of the items and separator builder actually separates the items so you can just make a divider that's it and for the item builder what i'm gonna do because i need to show some data for each item so i'm going to create a column widget so that we can have multiple widgets in a column and let's define cross x's alignment to center so that everything is starts from the right on the left actually and first of all we can have the uh we can have the title of the news headline so for getting the title uh we can do articles sorry we first have controllers inside it we have articles and for getting the current article we have index and inside it we have title and we can style it to make it a little prominent let's have a specify the font size so you just text dial you can specify the size to 16 and we can make it bold okay so we can also have the description but let's not make it bold or it should be small and between this we can have a little space a vertical space you can have using size box i specify some height and before the title text we can have the image as well so for image we can use image.network because it's coming from the network so you can specify the link controller dot articles dot index and dot image url and between this we can also specify some space like 8 pixels i think this is it but still giving some error in this file i'm not sure where's the error okay let's run this application you can see it's loading because it's currently calling the api and whoa you can see it's showing the result however it's uh it's showing the error as well because in some of the news in some of the articles we have image null so for this what we can do if we have image null if we have a null image we can rather show a container an empty container okay so if i run the application again you can see it's calling the api and i think in most of the okay we are getting the images in some of the articles wow so you can see this is a simple application but as we have implemented it from the scratch and it it it must be important for you because uh as i remember myself when i started flutter i started from very small things and for me at that time this that would be something uh that can make me learn new things so now let's uh proceed to the next screen which is the search screen now for the search screen we somehow have the almost 80 percent we have the same uh same functionality however we just need to have a text field in that screen so first of all i'm gonna make a text field so let's minimize this news headline and let's focus on this new search news so first of all i'm gonna create uh a column widget so that i can have multiple widgets let's make it start and first of all let's create a text field and just for making it a little better we are going to have some decoration not much i'm just gonna have a prefix icon which will be a search icon okay and the second thing uh that we are going to have is here we need to have a dynamic a widget so it will be either a loader or it will be either a list of news so let's uh make it obx observable so before proceeding further i think we should create some code for the search news controller and since the functionality is 80 to 85 percent same so what we can do we can copy the code just to save the time however i would not prefer you to copy the code because the video length uh i think you know it's almost crossing 40 maybe i'm not sure so we can copy the same code here so we need to make some changes first of all we need to get the reference of news repo so we need to import this and for the constructor we can have this new search news controller and by default we wouldn't load the uh news however we will load the news once a user will type at least three characters uh on the in the search bar or in the text view so let's import this file as well because we need to get the references new of news wrapper implementation we need to have the loading thing because we are going to use the loading stuff and we need to have the list of articles let's import the article and let's initialize it also because i think it's better to initialize in this case that we can get we cannot we can't get any error due to nothing and let's rename this to search news headline and the another thing that we need to do is we need to initialize a text editing controller search text controller so that we can get the text from the text field that will be provided by user so we can initialize it text editing controller and we can associate this text editing controller okay so it's giving some error it's not defined for search news controller okay it's now okay so we can associate this controller to the get to the view here let's have the reference of this controller the controller of edx get dot point search news controller because we have a specified or we have initialized this controller in the binding of the search news uh view of root uh so we can we can find it we can get the reference using this and for defining for associating the controller of text field we can first get the reference of controller of thresh news these are the same names so this may be a little confusing however we are talking about uh search news controller for this text field and we are talking about the state controller for this whole screen okay so we have associated the search text controller as well now what we have to do uh on each on at least three characters or we can say multiple of three characters we need to hit the api the search news headline so that every three plus uh when user type three characters it will hit the api then if if he types six then again hit the api so something like this so what i'm gonna do in the constructor i'm gonna add a listener in search text controller and i'm gonna see the length of the text that is provided by the user so if it is the multiple of three and if it is not equals to three because zero is also multiple of three not equals to zero then we need to call the search news headline there's news headlines sorry and inside the search news headline we need to change it because it is using get news headlines so we need to have search news get search news and inside it we have to specify the query and for this query we can just use search tags controller dot text okay so we have done the controller part now we have to make changes accordingly on the ui now what i have to do first of all first of all i have i have to observe is loading stuff inside there is loading if it is true it means it is currently loading data then we will show circular progress indicator let's make it in the center else we need to first check if the controller dot articles is not empty so if it is empty it means we don't have anything we don't have any result of search so what we can do uh we can show center text format it no news found something like that and if it is not empty it means we are getting some response so what we can do we can we can show the list so we can copy this whole thing and we can put it here and since we use the same names and code and all that stuff in in the other controller as well we don't need to change anything so i think this is it let's run the application so is the default screen news headline screen that will call the api by default on inside the constructor we don't have to do anything so this is working nice as before now the main thing to test is search news so if i go on search news it say no no news found because we haven't searched anything so if i say let's say park gets done so when i type three characters it should call the api let's see the logs so it's calling the api and you can see it's showing some result as well so you can see it it includes includes pak so we can change something obvious like bitcoin so you can see it's showing the data it's showing the news according to against your giving query however i cannot see much bitcoin stuff but it's working let's say it india you can see it's not india but something indiana it's not showing the exact result however it's showing uh the results close to this your given code so i think this is it in this video we have done almost uh everything that is important while making uh a complete application we have uh done the api calling we have work on the on the ui as well we have work on the state management we have also included the get x package that you requested a lot so that's a complete bunch of knowledge you can get so this is it from this video uh in the next video we'll learn some new topic and as you as you can see i i did a lot for for you guys and i observed that most of my viewers almost 80 percent of them are not my subscribers so that is really bad so i want you to please subscribe my channel if you haven't subscribed and please share the videos with with those who want to learn flutter with easy approach and thank you for watching

Channel: Easy Approach

Views: 18,400

Keywords: state management using getx, flutter state management, flutter, state management in flutter, state management, route management getx, flutter tutorial, flutter getx tutorial, state management flutter, flutter getx state management, state management in flutter using getx, dependency management getx, state management flutter using getx, getx state management, getx flutter, getx in flutter, getx, getx tutorial, getx state, get state management, getx example, flutter getx

Id: tNGfVp4KY2g

Length: 82min 55sec (4975 seconds)

Published: Sat Jan 23 2021