REST API integration with Flutter | HttpClient || News App

hello and welcome back to channel codex this is your host of zel and you're watching channel codex so this is my first live stream i welcome you all to codex if you have not subscribed yet make sure to subscribe the channel because i'm going to upload more of live stream in future so today we're gonna talk about one of the interesting topic uh rest integration so today we'll see how to integrate rest api inside clutter application all right so as i told you so i'll be calling the api get the json pass it and bind it to the list view so these four five steps are there and i think it will finish up in 30 to 45 minutes so it's not going to be a long very long stream so because it's it's as i told you for new members that i'm doing it for the first time so we'll learn from each other a little bit okay and let me you guys are still there yes we are clear and visible thank you so much for feedback so i'm clear and visible so let's go ahead and create new project to start a new project in visual studio code what you do is write your code command shift and p and that will fire this prompt here and there you can select new project so i'm going to say news demo um live stream all right and this i'm going to save inside the same folder anywhere you can save it just a little bit of initial demo like how to do shortcuts because what happens when we do live stream we learn a lot of things a lot of blank applications so first thing i do when i create any application in flutter i don't really like this template so it's full of comments so what i do is delete these comment lines first so i'm going to remove these comments from the main my app so this my app is the root of your application as you all know that's a very basic thing and what i'm going to do is delete this entire home page so i'm going to select all and delete it okay perfect let me see just uh please rest api i hope you people will enjoy it what i have done so far is deleted this page and i'm going to go to library folder again and create a folder called pages it's a good idea to organize your pages your library files in a organized manner so i create pages always as a folder and then inside there i'm gonna click declare home page dot dart all right and let me just import material which we are going to use and you can dial in a shortcut for stateful widget write stf and press tab so you got the stateful widget and name it as home page perfect let me tell you yesterday i was like no time so we got the blank page over here and the same page i'm going to use inside main instead of this my home page all right so here we have our home page our application is fine there's no bugs so i'm gonna run it to see inside my simulator all right so our project is building it's fairly simple it's a it's just a blank page it's going to be but we just want to see that it's building properly or not perfect we have the black page because we have only a container so let me go ahead and quickly uh define a scaffold so we have something to look at now in a scaffold i'm going to say app bar first and we'll define a empty app bar just for now and body as container and we have something nice to look at so we have a basic page over there and that's the beauty of flutter you just save it and you have it in front of you now what i'm gonna do is inside this body let me define a title as well so i want a text to be as title and say news app all right it's fairly simple so inside this container inside the body of the scaffold i'm going to define a listview which will hold the data from rest api so what i need in container is a child element and there i will just say list view now i have another tutorial on list view where i have talked about what are the different type of list view flutter provides us there's a builder there's a separator there's custom and all sort of different list view so what we have to use in different scenarios so for this scenario where we are going to fetch number of items from the server and this can be a big number as well or infinite number we keep on scrolling so list view dot builder is going to be suitable here so i'm going to use list view dot builder and it uses item builder perfect and in item builder we can pass context and snapshot now it context and index and how you come to know that to which parameter it takes just point your cursor on item builder and it will tell you what parameters you need so it takes a binding context so i have defined it as context and it takes an index which is an integer all right so list view it also needs the builder also need one more parameter that is item count that we are going to fetch it from the server so we can skip it for now and here i'm going to return container very simple list view and this container to show up i will give it some random height width so i say 100 pixel in height and color also let me provide so we got this list view over here let me check whether all right so this container is there my list view has no item so i'm just going to find let's let's leave it now for at this point and let's start with our api integration so again for that i'm going to create a new folder so i'll say inside library we have to work inside library and i'm going to create a new folder called services and let's create a new class i'll say api manager yeah api manager will work let's define api underscore manager client and with the get method of that we gonna consume the data so let me say for as of now void get news hit news all right just keep it simple and i need http client to work with so flutter has inbuilt http client you can just like type http line like that but i like to work with http client package which is this one right over here this is developed by dot dot dev team so you can fairly rely on that it has hundred percent popularity hundred percent pop point one ten pop points and a lot of likes so you can rely on that go to installing and copy this line from here and paste it to pub spec yaml so let me tell you whoever have joined recently we are working on the rest api and now what i'm doing is using http package to call that api so i have included that package inside my project now i can close this right here and let's just create a instance of http client and let me let me just copy this code from here we don't have to do hard work okay and i will say http client so we got the client with us now using this client we can call get request it's that simple now here we'll go our url so what i'm using is this news api it's free of cost you have to generate your api key if you want to integrate for yourself and this is the json it's going to give so i'm using a walmart version which is this line from here and paste inside the get method so this is going to call to the api but we need api key so i'll just paste my api key real quick and instead of what i'll do to separate as we are talking about the separation of logic and separation of code so what we can do instead of pasting this url over here we can create another file so let me create a constants file constant folder in there i'll create strings so let me name it at strings dot dot perfect class strings here we will define all the strings which we are going to use throughout the project so that way whenever we want to change any url we can change it at one place and let me say static string news url and here go our url perfect so let me change the api key just a moment let me show the device as well okay we have the client over here we are calling the get request and instead of putting the url right inside get method i will say string start okay and what is name string start news url let me resolve this perfect so now we are calling get request and at this point we will get data from the server so let's catch the data inside a response variable and let me check the size type of this it says future of response so this is going to get data from uh http client in the future so we can use a weight over here and to use a weight you need to use a sink uh let me know if uh okay you guys are suggesting me where i'm making mistake thank you for that so because we're using a weight let me use async keyword perfect this is going fine because of this light i'm actually sweating and i cannot even turn my ac on because the noise of my ac it will just ruin the video so i don't want that all right so what we have as of now is the http client calling a get request and fetching the response all right what what to do next from this response we have to do a check over here because it's not necessary that every time we'll get a positive response we may get a failure we may get internal server error so what we have to do next is check for the status quo and if it's 200 which means a success status then we have to do our next step all right so if it's success status then we have to read the response body so response dot body and this is the place where we get entire json this json which you can see over here this json will be there inside a body of s response so let me just hold this inside a variable json string perfect i think we are good till now and with this json string we are going to pass and pass this data and show it to the ui but to parse it we need to convert it to a model right to bind it to ui we need a model something to bind with so what we have to do convert this json to a model and for that i have a really nice tool it's it's called app dot quick type you can paste your json over here and it will give you the model in dart c sharp java and all the different formats it's very essential for developers i use all the time so i'll recommend you and let's go ahead and copy this json so we have this uh this time i'm not gonna make mistake all right copy everything and then paste inside this one and this time it passed properly so this is how you do it guys you once you have the json data with you you don't have to do this difficult job there are so many applications out there but quick type really works for me so it will give you from this json over here let me show you what it looks like so this is the json we got from the api call congratulation by the way that was the first step and congratulations to me as well because that worked in first shot so we are able to fetch the remote data and the json came to our application that's a very good thing so let me show you stack not json viewer yes let me show you this json after formatting so this is what it fetched from the server so there are multiple articles there and it has the total result count it's not actually 769 they are only giving 20 results if i'm not wrong yep there are 20 elements here you can visualize that and this articles i'm going to bind to a list view so let's go ahead and do that perfect it worked man i was not expecting in the first go but yep good thing happening so now next step what will be the next step any suggestion any feedback anyone any expert over here live stream is better but upload the video as well of course i'm going to edit this video once i finish live stream and i'm going to upload a video love the live stream there is a tutorial on youtube by a channel riva academy fetch wordpress post you should do live stream thank you so much that you people are liking it it increased my confidence level a bit so that's a great thing to hear that you people are enjoying it so and you people are like you're the best judge you can tell me whether it's good or bad so so far we have faced the json string and we have the model ready with us which is here inside quick type io that's online tool you can straight copy paste entire thing i'm just going to select all of this copy it and inside your source file let's create one more folder to be organized okay models and here inside models folder i'm going to create a new file called news info perfect so let me tell you honestly with your feedback my confidence level got increased a bit so now i'm a little bit nervous not that nervous as in the beginning so off thank you so much for that and what what is what is wrong here okay i didn't provided the dart extension to this my bad my bad okay dot dot so now it knows that it's a dart file perfect and let me save this as well so we have the model ready with us this is this hard job is done by quick type so appreciate that really if you are liking that you can contribute to any free source this is how people work in like free open source projects so so so what we are going to do next is somebody joined somebody subscribed welcome welcome frank tamil just subscribed thank you so much for subscribing i hope you will stick and watch this entire live stream welcome to our channel and let me tell you guys that i have created a clock application series on youtube that's one of my best videos so far you really you should watch that there's a lot of see and that in that series i have created so far five tutorials and that that are one of the best for me at least and i have talked about list view i have talked about provider the custom paint you can create a clock hole so you can check that of course and that's a great uh playlist i will put link in the description for clock application playlist that you can check once you're finished with this one so where we are we have json string so far so sorry to lose the track so now we have to convert this string into a json uh map basically so json is basically a key value pair so there's a map happening but this is a pure string so how we do that i will say let me say something like json map okay and then we use a json library okay this is inbit library inside flutter dot decode and then here you provide the json string which you just fetched so the second step which was to map our string to a json object is done now this json we can convert to the model which we have generated and that's like final step of ap integration once you convert the model this model is available inside your inside your page to utilize and there you can take it forward so uh i think we have already crossed 39 minutes i'll target to finish this tutorial in next 20 minutes because i was targeting one hour of live stream all right json map is there now with this json map what i can do is let me open the model itself and here if you see this factory method so it creates a news model from the json and it accepts map of string dot dynamics so it accepts a map which we just created and it will create a news model this we are going to use over here so i'll say news model dot from json and it will accept json map all right so what it's gonna give is news model okay so now at this point we got the news model also this we have to return to the calling page so what i'm gonna do so i'm i'm doing it a reverse way so that you can understand each and every line what i'm doing for the particular reason because instead of like starting from void instead if i have started with the future of news model you will be thinking what i'm doing and why am you doing that so any method it starts with void once you have any return type like once you once you are building for yourself you can write it but for explanation i go reverse way i write something and then i change why i did that so instead of returning void this get news will return future of news model news model all right and here i'm going to declare news model or what i'm doing where news model equal to null so initially we'll say that news model is null because nothing has been happened nothing has happened to this one so far and once we got the success response we got the passing done we got the mapping done then in this news model we are going to assign this data and finally we have to return news model perfect so if it doesn't go that it doesn't go inside the if statement it will still return this null value to the calling page so there we can handle the null data and if it's returning a successful status then it will return the actual data and let's do one more thing real quick i'll just wrap this everything inside a try catch statement because network call and this sort of thing can fail at any point of time so it's better to write inside try catch and say return news model or all the exceptions now you can here be specific what type of exception happening but i'm just accepting any exception right so i think we have completed completed the api manager part so far let me check the comments if anyone is writing anything do live stream once a week it helps to connect with the viewers and also good for your channel growth thank you so much sameer but just prepare program once before you start live will this video be available in future or you remove yes it will be available in my youtube video i will just trim it in between wherever i have make mistake i'm going to remove that and upload as a fresh video and yes that's awesome video playlist thank you ranjit 3d you have seen the clock application yes he will upload it on channel he said yes thank you so much so i'm going to put this code on github for sure and this this is like very simple simple application just like created two three folders there's just one method this method which you see api manager it's doing all the job so could you explain this factory thing yes of course factory thing not like factory concept i'm going to explain what it does it will create a different uh like say say for example there are different ways to create instance of your class one simple way we use is a new class name that's one of the way and there are factory methods which on depending on the different needs it will create a different type of object so you can pass different uh so it like just like this example here it creates from the json so it will take the json and create all the properties which there which are there the member function the member uh members of the class so it's going to accept the json file iterate through it create all the members and then it will provide you with a new object so factory is like whenever you demand something the factory will produce it and give it back to you it's that simple and now i have subscribed thank you so much candy jack exactly all right now back to home page what we are going to do here we called and we fetched in response and this response i did just to call this get news api okay what we need to do inside our home page we have to create a future variable so we'll create a variable inside our home page call this api from the in init of the page and once the data is loaded we have to populate the list view it's that simple so let me say that i want a future of news model and i'll name it as news model and once you define this underscore i was not aware of it so let me tell you guys in dart once you define underscore this means it's a private variable you cannot find these outside the class right so this news model is the future of news model and this i'm going to get from here api manager dot get news all right pretty simple so we are getting the news assigning it to here and now comes the interesting part of this api consumption future builder i created one of the tutorial and because it was so bad in my early days there was so much noise in that video the video was going in different direction i was talking about something else so i finally deleted to it should not impact my other videos as well so i deleted that video from my youtube channel but i did one video on future builder so i'm going to do it again in a nutshell let me show you what what we are going to do here is this data this data news model we are calling the api manager and getting inside news model and that depends on the future so we have to write a future builder and once the data receives then we have to populate the rest of the ui so let me excuse me for that let me wrap this list view inside future builder so you hit command dot inside visual studio and say wrap with the widget so that's a tip over there you don't have to wrap everything and find out where the braces ended you just write you just dial in command and dot and it will give you a widget and that you can use for any any widget nothing's particular so future builder i'm going to use and that accepts its own parameters like future what is the future of this i will say news model which we just created over there that's the future next live stream on flutter or using an app not firebase a village vr of course available i'll put that in my to-do list and i will plan for that it's a really good topic oauth is really good topic and it's in demand like many project many application they use they're using oauth for login not many i think every application is using nowadays or 2.0 is the current standard so let me get back to tutorial so i'm using a future builder inside that we have to specify two parameters one is the future one is the builder the name itself specifies that so future is going to be the news model whenever the data is going to come in the news model that time it will get instantiated and the builder till there it takes context and snapshot so whenever data comes in the future it will wait for that and once it's there it's gonna instantiate all right this child i'm going to remove now and this list view it's ending over here and let's say return list view perfect so what i'm doing instead of returning child as uh instead of putting list view as a child of container i'm putting list view as a builder method of future builders so whenever there's a data that time we will build this but there's a but what we have to do in builder it may happen that the data which comes is null or there's no data or there's something happening on the server side so we have to be future ready for that we have to specify if snapshot dot has data if there's a data in it as i told you that it's not always the case that you will get 200 response from the server you may get 500 404 and there are a lot of responses so it's always python flask with flutter flutter auth for oauth yes thank you so much for suggestion probably i'll do a video on that so let's let's keep that in mind in my to-do list so all right so we are talking about snapshot dot has data so what i'm doing in builder is checking for this condition if it has data like it's a validation thing if it has data then return a list view if it doesn't have you can write a health condition even that is not needed because if we are returning so else is not required but we can say return circular progress indicator that's a long name right so data if the data is available return a list view if it's not then we tell us return a circular progress indicator let's see our simulator it's being long that we haven't seen so this circular indicator is rotating over there let's make it center i'm going to wrap it with the center widget and it will come in center perfect let's restart our application and see what we have we don't need breakpoint remove it remove it so we got this red screen which means the list view is loaded and we got the initial loader as well so our application is behaving as expected so here comes the interesting part the ui design clutter is known for its design so now we are going to get our hands dirty with the design so in that in this container i'm going to write a child which is what it will be a row and children okay there's nothing so as you have seen the thumbnail i'm going to create a basic of news api and user view so this will be a simple list view so first thing inside the row i want is image and where this image will come from network there are different type of image available if even if you're a basic in uh you know like beginner in flutter asset folder if you have directly the resources there in your project you can use image.asset if you're having a network path then use image.network it's fairly simple like nothing to specify check github for sandwich or not sandwich project it is about image processing with python thank you ranjit ready for replying mr hunger all right so here what network image we will show we need an object right from there so remember we fetched this uh list over here so each article here inside let me show you over here so each article you show you see over here that is coming inside our builder one by one so it's trading through the this list index with index so it's going to be 0 1 and it rating like that let's do one more thing real quick that this list view needs item count so now we have the data we can say item count snapshot oh my goodness snapshot dot data dot all right okay now here's an interesting point which i have discovered now now if you see in the data it's saying dynamic and it's not giving me the list of articles so this is very important i have wasted a lot of time when i was learning the flutter that how i can access my data my properties which is that this model basically this model how can i access from there because it's not giving after dot so for that you have to specify future builder that's important thing in future builder you have to specify what data you are expecting i'm going to say news model and then if you say dot over here it will give all the items available in that model so i'm going to say articles dot length so this is the length of my list view i hope i'm explaining it well okay so now we have the length with us what we need for item builder when we are constructing each item let me create a variable for each item so i'm going to say where article is equal to snapshot dot data dot articles and index so every time this item builder is going to iterate it will give me the unique article zeroth article first article second article and that way i can populate my list view right so i'm a little bit worried that for that so we are going to fetch the url from article dot what do we have url to image perfect if you are not familiar with the image you can find it here it's really simple like inside there you can see all the different url this url is for the article the second url which you see url to image is for actual your actual image url so that we are going to use it it's all like scattered this there's no aspect ratio there's nothing so what i'm going to do is wrap this image inside a card and inside aspect ratio for that there's already code i have written for that let me use that real quick so let me go to good tab my repository you can mark the star for repository you like in flutter universe application if you have seen the tutorial in the second page the detail page i'm using a card which is rounded corner and with aspect ratio so that i'm going to utilize you don't have to write each time you have to do smart work right so for that i'm using using using exactly this one so this is the card i'm not sure i'm going to copy extra yes this is the card i'm using in my universe project flutter universe if you have seen and that i'm going to copy paste inside here so just copy this and remove the return keyword and this it also uses the image.network so i'm just going to use this image from here and comment it out we don't need anymore now if you see they are all structured they're all in you know one aspect ratio one is to one they are rounded square and nice it's looking nice right so you got the idea right in other things and we will wrap the video for now because the whole agenda was to communicate with the rest api get the data get the parsing done that is done so inside the row first thing we used is the card which is this one and this row is empty so i'm going to use a column and inside that we'll have a title description and the date time so let me go real quick and why i'm opening obs i need visual studio code so i can say article dot title and show you guys real quick here we got the title don't worry about this line it like looks like a police line that just somebody did a crime or something so there's an article there's a description and actually in flutter it's a crime that your uh you know overflowed with the pixels and that actually it's a good thing that it tells you upfrontly that there's something going to look bad on your application it will not be there once you go live like once you release a production build and signed application this yellow line will not be there but of course this will this is telling now that this is going to crop in future so that's a good thing over there and so we added title we added description let me refresh once again now how we can fix this yellow line it's very simple fairly simple this column we are going to say that it's flexible and the way we can do it command dot and say flexible gone but still in the bottom there is overflow happening so again what we can do next is to this description we can say that we want overflow to be ellipsis so that what it will do at end of the line it will add dots so let me show you how real quick so there are dots added at the left end of the line and we can say max line there's something called max lines yes so three lines of max or maybe two line for description that's enough and still there's overflow going on so let's provide overflow to title as well and this is just extra thing i'm doing for the demonstration like it's not that we consume the api and then it's not like that i'm going to make it a little bit nice so that it's visual thing we consumed an api we written a news application in one hour in front of your eyes all right so now this yellow lines is gone congratulations i used to keep that clap sound in my youtube videos write down in the comment section if you have been shocked with that clap sound because many people have commented that when they hear that clap sound they turn around they remove their headphones and they think who is clapping that's a 3d sound from imovie and i use in almost all of my videos so i need to put a clap sound over here because this is almost completed ui we need a little bit of ui lift up so for the title i can say you know what i'm going to do provide style so text style and let me increase the font size a bit let me say font weight to be bold and yes the title is looking fairly good and let me read out comment as well can fix two can fix by adjustment the container too hope all are safe and healthy in this time yeah even i wish the same here i'm living in uae i'm working in uae basically so situation is under control that is a good thing uh we are going out but with the precautions with gloves and mask on so take care guys so this ui is quite bit ready but i'm not satisfied yet so what i'm gonna do what you see here is the column has things center so that is a by default behavior of column i have a nice tutorial on flutter layout where i've explained about rows column container list view and stack that is the five essential component i have explained in my video i'll put link in the description make sure to check uh flutter layout basic of layout something like that five important widgets that i have uploaded on my channel so that will cover entire basic of this uh alignments and all this stuff so i'm going to say cross axis alignment y cross because the column goes vertical and we are talking about horizontal line so cross alignment will go to start and here we have it everything the title is starting from the left that's perfect inside our container let's give a margin and i'll say constant edge in sets all 8 pixel we got a night spacing we got a room to breathe for this one and in between this card which holds an image and this flexible widget which holds this items we can have a little bit of spacing that's too tight so i can say size box and width of let's say pixel if not more yep so that's all i have to share in this video we have 20 news articles in front of us it's using list view builder everything is like recycled it's not like your all elements are there on the memory heap it's recycling those elements whichever visible that's only there in the memory and we have this fairly nice news article from from where from this website which is called news api.org and we are using wall street journal articles so i hope you people enjoyed the tutorial i'm going to put this video in the form of normal youtube video i hope you people will give a like comment and thumbs up and i'm so glad that you people sticked around this video this was my first stream as i've informed you guys and it was really nice i got the confidence so we can have the stream regular basis like once in a week and once in a week i can upload on youtube regular videos so that way we can do write your feedback in the comment section the live chat i'm really glad that you people [Music] are here thank you so much for joining i will see you guys next week hopefully and that's it see you soon you

Channel: CodeX

Views: 131,853

Keywords: xd, design, flutter, tutorial, how to, android, ios, ui, adobe, latest, theme, app, Flutter ui, adobe xd to flutter, adobe xd flutter, xd to flutter, flutter tutorial, flutter 1.17, minimal design, flutter ui design, flutter ui, flutter animation, animation, layout, rounded corner, learn flutter, flutter dart, flutter sdk, codex, rest api tutorial, REST, flutter rest api, json

Id: 1rXFKhBZXxY

Length: 44min 15sec (2655 seconds)

Published: Wed Aug 05 2020