Transcripts
1. Course Introduction: Handling network
requests and integrating APIs is one of the problems
faced by flutter beginners. In this course, we
are going to create a normal shopping application
which displays a list of products which are fetched
over the internet in our flatter application will
be integrating fixed or APA. For this purpose, it is a free online rest APIs
that we can use whenever we need to accommodate
that for our E-commerce app without having our
own backend server. Moreover, while
dealing with APIs, we may get a large number of data which may have
numerous fields. And so it's better to convert each and every Jason
into Dart objects. This concept is
called json parsing, which we will also
later on discuss. So without wasting any more
time, Let's get started.
2. What is Http request: Hi, welcome back
to the new video. In this module, we will
be talking about how to implement rest API
calls in Florida. If you plan to develop apps that fetch data
from the internet, you will need to
know how to make network requests and how to handle the responses properly. So definitely, when you are building a
real-world application, there will be a lot
of scenarios that you have to fetch data from server or you have to take help of some APIs
in your application. Whether it's been used API
or Google API or whatever. In those scenarios, you
have to know how to handle APIs in a
effective manner. So now the question is, what is a network request? In simple terms, when you
open an app like WhatsApp, Instagram, or Twitter
on your smartphone. App, tries to fetch the latest data from
a remote location, usually call this server. Server is a centralized place
that stores most user data. The app that you are
using is called a client. So there are two terms called
a server and a client. Client is the application, and that is that
whatever the app or Android or iOS
app you're using. And server is the database which is stored at a distant location. So that's a very basic concept. Now, what is a RESTful API? The rest stands for
Representational State Transfer. It's an application program
interface that is API, that is this HTTP request to get or send data
between computers. So just remember,
communication between a client and a server mostly happens
through RESTful APIs. That's it. The most basic form
of realistic way is a URL that the client uses to make a request
to the server. So if you see any
APIs or an eating, you will get a URL, which you had to
send the request. That is, you have to hit
that particular URL. And upon receiving a
successful request, the server checks the
end point of the URL, does some processing and send the requested data
back to the client. So this is a very simple
way of explaining, definitely in that core
technical thing, it's, it might be a little
complex also, but you just have
to remember that we will send a request
to the server and the server will
give us some data. That's it. Now, there are different methods that you use in a rest API. So there are a lot of them then, but the most
commonly used are 4. First is GET request. It simply means that you
want to get some data from a remote database request
using get only retrieve data, which means they have no other effect under
that particular data. That means you will just
go and read the data. You cannot change anything
using the GET request. Not post request. Post requests submits data
to that specific resource. You use the method to
send data to the server, such as customer informations
or file uploads. So indirectly just remember
that if you have to send something from the client to the server and save
it in the server. In that scenario, you
use the post request. The third is delayed. So it it it does what it says that it deletes the specific resource
from the server. And the fourth one is
put, that is replaces, or you can say, updates all current representations
of the target resources. That means you have already send some data to the
server, but later on, you want to update that
particular field audit, particularly of data such
as age or phone number. So in that case, you
use the PUT request. So definitely they are a
patch request and few more. If you want to know about all the requests,
you can just google it. But most of the time when you are building
an application, you are working with
this for request. Now in flutter, definitely
if you want to do anything, we have to get that dependency. So for HTTP request, also, there is a dependency
called the HTTP package is simply
append your browser, go to dev and just type http. And then remember
to select this one. This is from that
Dart team itself. Yes, scroll down and
copy that dependency. And in your application
you can paste it. Just remember, if you want
to create a new project, then also you can
do it right now I am using our previous project, but I will be removing
this previous codes. So if you want,
you can just pause the video and just
write Florida, create something new project and start from the beginning. It's up to you. Our letter pub get is running. It will get the dependency
and yes, it's done. Now our HTTP dependency
is installed. Next thing I will be doing is removing the previous files. And now in the mid lib folder, I will create new folders
like first is green, and the second is
services folder. And inside screen, I will create home dot dot and
insights services. I recall I will create
APIs service dot dot. So simply what I did is I, I organize our codes
in a clean manner. It's like all the screens will
be in the screens folder. All the API services that is older server-side
code or whatever is interacting with the API will be in the API
service dot dot. In this way, you have
a separation of code and you will have
this MVC model, that is Model View
Controller pattern as well. It's a good practice. You don't, you
don't want to write all your codes randomly
and in just one file. It will be very difficult
for you to organize or debug in the long
run. That's it. We have understood what is STDP, what are its methods different, and how to install the HTTP
package in our project. In the next session, we will use some real APIs and called those API
using that GET request. Thank you. See you in the next video.
3. Implement GET request to a server: Hi. In this session,
we will be using a real rest API by the
name of fixed or APA. In Internet, you will get, get a lot of APIs, but we will use a dummy
API so that it's, it's free for use. And we can do whatever we want. With this API. We can get some fake
e-commerce data. Which simply means if you want to get products, categories, users, or whatever, you can
get those from this APM. Bring your text editor as
you bring your browser, and just simply
type fixed or APA. And the first one that pops up, you have to click on it. The URL is fake store API.com. So yeah, this is it. You don't have to create any account or
anything to use it. These are the resources
it gives us products. It gives us the Army caught, it gives us users
and login tokens. And these other routes. That is, I was
talking about Nike. There are URLs and pod. You can say end points. You have to send request. So these are the endpoints. So simply if I click on it, see at the top you can see fake store, API.com
slash products. This is the URL, and when you hit that URL, this is the response
you will get. So it's in that JSON format. It has id title, then description, image, price. So these are the data it will give us and
we will use those, those data in our UI. So just remember, after
completing this fake store API, you can have News API, you can have blog API. There are a lot of other API. If you want, you can
try it on your own. But let's get started
with this week APA. The first thing we have
to do is we have to create a function that will
handle that GET request. That simply means this function will interact with the API. So from now onwards, we will write the API services, that is all the services
which are related to APIs. In this separate file. We don't want to write
everything in the UI. Simply let's import the
HTTP package at first. This is the way to do it. Then I will simply create
the class of APIs service. This class we can use anywhere
in our application by creating an object and then directly calling
these functions. Now the first function we
will create is GET or post. So it will be a sync. Now, we have to write
the URL at first. The URL is this. You can just get the
URL from the top. You just copy it and
go and paste here. Now, to send a get request
in using this HTTP package, you cannot directly
send the string. You have to convert
it in URI bars. And inside it. You have to mention
yard and point. This is the method or this
is the way of doing it. You just remember it. Definitely. You will get used to it. Now. Now we have the URL to
hit to send the request. Now it's time. We get the result that is
using the HTTP package. It's the p dot. And then you can see
there are a lot of requests get post patch. But we want that GET request. And inside it you just simply
write product URL. Okay? You have return it. Now. You can print the
result dot status code. If it's 200, then we have
successfully got that response. If it's 404, then that
page doesn't exist. And also, if you want, you can just name. It. Responds as you can
by name only you can understand that this variable has the response of
the GET request. And finally, you have to return this response body
in that JSON format. So you will just, right Jason, you have to import that data convert and we will just
simply write json dot, decode and response.body here. So our function or
method is completed. This is how we send
a get request. So simply you can see, first thing was to write a URL. Second was to get the response using this
http.get response. And after this STDP get, we can return the response body to the UI calling this function. Okay? So the next part is displaying
this data in our homepage. Simply in home dot, dot create. Basic UI homepage. Then return is false. Dan, app. In the app bar. I died. Then I will do centered. Title is equal to true, elevation is equal to 0. And I will give
background color as background colors
dot red accent. In the body. We will be using future Builder since that function is a future. And future, I will
just simply write API response dot, get all posts. See here we have
created this object of that class and simply
call that future function. So this is the first
time you will be using a real future function. In the earlier videos, we were just freaking
that function. But now it's a real
server function which will take some
time to execute. In the builder, we will
have a text and a snapshot. So as usual, in the
very beginning, we will check if
snapshot that has data or else return center
circular progress indicator. And if it has data
for time being, we're just sending
a text of success. Because I want to see
the output at first, that output in the
debug console at first. So let's restart. Bring down our application. See, we have this success here, but in the debug console
you can see response.status code is 200 and response
body is like this. That is, it's a list of map. So in the first data. This is the first data. So you have id
title, description. This is in the JSON format. To output these data
in the UI here, we will simply use a list
view dot Builder widget. List view dot Builder widget, same as ListView widget. Here. That data can be unlimited. That is, we don't
know the number of elements in that list. So we will just simply write the length
of that list here. List view dot builder
have two parameters. First is item count and
second is item builder. Item Builder is a function which has contexts
and that index, index is the position of that element in the list
which starts from 0. So index starts from 0123 to the number of elements
in that list minus one. Because if there are five
elements in the list, so the index will
be from 0 to four. So simply, item count will
be snapshot dot data, dot length, because
snapshot that data is this. And we will be using its length. So just remember,
if we are returning something in the future,
that future will. That data is stored in
this snapshot variable. Okay, now we have a
list view dot builder. And in the item builder, we have to return what should
be the rigid in that UI? That is, what should we
return to the UI screen? And I will return list tile. Now simply in that title, I will write snapshot dot data. Then index that is
because it's a list, we have to use this index
which will start from 0. This does imagine 0
pollution is this one. Okay? So here we are here right now in this
data than this. So this will be one from here. This will be one, I
guess still here. Yes. Yes, still here, It's the second that
is the one index. So here I will simply
output the title here. That's checkout. If I do this, do we have some error
or do we get the data? We had that error, okay, okay, sorry, sorry. We just have to cut
it and paste it here. And if it doesn't have data than simply we will return
the progress indicator. It was a very silly mistake. But these things happen. Okay. Now let's check again. See it's loading and
then we have that data. And since it's a list view
data, I is scrollable. We have this backpack, slim shirt, cotton
jacket, lot of thing. So we have all the datas. And I hope you have
understood how I have used that Jason thing. Simply snapshot dot
data is that list, that in-depth list index. I have gone to dusk 0
position, which is this. And from the 0 position, I have outputted this title key because I know it's in
the map that is JSON format, so I just have to
use that key value. Now of the title in the leading, I will be using the
image property. Image dot network. Then simply here Write
Snapshot dot data index than image. And I will simply
write height as 5030. Now, let's save and see. Check again if it's
working properly. Yes. See we have the
images from the server. So it's the first time
your data is real, that it's coming
from the server and your application is
looking pretty good. Next thing I would do is I
would use that subtitle. And in that text I will use snapshot dot data index, and then I will use
that price thing. And since it's an integer, I will convert it to
a string, C 1091. But I want to add
dollar sign as well. And to write dollars. And
you cannot just simply write this symbol because Florida has a different meaning for it. So you have to use
backslash dollar like this. And I will simply
raise price is equal to backslash dollar then plus. And when you check the output, it's looking very good. It's looking pretty good. I hope you have understood. Till now. We were using this get request. That is the first one where
we get the all the products. That second HTTP method
or the route is products, then a particular product, which simply means how you can get this single
product details. So this is also very important. If you click on it, you can see the output. This is only the detail of
one that is only one product. So if you have used any
e-commerce application when you click on that product, another page pops up where you have that detailed
product details, product image, product category, and then Add to Cart
button as well. So to use this, again, you have to
create a new function. So which will be simply
single product detail. To get the single product
detail how it's done. Let's try to do it. First. After this guitar post, I will simply copy
this, paste it, and I will name it,
get single product. And the variable name will
be single product, URL. And also that URL
API is ID here. And definitely it's unique because we don't know
which the user will click. So we have to send it Id while we're calling this
function as an argument. So simply, this is the Maktab. To get that detail of
a particular product. Everything will be same. Only the URL is different now, and we are sending
the ID as well. Now inside the screen folder, create another file name,
Product Detail screen. So when the user clicks on
this particular product, he should be sent to that
Product Detail screen using carrying the
ID of the product. So simply input material. Then have a stateful widget
called product detail. And now just remember
it is accepting and id. And we will send it
to the constructor. Now in that bill function,
simply write scaffold. Then again, same thing, AB bar. Then inside a background
color colors the red accent. And in their body. We have to again use that future builder to call
our function of APIs surveys. Dot gets single
product and this ID, and this ID is coming
through the constructor. In the context. Snapshot. Then check snapshot
that has data, if not, return a circular
progress indicator. That's it. Again, I will simply return
here the next success, just to show you how it's done. Is it working or not? In the home screen? In the list view, you have
to use that on tap property. You will be sending that sending the user to
the Product Detail screen. Adl paste this code. You have to just remember
how to push code and all its very basic
product detail. And in the ID, you simply have to be that index and
then simply write ID. Now if I save it and click on the first
item, C, It's showing. And then in the debug console
you can see the output. That is id title,
again, same thing. So you simply have to showcase. Use this detail to
show those in the UI, like we did in the homepage. So in the product screen, simply remove this text
and return a container. And the container just give
margin at the very beginning. Then child will be column because there
are a lot of data. Now simply at the
very beginning, I will have this
image dot network than seems dot data. And it's now index
won't be there because it's statically
a map, not a list. Right? Image than height of 200 and weight of
double-dot infinity, that is whole weight
of the screen. And then uses centered VJ
and a child showed up price. So again, I will use
dollars same thing than snapshot dot data and tries to string and give
some styling as well. Now style will be font size
of 25 and font weight. Font-weight, bold. Let's save it. Shack. See. It's looking so good. Now what I will do is I
will just give some spacing at the top using this
sized box and give Type D. So the image will be lethal down and between the image and the pricing also I will give some height of ten so that
we have this spacing here. And in the column I will be using main exists
alignment that start. You will know why
I have done it in the next widgets which
we will be using. But for the time being, we have a very
beautiful looking UI, which has all the products
in the first screen. And when I click
on this product, that is means cotton jacket. See with the image, that is the product image
and that price is showing. So that's it. I hope you have enjoyed building
this video. Here. We have used this
HTTP GET request. So just remember, these are
the only code required. First that URL
second is http.get. And then lastly,
you have to return the response and by decoding
it in adjacent format. That's it. In the next video, we will complete this whole page showing all the details
such as description, category, and Add
to Cart button. Till then, just try to
understand the code properly. If you haven't understood, Just watch that video again. But please don't
skip any concept. Thank you.
4. Fetching Json Data from the API: In the last session, we were able to fetch the
detail of a particular product. And we were able to
render it in the UI. Till now, only the image in
the price is displaying. But today, in this session, we will continue
showing all the details such as description, category. And if I have a Add to
Cart button as well. Let's start end up
product detail page. We have this image. Then in the center. We have that price. Then let's have a
sized box to give some spacing and have
a height of ten. Then have a widget where
we will show that title. Various showed that title and let's give some
styling to it. Just we want the
font size to be 25. Let's see. Okay, we have it. Now. The text region. Let's have it chip widget. If you do not cheap,
you will just, if you see that, you will
know it's kind of tags. If you have seen any tag that is electronics or the category
tagging or hashtags. This kind of rigid
it's being used. So here we will show
that get degree. And let's have it decks. Let's have the next day. Font, size 15, and cooler colors dot white. And in that shape. Let's have a background color. Colors, the blue, gray. Let's check it out. See, I was talking
about this widget. Also. If you want, you can have the
cross axis alignment as dark so that
everything comes here. This side, like this. It's up to you,
whatever you want. This, these are very
basic styling stuff. Not a big deal. Again, have a size box. And then finally, we will
show that description. All the keys are here. Inside the response. You can see the
description image. And now I will save and see
this is the description. So if you want, you can do some styling
or some font size. I'm just leaving it like this. Now. Let's here have a
Add to Cart button. I will give it as
Floating Button, floating action button. So let's say a floating
action button. Then child. In the child. Let's have the icon. Add shopping cart, shopping card outlined
in the breast. We are doing nothing. See, we have this here. I will just give it the back
ground color, colored green. And I will also change the location of the
floating action button. I will give it floating
action button location, the center float. So see, it's looking decent. Our product detail
page is also done. If you go to any other product, see all the details are here. The category title, price, everything is looking perfect. Now, when we go to
the fake store API, we can see we have done this endpoint that is
get older products, get a particular product. Now it's time we
get the categories. See if we click on it, there are 12344 categories. So we will display those
categories in our UI. First of all, we will create a function which will interact. I will just copy paste and
right, get the gritty. It is not accepting anything. This will be getting a URL. Here. This is the end point. So now this function
goes to the server and fetches on the category
present Indus EPI. Not definitely. For that, again, we have
to create a new screen. I will name it all
category dot, dot. I hope you are
understanding that, all that now it's very easy
to implementing GET request. Everything is
basically the same. We are just completing our UI
so that it looks very nice. In the old category dot dot where simply important material. Then create a stateless
widget called get a goodie. Now have a scaffold bar. Died of. Next. Get the goodies have
background-color of colors that are red and sent
it through in the body. We will have that future. Will that again? Since it will be interacting
with our function. Now, use the object of our class to call the
function get all category. In the builder. We will have context
and a sink snapshot. We simply have to check
if snapshot dot has data. If not, we will return a set of cooler
progress indicator. If snapshot that has the devil, this for time being returned, return a success. Now, what you can do is we
must navigate to the screen. And for that, in the homepage, I will be creating some buttons. It will be, I can, but it will have an icon. I can start view list. Now we will navigate to
the categories screen. My TDL page layout. We will have a context. And this. So let's see how it, what is the output in the
debug console. You can. See here this is the
icon button we have, which is the all categories
that if I click on it, we have this success and see, this is the output
response from the server. So now simply in the
old category page, I will return a
list view Builder. Since it's a list. Item count, snapshot
dot data, dot length. And in the Item builder, I will simply have
contexts and index. Now, we have this index and now we will
return a card widget. This is another widget. I guess it's a
really basic widget which has an alleviation, will just give some margin and then give it a shape of
rounded rectangular border, border radius, border
radius, circular 15. And then in that child, you will have a container. This is just a basic thing where I will display
these electronics. Joy remains collection
everything. Now here in that text, I will show snapshot dot data
and then directly index. And I will make it uppercase. Just to look at good day. I will give a font size of 25. Now let's see. Let's
check out the output. Now when I click on it. See electronics, jewelry,
men's clothing, woman. So it's looking very good. It's looking decent. You can say at least this margin and padding where I used to give the spacing within an
outside these cards. And definitely when we
click on this card, we should go to a screen where all the
products related to this category will be displayed. For that in the card, we will just wrap it with an inkwell inkwell widget and haven't on tap
function to it, which we will use later on to fetch products
by categories. So that's it for this video. In the next video, we will fetch the products
by their categories. Ngo.
5. Basic shopping application: Hi, welcome back. In this session, we will
complete that GET request. And until now, we were able to fetch the categories and
display in our application. But now it's time to fetch products based on
these categories. That means if I click
on electronics, then a new screen should appear containing all the
products electronics. And for that endpoint
is this one, that is products category. And then we have to send
this category name. So as always, let's start
with the API at first. So for that, I will just
copy this and paste it here. I will name it, get product. By getting. Now it will accept a string
cat named this category name. And the variable name. I will change this
to fetch product. Get the gritty you are. You can name whatever you want. And here the endpoint is like this category and
then that cat name. So see, this is how it's
done and if we click on it, it will give us response. With Alda products. Now we have the function ready, but also we should
create a new screen, which we will call
this function. I will name age category,
product dot dot. And I will now import my TDL. Than a state less
rigid of a screen. It will accept a category
name in the constructor. We have to assign that
to this variable. Now, let's scaffold. Then AB bar. In that title. I will give this category
name to uppercase. This should be the title
and background colors. Kettler start to read. And then center
tag dealt through. Now, what we want is
when we click on this, this pitch should open. So let's go to oil category. And in the inkwell, we have to use
navigator, dot bush. Then my TDL Page Layout, View Reveal, and then
the name products grain. And then we have to send
that particular name. We will get the name from the snapshot data
and then index. Let's try it out. Let's see what happens. Now when I go to Categories
and click on jewelry. See these joy is
there in the AB bar. If I click electronics,
electronics is there. So now we will simply use a future builder inside
category product page. And I just after the
name it properly. Okay, So in the body, Let's have a future builder. Nan. Then future will be App Service, get product by category
and then send that get the gritty name variable. And in the builder, we will have a context. As always, I guess you
will just learn it. Now. The same thing we're
doing it again and again. Maybe never contexts. And then a single snapshot. We'll check. If snapshot that has data and return circular progress indicator. We have done this more than, I even forgot how many times
we have done these things. Now if it has the data, we will use a list view builder. Now, this UI will wish
same as the Home UI. This ListView builder. That category. We'll just turn this
ListView builder. And first off, I will just check if
everything is correct here. Snapshot dot data, dot, del, index price than this product
screen I will import. Okay, let's check it out. If there is any error. When I click on electronics, nothing happened. Let's see, Does he have
any error or mistake? Product by category? Good, product by category. Then we have this function. Let's restart now and then check if there is any
error still persisting. Know, I guess I just I didn't
save the file. That's fine. But see it showing now, if I go and jewelry only the jeweler things really be there and
if I click on it, this product detail
page will pop up. So it's working very nicely. And I guess our this
portion is done. Now, when we think about any, you can say e-commerce
application definitely there is a shopping cart which
we haven't used here. So let's go and see that
resources document. And here you can see that
we can get a cart as well, which will give us some
products if we send a user ID. So please take the time
to read these documents. You will learn a lot. There are a lot of end points. Same. I'm using a few of them just
to show you how it's done. Now we will be implementing
the cart page. First of all, we will
implement a function which will get that card. So I will just
name it, get card. It will accept a user ID. And I will name it
fetch card products. And then the end point is. This cards and then the user ID. This is the end point
of the cart API. So since it's a dummy API, we have to use already existed user details
in their car products. We cannot insert our
own data for real. We will take a user ID of one to fetch that it is in
simply just remember, whatever we are doing
is just a fake data. I would, I just want you to
understand the concept of HTTP and how to fetch and
display the data in the UI. That's it, nothing
more than that. Now, let's create a
guard screen page. God's green dot dot. Then import material. Let's have a state less
rigid of cards screen. Then as you shall, we will have is scaffold. Then in that title. Right? You are. God, it will look professional. Then some Ted's same as before we have done this so many times, I guess now you had an
expert in these things. Now, in the body, we will have a few
chaired a builder which will accept if future get card. And I will send a user ID one, which I already know is it is
there in the fixed or API. Just use the documentation
of that API. Once again, if you haven't understood snapshot that has data center, that is circular
progress indicator. Here. Just for the time being, I'm reading a text of success so that we can get that
result in the debug console. Now, obviously we have to
navigate to the screen as well. So the home, go to the app bar and I will copy this icon button and paste it. And now this will
be shopping cart. And that page will
be guards screen. Let's check it out. See, we have this card. I can hear. Now if I
click on the cart icon, that response is this. It gives us a 200 response. That is, it was a success. We have the ID user ID one. Then. Our main concern is the
easiest products key. So the product's key has
a value of an array, which consists of product
ID and the quantity. So here we are getting
that product ID only. So we have to use to future
builders in order to fetch card details at first
and then later fetch product. That is definitely we want the product name and the product image
from this product ID. So let's get started for that. Simply, we will write if
snapshot that has data, then then we will have a list of products, which is, which is this key, that is products key. Now, we will be using
and List View builder. Display all those products. And in the item count, I will be using
products dot land. And in the item builder, I will be using
context and index. Now, the fun begins
because again, we have to use a future. Because now we have to get the product detail from the product ID which we
have already done before. So we simply have to write APIs, surveys, dot gets
single product. And then simply I will go use this products, then index and then
this product ID. Like this. Now, again I will have Rick contexts and then seeing
snapshot that right. This time I will name
is arcing snapshot. And then again, we have to check if a single
snapshot dot has data. This time, I will be returning a linear progress indicator
for the first time. And now I will have a list style containing
all the details. Simply in the list style. I will have that title at first and show you that it's working. Sing snapshot dot
data, then title. Let's check if it's
working or not. Bring out your application. And then simply if I
click on that cart, C, C, we have the three
items which are in the cart. This logic is little bit tricky, but you have to pause the video and understand it properly key. In the first future builder, we are getting the cart. In the second future builder, we are getting the
product image name and a price from
that product ID. In the leading, I will use
image dot network and then simply sink image dot data. And then image. I will just give
it a height of 40. Than in the subtitle, I will write that price
or not the price. I mean that quantity. How much I have ordered it. That is not me, that, that that dummy API data. And it's a quantity, so we have to change
it to string. And then in that trailing, I will have an icon button
and the icon will be removed. That is delayed product. I'm building all this
so to make it more, load a lot more
real-world application and not just a
dummy application. Let's hope everything
is working fine. Bring up your emulator
than code to the cart. And see, it's looking perfect. We have that title, we have the image, and also we have the quantity. So this is now looking like
a real world cart page. Only we need is a basic
order Now button here. We can give it in the bottom navigation
property of the scaffold. Scaffold, instead of using
floating action button, I will be using,
but navigation bar. And here I will
have a container. And then I will just
give it a height of 60. Weight of double-dot infinity, that is the whole width. Colors green. And in that child will have
a center region of text, which will, which we have
in the right order now. And then just give it
some text styling. Color, colors, white, font size. Font size. I will give it 30. Save it. And see this page is looking better than any other
application that is n here, that basic application
I will say, because we have our categories, when we click on it,
we have the products. See, we have this products. If we click on any product, the product Dale is there and this error is just because
the page was not scrollable. To solve that adder, we can simply go to the
Product Detail screen. And here in the container, I will just wrap it with them. Single child scroll
view. That's it. See, the error is gone. These are the basic things
which you have to keep in mind while building an application
that we might forget. And there will be
few bucks in it, but it can be
solved very easily. With this, that GET
requests portion is finally completed. We have learned a lot. In the next session. We will be talking about how
to handle the post request. Then just keep practicing.
6. Handling POST request: Hi, welcome to this new session. Until now, we were just discussing about
that GET request. But it's time we study the
other requests as well. Because obviously now
we have got the data. But a lot of time we will
be Boosting data as well. So that is we will be
sending data as well so far that we have to use
the post request. So now how to handle
post request? We already know it's reduced
to send data to a server. We use it in scenarios
like uploading a file, submitting a form data. In a post request. Additional parameters such
as headers and bodies are also sent along with the
request containing our data. Now, in our API, we have this login user, that is user login
and point as well, which is a post request. And we have to send
username and password. And since it's a dummy API, we have to send this
username and password only. Then only it will be successful and it will send a sick token. Which will simply means, yes, the user credentials are
real, are, are valid. Now let's go to the APA surveys, and here we will be
creating a post request. It will simply be
future user login. And then it will accept a
username and a string password. So this is a very
professional or this way of writing you will use in real-world
application as well. If I wanted, I
could have directly wrote or hardcode the
username password here. But I want it to be
much more dynamic. We will have a login
URL, URI bars. And this will be definitely
there in the URL endpoint. And after that, we will
have art and then login. Okay? Now it's time for the new thing, which is the response. The response will be x to the p dot post for
the first time, and it will have our login URL. Now. We have to send a username and
password in that party. So I will just say
here, username, username, and then
password, password. So this is how we
send it. That's it. It was not a very
big deal, I guess, because it's also a
request in which we just simply do nothing much. We have our response and which will accept
a URL, any body. Now here, I would simply
write dress, bonds, dots, dot, status code, and all should be there. Okay, sorry, I
forgot to use await. This was a very silly mistake. So just remember when we're
doing this kind of request, await is very much important. So now we will use the login user login
endpoint from the APA. It will return a token if
it's executed successfully. Now we have the function, it's time we create the screen, which is the login screen. It's so good that our
application is being, is looking more and more professional and more
and more completed. Now let's have a login screen. Then scanf phone, app bar. Then let's have it
named Florida shop. You can name whatever you want. I'm just using a random name. And then background color
will be colored started at X. And now in the body, I will have a container. It will have some
margins of Duan De, rid of media query dot
of contexts dot size, dot width, and height as when the whole height
should be taken. Okay? Now in that child, we will have a column in
this matrix insulin men as centered and cross x is an element as well
as send it because I want those fields to be in
the center of the screen. So we will have two text fields, that is username, password. But first of all, I may, I will make it the homepage. It will be the homepage
of our application. Now if I refresh, we can see this is the
flower test sharp. And now then login screen. We will have, I'm to text
editing controller as well. When would we name controller with text
editing and to learn. And second controller,
when we word controller. Now, as I said earlier, we have to use the username and password which
are given here. So I will just copy it. And here in that text
I will paste it. And again, I will copy
that password here. And here I went paste
the password as well, because it should be predefined. Now in the children, let's have it to text fields. We already know how to
use this TextField, how to decorate it. These are not newly done. We have done it in the
previous sessions. Will have an input decoration, labeled, use and name. And then I will have
some border as well. After that, I will have
a size box. I type D. And then again, I will
have this text field, which will be a password. Now after the text field, we will have a button
simply in the container. I will give it a height of 50. And rid of media
query dot height, that is the whole
width of the screen. Discord in place that child, I will have an elevated button. And in that child, I will simply write login. And I will give
some styling to it. One says 25, font weight with the ball. Okay. See, we have our login screen and it's looking pretty nice. If you want, you can have some logo image here,
It's up to you. So simply in the
elevated button, I will write, I will call
that our login function here. Await APIs service user login. The username I will write
name controller dot text, and the password I will write password controller dot text. Let's say nulla. Let's check if it's
working properly or not. If I click on the Login button, let's see that console, see it's 200 and we
have our token with us. So since we have
our token working, what we want is if the
user successfully logs in, then he should be sent
to the home screen, just like any other
real-world application. So this token, we will save it here
in this variable. And then we'll check if token, that is get token. And the token value
is not equal to null. Because if it's
called none, that is, we're sending some data. So we will just simply write, if it's not equal to null, that is, it is correct. You will use a snack bar to show a feedback to the user
that he has entered. Correct credentials. We just simply write the text. Success. And yard Token ID is. And simply I will print, print token to the
user like this. And I will give some
background led to it. Notice the green,
that is to dab snack, but I am giving this
background color. Now after that, what I want is the snack bar should be
shown for two seconds, and then we will
navigate for that. For that duration
of two seconds, I have to use this future, the delete function so
that it reads do second, and then navigate us. Then navigate us to
the home screen. Darian Page Layout. And then the home screen. And the homepage. Like this. We are
going to the homepage. And if that token is not there, that is, there is some error. Then again, we will
show the snack bar. But here, first of all, you will write username
or password, incorrect. Username, password in correct. And the color should
be red. In this case. Let's check it out if it's
working properly or not. First file, I will write
a wrong username today, I will remove this for
and then click on Login. See username or
password incorrect. In our debug console as well, we have a message like this. But what if I make it correct? And then click on Login. We have this success message 2. Second, we are sent
to the home screen. Wow, it's looking **** nice. And we have finally understood how to use this post
request as well. So since we, we were sending
a data in the request body, it was a post request. So you have to remember
when to use GET requests, when to use post request. But at least we have
this app working. When we refresh. Obviously it will come
to the home screen, but now you have a
basic application to showcase your friends that you have built
something from scratch. Now you are not a beginner, you are an intermediate
in Florida programming. I hope you have
enjoyed till now. In the next session, we will be talking about
the final two requests, which are PUT request
and a delete request. So definitely we will enjoy working on those
features as well. Then just try to understand
the code deeply. If you have any more
doubts and all, please. You can also Google it. Our ask us in the
free form and all. But definitely, it's a
very important concept. And while you are billing
APIs with NodeJS MongoDB, then you have to use
these HttpRequest a lot of times. Thank you.
7. PUT and DELETE request: Hi, welcome back. In the previous videos, we have learned how to use
GET and post requests. In this video, we will be
learning about the PUT request. Request is basically used to obtain the data
and the server. So in this fake store API, we will update our card when we click on the
Add to Cart button. That is, when we
click on this button, some code should execute. But just remember, it's a fake API so nothing
will be updated for you. We can just see the response
that console to conform. Just go to the freak store API, then you details on dogs. Here you can get all
the APIs it supports. I will come and click on
this, update the card. And now here you can see method is put and we have
to send greetings, user ID, date, and the products. And the products is whether
that is is it collection, that is list of map
containing the product ID. That's it. So yeah, you can use or
patch whatever you want. I will be using for
that to execute. Let's simply go to our API
services dot dot file. And here I will be
creating PUT request. Then let's create
luncheon date card. It will be a sinc function. And now it accepts a user
ID and product ID. Okay? After that, we will
have this URL. As always. I will name it
simply update URL. And the URL will be slash
cards and a user ID. So like this and user ID. Okay, I will just
make this d small d. After that, I have to create the functions that is a
response and then await. And now we will be
using STDP dot put. The URL will be update URL. And then the body will be a map. And now I have, we have to send the
keys, these user ID. It will be a string. Just remember here, every key
will have a string value. What I mean by that is I will
just show you then date. We'll just write date, time, dot, datetime, dot, dot to string. So we have to convert
these things to string. And then products. And it will be a list, Ok? List of map. And here I will just simply
write here product ID, product ID and the quantity d t. I will
just hard coded as one. And then make this list
string in order to work. Now as always, just print
response status code. And then print yes
bonds the body. And after that, I will return
JSon decode response.body, but we won't be doing anything. I'm just making the function
so that you understand how to do it when you
have a real time API. Now we have the function up. Let's go to product detail. Here. In the floating action button. Here I will simply make
it a sink with a weight. I will be a thing. Apa service, dot update
card, then user ID. I will I know I will send
one since it's hard-coded. And then this product
ID is this ID. I am sending this ID as well. After that, we can just
have a scare, fall, fall, the messenger of contexts, dot show, snack bar. And then snack bar. You can just simply write
product added to cart. So these are just fake feedback. But the code of the
HTTP request is real. Let's bring it out. Now, when you go to
this jacket screen, when I click on this
Add to Cart button, see product added to cart. In the output you
can see ID, user ID, date, and a product that is ID, product ID is three. We send it three. That's why this ultimately means that our PUT request
is working perfectly. Just imagine it would be a real data and we're just updating that data
in the server. Data. The final requests
which we will be discussing is the
delete request. So delete request is used to delete this data
in the server. So here we will delete our card. We will pretend to
delete our cart when we click on Remove button
in cart screen, that is this button.
This button. When we click on this, we should just get the feedback. And as always, it's an fake API. We just, we will just see
the response in the console. So create a request
like delayed, delayed request than simply
a function of delayed card. Then string user ID. So we will just get the user
ID and delete his card. I'm just trying to
make you understand. I know it doesn't make any sense to just
work with fake APIs. But trust me, this
will help you a lot. Now. We just have to
get this same URL. The only difference will
be the HTTP requests to here we will just
write response is equal to await http dot delayed, delayed card URL. So this is what we should do. And after that, we simply
write response, status code. Print response the body, and return json dot d
code response.body. Now in the fixed order API, you can see this is
a delayed cart page. And here the URL is like
this cart and the user ID, and we just have to send
them my third of delayed. And then in the output, we will get the user ID
date products. That's it. Let's try it out. Let's go to the
card screen page. And then in that trailing, we have this on praise. And here we will simply write a weight APIs service
Dot, Delete Cut. And then we will just
send a user ID of one. Since it would have been
a real application, then you might be getting
their user ID from Firebase or wherever you want. And after that, we will just
have a scaffold messenger and simply show a snack bar. Simply show a snack bar. Having the content as item deleted successfully. That's it. Let's try it out. Does it work or not? Now go to the card screen. And now just, I will
clear the console. And now when I click
on this delete button, see item deleted successfully. And we have this
item ID, user ID, date, and these other
products, see 61. So we add leading
the right card. I just wanted to implement a delete function and make you understand how it's working. I know here the whole
cart is being deleted, but we should remove one
product in that case. I hope you have understood. You have to update that card. That is, if I remove
this into server, just remove that product from this list item.
It's up to you. But at least you should know the concept and how
to write it properly. So high, I hope you have
enjoyed this video. We have talked about
all that request, whether it's GET,
post, PUT, delete. So in the next video, we will be finally discussing about the authenticated request. And that will be the final
video of our HTTP module. And Q.
8. Make Authenticated requests: Hi, welcome back. In
this session we will be talking about how to make
authenticated requests. So until now, we were
using an API which we could directly access and doesn't require any
authentication key. But this is not the case most of the time when we're
building application. In order to fetch data
from many web services, you need to provide authorization
or authentication key. There are many ways to do this, which we will discuss now. Now the first way is
that basic art method, basic authentication means
that the client app sends the username and password to the server in the HTTP requests. So simply when we have
a username password, we will use a basic art. And disc also can be
done using two ways. Either we have to
send those details in the body parameter or
the other way is to encode those credentials with UTF-8 and then pass it in
the headers parameter. Let's do the first
thing that is, when we send those details
in the body parameter, simply bring out your
API services file. And let's create a function
called user authentication. And now here we have a username
and a string password. Now we don't have
any URL at present. I'm just right now
showing you duck course code that
is how to do it. Because definitely you
might have an API such as a further AWS server or a
NodeJS server or whatever. I'm just using a dummy thing. That is api dot
somewhere, I0, whatever. It doesn't make any sense. Now, the thing is, the important thing is here, it is the response. Now when we write, response
is equal to await http dot. When we are sending
that data in the body, we cannot have a get request. We always have to use
the post request. Then only we can send
up party parameter. Now in the body, I will simply use this username, username and password,
like this password. And after that, as always, you can print the response. I'm just saying it again that here we are not using any API. I just want to show
you the code how to authenticate STDP as well, because everything will be
same as we have done before. Only difference is we use
this party parameter. So just imagine this is
your NodeJS server and we are sending the username
password for authentication. This is one of the basic art. That's second one is to
send the details using the authorization
header that we can do. Simply like this. Okay, I would just create another function
so that you will remember user or third IgG and
I will just write session. Now, I will remove
these body thing. And since we are not using body, we can give a GET request
as well because it's, we're sending that
detail via headers. Now we have the first encode, those details like
this basic art. Then first thing will
be this basic keyword. After that, we will
have base 64 encode. And inside I will just write UDF eight dot code. And here you will write
your username and password. Simply. Username and password. This code, you have to remember this basic is the
prefix which we will be using. There is another
prefix which we'll be using within just a few seconds. But this is how we have the authorization
key that encode. And then in that GET request, just simply write headers. Then use the map. And the first key you
use is content type. It will be application Jason. And the second is authorization. This is what we
are talking about. And it will have this
basic credentials. That's it. This is how it's done. So this is the way of
sending username and password and also not only
username and password. There might be some
websites or APS which asked you to send
the API code here. That is, it's not always necessary to use this kind
of username and password. It also depends upon the
API you are working with. Now. First was the basic art. Now the second one is the beer. The beer authentication
simply means that we have to authenticate using a token instead of a username
and password. Now if you have a token, that API specifies that you
have to use this prefix beer. This is how it's done. Nothing much. On Lee. In the authorization. You have this beer for
keyword and that token value. That's it. That is access to conserve pose. And just imagine here we
have this access token. Some value to convey. You can say some token
value, that's it. So this is how you
use that better art. I'm just saying it again. If you have an API which
has its own API key, then change the authorization
key to that specific key. Sometimes some APIs says that in the header the
key should be like this, and then the token value. So you have to read
documentation of that API very carefully so that you don't
make any mistakes. But just remember the code here. This is done most of the time when we're doing
any kind of authentication. I know you might
be asking, okay, but there was no real API. So I'm just showing
you some examples. One, you can go and try
this news api dot ORG. It will give you all the newest, latest news and all. You can get the API key from here and read the
documentation how to use that API to
authenticate yourself. Second API key you can
get is this OMB DAPI. You just simply go and click on this API key and write your
email here and submit. In this way you will get your
API key and you can just directly start accessing all the movie
database from here. The other APIs or whether a pair here also you can get
the EPI for yourself. And then these are the APIs that provide one Cali PA
current weather API. See like this. So we just have to read the documentation is properly
and try it on your own. In this pandemic if you want, you can also get that COVID tracking API where you will get all the COVID-19 related
data around the world. With this also, you can
build your own application. So I hope you have
enjoyed this session. If you want, you can just tap
here and try on your own. Try to make as many mistakes
so that in the end, you will become a
better developer. Thank you.
9. Why we need models: Hi, welcome back. In this module, we
will be talking about what our models and why
we need it exactly. Model is just the class used
to represent a certain data. Any app will work with various
types of data, obviously, using models, it's easier to call the data and pass them
around the application. So if you remember from
the earlier examples, what we did is we used to pass data from one screen
to another directly. That is the map itself or the map value leg that
we were passing it. But in real application, the data coming from the server will have
complex structure. And we wouldn't be able to remember that key of every data. That is why we use models. Hearing this example, you can see how we create our models. Suppose we have a
data of a user. So we create a class
user and Dan dove, the values it exists, that is the, all the data
that is inside the usual. Your should be written like this in the form of
instance variables, like final int, id,
final string name. Then a constructor
should be there so that we can pass the value and
it will be assigned to it. And this factory
function is nothing but a way to transform that data, map data coming from outside. And then returning an
object of this class. In simple words, from the
Firebase or from the API, we get mapped data
that may map data. We will send it here, that is user from Jason. And then it will return
an object. That's it. So these are the terms which we use generally while
working with models. That is serialization
and deserialization. Serialization is to convert
to smart object to Jason. And deserialization is to
convert JSon data object. Deceleration is what we
will do most of the time. That is, data coming in
that JSON or the map format will be converted
into a dark object. I know it might be, you might be feeling
overwhelmed by this concept, but it's very easy to do
once you get the hang of it. So here we need to create a class for dealing
with deceleration. And it's called the modal class. So you might be thinking, okay, but without models as well, we were able to
perform our task. That is, that application
was working perfectly. So why do we need models
exactly for our application? So look at this example. Here we have this data in the map format
name, user ID, email. The above representations
represents a very basic user data. We can see realized that
JSON string using that dart convert library as we
were doing it earlier. And then that makes
it a string value and returns map value. The value then can be accessed
in the following manner. That is, once we decode the
JSON string, after that, we can just print hi and
then user and username, that is the name is
the key of this. Map than email is another key
and user IDs and other key. So this what we
were doing earlier. Now, let's study what is the
issue with this approach. Unfortunately, JSON
decode returns a map, means that you do not
know that type of data values until runtime. So here, email or
this user ID is a integer that we do not know until and unless
we print it here. And if it's showing
any error or whatever. With this approach, you lose most of the statically
typed language features. That is type safety,
autocompletion, and most importantly,
compile-time exceptions. So runtime, okay, we get it. But compile time while
we are writing the code. Then also it won't show
give us any error. But when we are using models, it will tell us that
it's an integer. Do not use string or whatever
the exception is, is. This is not a good practice. For example, whenever you access the name or email fields, you could quickly
introduce a typo as well. Since suppose here
its name hates email. It might be E, dash
mail or whatever. Here it's user id, i is capital. We might write it small. This kind of mistakes are very common when we're programming. So to combat these problems, models comes into
play and we strictly define the type of
the values like this. Here we strictly defined it. It's an integer, it's a string. So this is how we are in a safer side while
building an application. And it eventually makes
the code less prone to errors as most of the areas are handled
during the compile time. I hope you have understood
why we need models and you might not understood
how to create it, but not an issue. In the next session, we will be creating
our first model. Thank you.
10. Creating our first model class: Hi. In this session we will be creating our first model class. So before that, bring out
your VS Code. And I emulated. If I press on any product
than in the debug console, you can see all the
properties are data it has. And with respect to this, we have to create our model
class in the leaf folder. Let's go and create a new
folder called models. And inside it, Let's create
product dot dot file. To create a model glass. First, create a class
called product. And now here enter Alda, all these datas as
instance variables. That is, I will
say final ink, ID, then final string,
title, then rise. It's a little complicated
here, so it's double. And also I'm not
using any datatype. After that, we can have
final string description, then final screen, string, sorry, category, and
then final string image. So yeah, these are the
data a product will have. Now after that,
create a constructor. For the same. Now I have to write required. Then this dot id required
tes dot title required. These rays, these description, this dot get degree, this image. So now we have our
product model class. It has all the data's. Now we have to create
a function that will accept Jason as input, and then it will return
this product object. Now to create it, we simply have to write
product from Jason. Then it will accept a string
dynamic values called Jason. I will just write JSon. Then it will simply
return a product. Now up in the product, we will soon have product id. Then they tell Jason BJ's description, isn't this corruption. Then get degree, Jason degree. And then finally we have image. So see, these are all the keys which are
already mentioned yet this price category
description image. Now when we call this function, we will send this data here and it will give us
a product object. That's it. We have successfully
created our first model. Now. To use it. We have to go to our
API services dot file. And it's time we do the necessary changes
to the function. Know that there are a
lot of functions and we will start with this, get all post function here. First of all, I will just
give it a return type. Of list of product. That's it. So this is the return type. Now simply, I will create an empty list at
first of products, name it all products, and it will empty. Now, I will have this Jason Dodd decode
body in a variable here. And I will loop through this Jason thing that is all the products. I will loop through and get
a particular product here. And simply, in the all products, I will add product from Jason and I will send
here the JSON. That's it. And in the end, I will return this all products, that is list of products. So what I have done
here is first of all, I have created an empty array, which we will pass at the end. And it will contain the product object is it will
be list of product object. Now these Jason response.body
will be in the JSON format, in the list of JSON format. So we'll simply loop through it and add all the product after
converting it via this. That is product that from
JSON inside this list of product and returned
this all products. After this, we have to
make the changes in the home screen where
it's being outputting. Here, where we are
getting the products. So this async snapshot will
give us now an object, not an object, it will
be list of products. So first of all, what I will do is simply create a variable which will
hold the index data. That is a single product here. Since it's looping
through all the snapshot, it will give us a
single product here. And after, we simply
have to write product dot title like this. So it's so simple. Product, image, product, the price dot toString. And then in the end
here I will just write product, product ID. Like this. Let's check
if it's working or not. I have restarted the
application, but before that, you can just see how easy it
is to now output the value. We don't have to write
the key again and again, we can just directly use this dot operator and
we will get the data. It consists. Now when I click on this
login button, here, you will find all the datas which were already
there previously, but now we are
using models here. So this is a very bare
minimum explanation of models and why we use it. And trust me, when you
have a lot of data, models will come
very handy to you. In the next video, we will use models for product detail and
other pages as well. Thank you.
11. Changes required in frontend: Hi. In the last video, we make that changes
in the home screen so that we can get that data from the API and change that
adjacent to our model class, that is, the product
models less. So now in this session, we will make the
changes required in the single product
function as well. To return the model. Bring out your VSCode editor, and go to APA surveys
dot dot nine. That gets single
product function. We will simply, we
won't return a JSON. Instead, I will keep these
data in every store, this data in a
variable called potty. And then I will simply turn product dot from Jason
and pass the body in it. So it will return a
single product object. And that is what we need. Okay? Now definitely if we have done the change in
single product, we have to go to the Product
Detail screen as well. Do the changes to use a model. Instead of this Jason thing. We have our future builder here. We are getting the model
that is the product model. In this snapshot. Here, I will simply
write these data type is product and then store
it in Snapshot dot data. Okay? Now we have
this product here and simply I will just
remove everything here. And I brought up dot image, then product dot price than product dot product category. And lastly, product
dot description. So you can see for
yourself that it's so much neat and easier when
we are using models. Because definitely while
writing map, that is Jason, we may do some mistake in that key that these some
spelling mistake or whatever. So it's better if we use models. Let's test it out. Is it working properly or not? When I click Login, we go to the home screen. And if I click on
this product C, there is no error. I have done that changes, but it's working perfectly. So you might be thinking, okay, our work here is done. But if I click on
this card button, then you will see
this error because we forgot that index
card screen as well. We have to do that changes as it is also using this function. This gets single product here. So similarly, we have to
do the same thing here. I will use this
product datatype. And then sync snapshot dot data. Okay? And then simply write here, product dot, product dot image. Then here this quantity, it's okay because we are getting
this quantity from here. So we don't have to change this. But okay, I have check node, there is no other
thing to be changed. Let's see our application again. If it's working fine or not. I click on the login. Okay. We're in the home screen. Now, when I click on the card, see there is no error. Now because here again, we are using models instead
of map or raw Jason datas. That's it. This is how we should use and
implement models. In the next video, we will talk about some other tools which will help us to
make models easily. Thank you.
12. Tool to generate Models easily: Hi. So until now v, we're creating our
models on our own. So here, suppose
in this product, it was easy because there were only four variables or data. That's why we did
all this on our own. But lot of times when
we are using APIs, there will be data
which are very complex. So in that scenario, we might need some
tools which will help us to make our build
our models easily. In the market, there
are few tools available just to make this
task a lot easier. There are two approaches. One is using an online tool and the other approach
is using dependencies. So here you can see that we have a dependency called
JSON serializable. This you can use if you want. Definitely lot of people use it. I will just show you
Jason serializable. Okay, and then I will
listen that I package. See this is the package
I'm talking about. This is called
Jason serializable. If you want, you can use
it definitely you will find a lot of resources
on how to use it. But in this session, I will be using this online tool called
this app quick type.io. Are this is also perfect. It's both of them
are heavily used. So see if I just simply write fluttered our dart
Jason to model. Then here you will
get both of them. Okay, I guess. Yeah, This is instantly
parse json in any language. Okay? We have this here. And to do it practically, I will be using a different APA. Earlier we were using
this fake store API. But now I don't want to use this API because we already know that
data's it is providing. So I will be using
this fruity vice.com. It's a web service which provides data for
all kinds of fruits. It's a free API. That's why I'm using it. And here you can see
all the end points. It allows. So we can get that data of a
particular fruit like this. And also we can get all the
fruits from this endpoint, that is APS slash
fruits slash on. This end point
gives us a list of this map data containing
all the fruits. So without wasting
any more time, I would like to
show you how to use this app quick.io
to create models. So here I will simply write
apple and type enter. It will give us the data
structure like this. Here you can say it's
not that much complex, but this KEY string, the value is string, string, this is an integer, but these nutritions is again a map value which contains string keys
and double as values. So I will just simply copy this structure and go to that app dot quick
type and paste it here. But before pasting and just
remember your language, you have to use Dart. And then I will just simply
remove everything here, paste it in the name. You have to write
this fruit name. You and not you have to, you can add whatever I want. But since it's a data of a particular fruit,
I'm reading through. Okay? Now in the output you see
we've got this model here. This, a lot of
thing has been done automatically or else which had, we had to write
everything on our own and this is not
feasible all the time. So simply, what I will do
now is copy everything, copy all that data, and go to our VS Code. And within models folder, I will simply create
a model called Fruit dot dot and then
paste everything here. So you might be saying this era, this is just because
that data here are not null, like this. And since it's required, so we have to simply write the required keyword so
that this error is gone. That's it. Then nutrition as well, we have to paste it and
Alda added is now fixed. So if you look in today's class, the only thing required is this. These are the data
or the variables. Then through this constructor, we are accepting
this from Jason. We already did it
in the product. Why? When we were using fixed or API, it's being created
automatically. This Json thing is just
creating a adjacent these data in the JSON
format and is from Jason creates the data
in this model format. And now you might
be thinking why there are two different classes, nutrition class as well. Just because these nutritions
value is again a map. So whatever we have in map will again convert into a class. So this nutrition has
carbohydrates, proteins, fats, calories, Hoover,
these values in it. So again, this is a
class and trust me, this will help us a lot because right now all that data have their datatype intact. So we won't do any
mistake with dose. And if you want to
see what response we will get like this, you can just simply go and diapers.com like this
and simply write, this is the response which
we will be dealing with. You might be overwhelmed
right now, but trust me, this is just, this
data is just one data. And after that, it's being repeated with different,
different fruits. That's it. So we have learned how to
create our JSON model. Without heart, without typing
everything on our own. I usually use this kind of
online tools because it, it does the job very fast
and we don't have to stress about the datatypes
and if it's something, if there is something
wrong in it. So in the next video, we will be creating our functions in the
API services saw dart file in order to fetch all the fruits data and
show it on our application. Thank you.
13. Consume a new rest api: Welcome back. So now we have our model ready. It's time. We create a function in our
API services dot dot file. So that like previously, we can fetch the fruits, all the fruits data. So simply go down and give
a comment on get fruits. Then simply, we will
have a future function called get on fruits and definitely it will
win as sinc function. Then we will have
fruit URL variable. And here we will parse our URI, that is URL, which is here. Sorry, yeah. Which will be this API slash, fruits slash this one. Simply go and paste it. I'm using this free API soda. I don't have to
create the account API keys these data null. But you, I have
already taught you how to make authenticated
request as well. So if you want, you can try with
other APIs as well. So we have this response here. Simply that it's the p dot get. Then on fruit URL. Like this. Then what I will do is I will simply create
a variable of party. And Jen, here I will write json dot d code so that
it can convert to a string of this response body to a map. That's it. This is just the work of
this json dot decode. It converts a string
to a JSON format. That's it. Now here. Earlier what we did
was here we create a list of product variable and then assign it
to an empty array. And then then simply, we use this for loop and
add each and every data. That is this single
data into this. But now I will show you a different way of
doing the same thing. It just, it just does the job in one line,
that study front. I will get this list of fruit. I will name it all fruits. Then I will just simply
write party dot map. I will get a
particular fruit here. And then, and I will
send it through the two days from
JSON function. Okay? And simply at last
I will create, I will make
everything to a list. What it's doing is it's
mapping through the body, that is this response. And then converting each and every way that they are adjacent to fruit object
and then returning it. This means it's returning it. And finally, everything
after this is done, this mapping is done. Everything will be
converted to a list. That's it. And simply I will
return all fruits here. And this function,
I will give it this generic data type
list of fruits so that we know what it's
returning. Okay? So this portion is done. Our function is ready. Now it's time to create
a new screen so that we can show these values to the
applet in the application. I will simply name it
all fruits dot, dot. Now, as usual, import material. Then every state list class of I will name it fruits screen. Now it will return
a scaffold in app. Let's give it an elevation of 0. Background color of
colors dot arrange x. And this time, I will
give it all fruits. And then center that
I drew in that body. Let's have a future builder. I hope you are now very
comfortable with these kind of code because we are doing
it from a very long time. I'm using API services, then get all fruits. Simple as that. That builder will have a
context and a snapshot. It will be in a single snapshot. Then I will check. If snapshot DOD has the dove. If not, I will return a
circular progress indicator. And if it has data, I will return in list
view dot builder. Now, item count will be
snapshot dot, dot, dot, length. And item builder will be
gone, texts and index. So now here I will create
a variable, a type float, and store this snapshot value in a snapshot dot data
and then the index. So it will be that
singular product. That's it. And then I will return it, will return a card. And inside it, I will have a child property and
then the list style budget. So in that title, I will have a center
and then the child, which will show us which
will show us the fruit name, that is food dot name. As simple as that. Just because of objects
we are now able to output or use our
variables so easily. And then in the subtitle, I would like to show all
the nutritional values, that is, protein,
carbohydrates and fats. Those simply, I will
have a text widget. It will write
cardboard high rates. And now I will concatenate
this fruit value. And then a dot, then nutritions,
then dot and see. Now I can simply use
carbides it from here just because it is
saved it in another object. Or else I had to use these key carbohydrates and definitely I will do
the mistake here. I will simply copy it
and paste it twice. Second one will be protein. It will simply be protein. And third one will be fats. And it will simply be fat. That's it. Now in the row I will give
a main axis alignment of main exists alignment
dot space evenly, just to make it look good. Now, in order to test it, we have to go to our
main dot dot file. And instead of this login file, we have to write
this fruit screen. That's it. Let's check it out. I have restarted my application. Okay, the screen is
looking good and see all that data is here. Apple, apricots, banana, and this carbohydrate
protein fat. If you want, you can output
this Janus family order, whatever this
number of calories. If you want, you can
output those as well. I'm not using the
leading as well as the trailing property
of the list style. I just want to show
you how it's done. How we can create models so
easily using online tools. And also, we have
successfully he consumed a new API that
is this fruity wise. And if you want, you can create different
screen as well in order to show a single fruit
detail if you want, it's up to you. But I hope you have enjoyed
our videos till here. This model was very important because in real-world
application, you will create
models for everything that is users, contexts, or whatever data or information you have
in your application, you will create models for that. So that's it for this session. See you in the next module. Thank you.
Rahul Agarwal, Flutter Developer & Trainer
