Integrate REST API with GetX | Flutter tutorial | Shopping app

what's up everybody welcome back to yet another video of channel codex in this video i'm going to show you how to work with api inside getx have a look how cool is that right so i'll be showing you how to work with a staggered list how to integrate api how to pass json and all those stuff and there will be cool tips as well so make sure to watch full video and we're gonna start right after this intro [Music] welcome back once again i'm your host abzul and as i told today i'm going to integrate api inside the getx application and i'll demonstrate with the help of this online shopping application which i called shopx so let's start with the visual studio code and here we have the default flutter project which looks something like this you all are aware of this because you're all flutter experts i hope so okay so first thing i'll get rid of this my home page so for that i have created another page which is like very easy and i don't want to waste time in creating that thing so it has an app bar it has a column it's very simple stuff what i'll do is instead of my home page i'll call home page which i just created and let me resolve it perfect so this is how the newly created page looks like it has this app bar with the back action and the card app option and it has this row over here let me just show you so which has one text which is expanded and it has two icon button as simple as that if you want to learn these things these are very basic like you should not be in this video you should be learning something related to layout designing and basic widgets and all those stuff i'll put card over here if you want to check that and if you already know all these things which i think you are because you have clicked to integrate api inside so i assume that you already know these things so let's get uh started with uh staggered lists so what we want to show here is the list of product in terms of like we we want to show that in two columns and how we can do that we can simply use the grid that's a one option but i found one interesting package on the internet on the pub.dev specifically and that has really cool feature you can lay out your things list items in very uh you know decorative ways so that's really impressive and i'll show you the package name as well just in a moment so let me just collapse this so basically this is a column here this row resides and we want to create the list over here which is our second element in the column so the package which i'm using is flutter staggered grid view i'll put link in the description if you want to go ahead and check for yourself and let me show you how that works so i'm going to say staggered grid view now they have multiple variants you can use count you can use count builder you can use even custom builder so i'm going to go with the counter builder like count builder okay and first thing it asks is how many axis element cross access element you want like how many columns you want so i'm going to say i want two columns and then they have the item builder item builder generally takes two parameter i assume context and index and it is fine and then we have to provide the staggered tile builder now what is style builder because you want to layout your cards in two columns so you have to define how each item will look like so that is the tile they have now here we can specify different option i'll just show you in a moment staggered tile now again they have the count option like if you want to specify the uh row or column size for each element you can do that but i want to go with the fit like each element height i'm going to take over here and say that fit to the size of one something missing yeah i think okay it returns a function of integer perfect so i can say index and then this guy cool so everything is fine here and let me just provide the single item how it's going to look like just for the demo sake and of course we're gonna start with the api as well but we need something to show right and this staggered list is really uh staggered grid or list whatever you call it it's really really good so you should try it it's worth giving a try of course so i'm going to say 100 by 100 height width and color of colors dot red just to see whether it's working or not and i'm going to give item count as well maybe thousand item thousand products are fetching so nothing happening we are getting some error the reason i think so yeah it's a layout issue and why it happened because inside a column i'm asking for one element which is the row which you have seen previously and other element is this grid view so it doesn't know how much space how much size it should take so what we have to do is simply this list view which we have we will make it expanded it's as simple as that okay now you can see that we have this row over here and this red box don't worry what i can do is provide in axis spacing like vertically this grid has a vertical alignment so main axis spacing will be 16 pixel maybe so now you can see this line in between which is a gap actually and cross also let me define cross spacing also 16 pixel perfect so now you can basically see all the card elements which you have designed and you can increase the size it will increase the card size as well and that is happening because of this fit one if you want to have like you want to define uh each card should take two column or one card should take one column like that you can do that but just for the demo sake stick with this example and if you want a detailed video on staggered grid view i can do that as well it's very powerful it's very very much you know it you can achieve a lot of thing with that check the images on the screen which you can create with the staggered grid view it's really awesome so let me know in the comment section if you want a dedicated tutorial for staggered list and there's already tutorial out there if you are able to understand that's fine otherwise i'll create just for you so fine we have something to start with we have the staggered grid view or list view whatever you call it we have this element now let's go ahead and implement our model and controller part so we have the view ready with us let me just clear it out and reload one more time perfect so we don't have any issue the application restarted without any issue everything is working fine so what i want to do next is create a model so let's go ahead and create a model called product dot dot so in this file we'll be adding our model now where this model will come from we have to integrate our api and api is going to give a json response so let me show you how it's gonna look like so this is a makeup api which i got uh somewhere free on the heroku app like you can hit this api in postman or anywhere even if you can run on your browser and copy entire json and then you go to dot app.quicktype.io i'll put link in the description here you can copy paste your json now what will happen it will generate a model for you now this is really helpful if you are like if you don't want to waste time creating your model yourself and you have the json response with you you can easily create a model like generally when api developer gives you the data you can pass and convert into a model like this make sure you have the dart language selected and if you want for other programming language you can do that as well but we're working on flutter so that is good and blindly you can copy everything from here so i'm just going to copy everything and paste and this has a lot of feature as well like along with the dart they have given a lot of thing other uh like parsing thing so you just provide this string and it will convert to the list of product and or or if you want to convert from list of product to json you can do that as well so they have a lot of uh you know auto generated code so make sure to utilize that and now i'm going to go back to my application again so now we have the model also ready with us now what we need the last thing is controller of course so let's go ahead and create a controller i'm going to say home or maybe i can say product controller dot dot perfect now i'm going to import the get package like state management of the git so i can say get state manager all right and then i will create a class called product controller which will extend you know it it's get x controller sorry it's a class not a method perfect so we have our controller now what we need inside our controller is the items which we are going to bind to the ui so first thing we need is the list of products so i'm going to say product list product list yes that's correct is equal to list of product now this product will come from product dot dot of course and then i'm going to make it dot o p s which is observable right so now anytime the data changes it will automatically reflect in the ui so that is the benefit of using get x you don't have to update it manually you just assign your data or like you you're calling api to get the data and it will update automatically so we got the product list with us now what i'm gonna do is before we start with fetching api i'm going to do the binding stuff so i'll go to the home page again here i'm going to create instance of our controller so i'll say final product controller you can name whatever you want and then use get dot put now why we are using get.put for dependency injection like in future if you want to use and what it will do that it will keep your controller in the dependency so in future if you want somewhere you can just find it you don't have to create again and again perfect now what i'm gonna do is wrap this staggered grid view inside obx so if you don't know the different uses of obx get x and git builder you can simply check my tutorial i'll put a link here or here somewhere and there i have explained how obx get x and get builder works so it's very simple so that i'm going to use with get perfect now it says the improper use of get x because whenever you use obx or get x you have to use the controller inside otherwise it will give you this issue which you just saw so i'm going to use this product controller which i already have and the count which we'll get from here so the list of product yeah product list dot length so now the error has gone because now we are utilizing the product controller but the product list is empty so that's why you cannot see anything now now let's go ahead and do the core part of this tutorial where we'll be fetching the data from internet with the help of http of course so i'm going to say fetch products like this and this will be a synchronous method and now here we have to call like we have to call http client and get the data and parse it and all this stuff so to just separate out your api calls from your business layer what you can do is create another folder so i'm just going to create services like here it can be any service backend service remote service or local service anything i can put and here i'm going to create a new file called remote services okay so let's define a class it's just a good practice to keep your things separated so it's remote services and here i'm going to create the actual method which will be interacting with the http client and getting the data so also we need an instance of http to make a call so for that i'm using this package over here this http package and by the way forget i'm using this package and 3.15 version so let's use http and make a get call so first i will import the http so this is the http package and i will name it as http this is just allies for easy reference so now what i'm going to do is create a static version of the client i'll tell you the reason in a moment so let me just define client is equal to http dot client so it's a good practice to have your http client static because you don't want to create each time you make a call because that way it will open the connection to the server close the connection and it is not a good practice so make sure you have the client as static client so throw out whenever you are calling remote service you'll be using the same client so that's fine and now we are going to create a static method again i will say let's say void for now and i'm going to say fetch products this will be us asynchronous method so this is the core part of our demonstration like fetching api data from http call so i need your attention and what i'm gonna do here is very simple thing we are going to fetch products and return to the controller so what we gonna return of course list of product okay this is just a detail like you should not be thinking why i have written this in this way why i have done in that particular way still we are getting issue over here because this method is marked as sync it shouldn't return a future data it cannot return a list so we have to mark it future as well you got the reason why i'm doing it this way okay so now it's all fine it's just saying that you're not returning anything which is again fine so here we are returning a list of product from this method so how we are gonna get those product it's very simple we are going to utilize this client over here so i will say client dot get now get is the http get request it's not a get x package and if you want to understand the different methods of http client like how get works how post works what are the different structure of rest how to consume the data how to parse json how to understand json and all those stuff you have to join tomorrow's session which is one hour live session where you can ask your question on google me directly to me so it's on 7th november 2020 and if you're watching in future you can request in the comment section below or if you're watching on six or seven number you can still enroll check link in the description to join one hour live session where i talk about rest json and all things related to api okay let's get back to the tutorial where i'm going to fetch the data from the url and now what is this url so this url i found on internet so this is basically a rest api like if you are working with any backend team they will provide you this api you don't have to worry about that you just copy this url and put inside here that's it now you're gonna get some information from internet so you have to catch the information right so i'm going to capture that in response because this is a response from internet and now if you check the data type it says future of response because this is a future call so we'll use a wait over here now we are getting a response after waiting for this data to come now the first thing which you have to do once you get the response is check whether it's a successful or not and the way you can do that it's very simple you just make a check over here response dot status code equal to equal to 200 and if you are android developer ios developer you know all this thing how status works what is 200 what is 500 what is 300 and all those things are very easy but if you are new to programming if you are just learning how to work with mobile application these are the status code of http response like so when you make a rest call it may happen that data doesn't come it may happen that you made mistake while calling it may happen that the server is not available so there's a different status code for all of them if you want to understand all those things how status different status works again link in the description you have to join tomorrow's live session which is on 7th number and i'll be talking about all this thing in detail there so if you're watching in future sorry about that you can put your request in the comment section below so let's go ahead and check for this 200 status if it's 200 which means success then do this otherwise just show error message which i'm not gonna do now so i'll say show error message like usually should be informed that something happened the api was not successful okay in case it's successful what we're going to do is fetch the body of the response so let's say the json string is equal to response dot body now this is the place where you will be getting this data like this entire json you will be getting inside the body and which i'm capturing inside the json string so now you have the json data with you now how to pass it to list of product it's very easy if you remember when we created the product model quick type io has provided with this function so you can just use this i'm just going to copy and paste it over here in the remote service so i'll use product from json and provide your json string over here it's that simple and i can just say return product from json so basically what it returns is list of products so whatever json you have it will convert to the equivalent of list of product because this model has been created from the same json so it will pass automatically all right so this is in case if success happened what in case failures in case of failure you can simply return null data so you just have to make sure that you check for null value wherever you're calling from and it's done this is what it takes to integrate rest api inside your application yes there's a different method like get post delete all those things i'm not going to go into detail of that now let's go ahead and call this api from our controller so how we can do that it say remote services dot fetch products so this is not the controller fetch product it's remote service dot fetch product and of course it's a sync so i'm going to use a weight and var products so basically it will abstract how it's fetching the product whether it's fetching from the database whether it's fetching from the remote service you don't have to worry about that in your controller you just call this remote service and it will give you the data desired now of course you have to handle the null value so i'm going to just make a check over here if products not equal to null then only assign it to the observable item so here i'll say product list dot value is equal to products there's a background noise going on there's some construction going on i don't know what they're doing they're banging something but that's fine i hope my audio is clear to you guys now it's pretty straightforward that if it's not null then only we are assigning the value and now we have everything in place just one thing we need is to show the data which we have fetched now okay so let's go to the home page so now i'm going to copy paste some of the ui of course i'm not going to create entire user interface because it's not a ui tutorial and you can see this card above here it's very simple like there's a column and in there there's the image there's a title and all those stuff if you want to check that i'll put link in the description for the github source you can explore yourself you can experiment with that and it's going to be very easy so let's go ahead and create a new file inside views and i'm going to call maybe product tile so how each product is going to look that will define over here and i'm going to copy paste this entire card now it's pretty basic like if you see this image above it has a column it has a stack for this image it has some title it has the price rating and everything it's very simple so i'm just going to close it for now and use over here return product tile and what it needs is a product which it gonna show so where this product will come from of course product controller dot product list and the current index element so i'm going to say product add current index that's it and it should be fine now let's give it a re-run and the product controller has been initialized but the data is not shown why let's check our controller okay we have this method but we are not calling this method from anywhere so let's go ahead and call this method silly mistake happens so it's not a big deal being a programmer you make a lot of mistake and you learn from them that's the that's the deal so i'm going to call fetch products just a simple call now what i'm gonna do is save this file and see whether the data comes or not i cannot see any data why i cannot see any data any reason let me give a restart and see how cool is that we just fetched the data from api with just few lines of code and you get nice staggered view as well now one thing which i want to show you over here if i reload the application you can see that the blank white space is there and then the data comes so a lot of people has asked how to show a loading indicator when your data is coming with the help of get x so i'll just take a moment to show you how that works so simply what you can do is create one variable i'll call it is loading so by default i'll make it true and it will be observable of course so what should happen whenever you are fetching the product is loading should become true so i'll call is loading true and you can of course use obs in this way as well instead of assigning and once it is done loading you can say is loading false simple right now let me do one more thing over here because we are doing an internet call it may happen that it throws some exception network exception or something so it's good idea to put inside try catch so i'm just going to put this is loading false inside finally and you can write catch also to handle some exception if you want and i'm going to move this line below so this is how it should look whenever you are making api call make is loading true whenever you're done with that make is loading false why i written in finally because even if something exception happens it should show that the loading has been cancelled okay and now simply to show inside the page what you can do is wrap this staggered view or maybe i can change a little bit implementation so instead of calling this way i can call returns target view perfect so now what i'm gonna do is make a check for whether it's loading or not okay so if it's loading if the loading value is true we just have to return circular progress indicator that's it and of course it's looking very ugly so make it center align by wrapping with center and it's done so whenever it's loading you will have this and whenever it's done loading it should show this data so i can say else what just happened yeah so let me give a restart again and let's see how it behaves you have the loading dialog and you have the data let me just restart once again to show you so it has the loading dialog it took some second to load the data and then you have this list of products with you that's all for this video i hope you people enjoyed if you want to know more about rest and json make sure to check link in the description where i'll be talking on 7th november so don't forget the date as well if you're watching in future just ignore it and leave your feedback in the comment section below give it a like and subscribe the channel if you're new here thank you so much for watching i will see you in the next one

Channel: CodeX

Views: 79,521

Keywords: flutter tutorial, flutter, flutter app, learn flutter, flutter with example, code, dart, programming, code practice, codex, afzal, in flutter, flutter sdk, flutter trend, flutter is future, getx, flutter state management, getx flutter, flutter getx, getbuilder, obx, reactive, cart, online, shopping, application, getx vs provider, getx vs bloc flutter, staggered list, staggered grid view, shopping app, REST, API, JSON

Id: apPH1CCOtKQ

Length: 26min 43sec (1603 seconds)

Published: Fri Nov 06 2020