REST API with Flutter | Step by step tutorial

REST API Integration with Flutter. In this video  you will learn from scratch how to integrate   restful api inside your flutter application.  Starting from json to model conversion,   http api calls and then populating  that data on the interface. In 2020 I did my first live stream where I  taught restful api integration and it was   one of its kind but apparently it got a very good  user response and over the time flutter platform   kept on changing the null safety came and a  lot of thing was hard to follow up so today   i'm redoing this tutorial with latest version of  flutter and null safety in place so what are we   waiting for let's start with the visual studio  code let's create all the folders that we need   first of all we will need models folder  then services and the views folder inside   views i'm going to create home page dot  dot which is going to be our main page   and while i'm creating a basic template  you can see i use a lot of shortcuts   like tab in betweens or sdaf or stl to generate a  stateful and stateless widget so the point is you   should be using smart way to generate the code not  the hard way all right so i have the page ready   with the title post okay i'm going to link this  from the main file so instead of saying my home   page i'll be calling home page which doesn't have  any parameter and let's go ahead and resolve this   perfect now our actual work will begin  where we want to fetch all the post and show   on this screen so let's go ahead and check out the  api which we are going to use in today's tutorial   so we'll be using json placeholder i'll put  link in the description so you can try yourself   and basically it gives uh dummy data for all these  kind of apis and today we're going to use the post   api so you can think of it as like a facebook post  or any social media post so the first thing we   have to do is select all the json data and paste  inside app dot quick type now you may define a   name of your class so i'm going to say post here  and it has automatically generated all the model   file for you and it has done all the conversion  of json to string and conversion to the list   so just copy this json file okay copy this dart  and create a file inside models so i will call   post dot dart and paste whatever you have copied  now this is the place where null safety comes into   the picture you have to explicitly specify each  property either it's required like it will have   the data or it's optional then you have to place a  question mark in front of the property so user id   id title i know that it's gonna be there with my  post but the body may be you know optional kind of   thing so this is what you have to observe for your  model right you can place question mark for all   of them or make required all of them right so so  far we have learned how to create model from our   json response now let's go ahead and use this data  inside of our page so what we're expecting is list   of post right we don't want to display just one  post we want a list of post okay and for that i'm   going to create one flag which will keep a track  whether the api response has loaded or not so i'll   just create a variable is loaded and initially it  will be false so let's go ahead and implement the   body part of our page and i'm going to use a list  view dot builder here and if you're a beginner and   you want to understand the list view widget first  you can click on the card over here all right so   inside our item builder i'm going to return  one widget and as of now let's say container   okay and then maybe i will write one child as  a text and for time being let me just say hi   okay so at this point we should be having infinity  number of high right because we didn't specify   the count of this list so you can define item  count and let's say then as of now okay all of   these values i'm going to make it dynamic so don't  worry about that now you will see 10 highs okay   now it is time to fetch the actual data and  replace this boring high okay so i'm going to   override the init method now the reason because i  want to load the data when the page initializes i   don't want to repeat it on every build and if  you're using state management if you're using   controller probably this part of code should be  written inside that controller okay but we are   not going to use any controller i don't want to  complicate this video let's make it simple so what   i have done here i have created one method which  is responsible to get the data and that method   i'm calling on init okay so here i want to make it  asynchronous so that i can fetch the data and wait   for that response now what i will do once the  response comes i will assign it to the post but   we don't have any helper which can fetch the data  from internet so let's go ahead and implement that   to make a remote call i'm going to create one file  inside services and i will name it remote services   you can name whatever you feel like okay and this  is nothing but a simple class which is responsible   of fetching data from internet so it is not  something fancy it doesn't derive from anything   it's just a separation of code okay so what i  want to do here i want to fetch some data and   of course it's going to come later in the future  so the return type will be future of list of post   make sense and i will name it as get post let me  quickly fix the issues in this method and we are   good to start with the http implementation now  to make http call we need one library and that   i'm going to install with the help of terminal  so let's go ahead and write few commands inside   terminal i have added link to this command and the  package itself in the description section below   alright so once the package is added we gonna  import the reference to http library so let's   go ahead and do that real quick now using this  http allies i'm going to create a client object it   is recommended in a bigger project to create http  client instance so that you don't open port again   and again now this is something you know you will  understand on the latest stage in a bigger project   what does it really mean but as of now we have the  client object and i'm going to parse the url which   is this json url from where we are getting all the  post okay so i'm just going to copy this and paste   inside here it will parse the url and give you the  uri or url whatever you call it and then using the   client object i'm going to call a get request  so we write it like this response is equal to   client dot get and then you specify your url which  is our parsed uri if you want to specify headers   in case you have it you can do that right  here now once you get the response it is   very important that you check whether the response  was success or not and the success code is 200. if   you want to know more about different success  code you can click on this card above here   and now we know that our response is successful  because it's 200 i'm going to get the body part   of the response okay which is actual json string  and this json we will pass to the method which   we generated from app.quicktype so here i will  say post from json now this method comes from   the generated model and then you just have to pass  the json and it will give you the list of post   which we want to return from this method simple  right so let's glue all together i'm going to call   this method from our home page remember we left on  the get data so i will say remote service okay i'm   creating one object of remote service and calling  get post and it will give you the list of post   right don't forget to use a weight keyword because  then you will get something else like a future   or something okay forget about that so what you  have to do here you have to make a check that you   receive some valid post and if it is so then make  is loaded true so that your user interface can   update accordingly all right so let's move to the  ui part here first thing we have to do is based on   this post we will change the count instead of 10 i  will say post dot length now this post can be null   so we have to do a null check here and then you  should have as many as elements as your post   length still the text says hi we're gonna change  it later on but first thing we're gonna do is   change this list view visibility based on is  loaded or not so if it is loaded then we will   show the list view of course and if it is not  loaded so we will show our replacement widget   which will just show a circular progress  bar or if you want to go fancy you can add   a shimmer effect or something like that let's  restart the application and see what we have   you're gonna see the circular progress bar  and once it is done loading you're gonna see   the list of highs at this point we're done with  the api integration now quickly i'll be modifying   the layout to show all the post content so  if you want to leave give it a thumbs up   but if you want to follow along you're  most welcome to do so basically i'll be   using text widget all the properties of  it like styling max line overflow and   also i will show you one of the situation where  we'll get a layout overflow and how to tackle that   so basically i just duplicated this text widget  to show the body content and you will notice   that i have handled the null situation because  inside our model we said that body can be null   and you will see some cross alignment to start  so that everything starts from the beginning then   i'll be wrapping this widget with another widget  and that one will go in another widget and that's   how flutter works you have the nested widget you  keep on modifying the properties the decoration   the radius and everything and you have a beautiful  ui ready in a minute only you have to care about   some of the widget which doesn't have their own  size it grows and shrinks based on their children   so it doesn't really know how much size they  want it just expands itself or shrinks so in   that situation you have to explicitly  define or wrap it inside another widget   which will tell that expand this widget or  make it flexible and shrink it right and   with all of those easy code you have the beautiful  flutter application with the rest api integrated   well that's it for this tutorial i hope you people  learned something make sure to give it a thumbs up   and subscribe the channel if you haven't already  if you want to learn more about flutter you can   go ahead and check these two videos right  here i will see you guys in the next one

Channel: CodeX

Views: 141,302

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, 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, null safe, null safety flutter, null safety, restful api, rest api

Id: c09XiwOZKsI

Length: 11min 10sec (670 seconds)

Published: Tue Mar 01 2022