Flutter Post Request⚡| Flutter Post Data To API|Flutter Post API Call Example|Flutter Post JSON Data

hello and welcome back in this video we guys will be integrating our shutter application with the rest api that we have built so far if you have seen my previous tutorial we have built a cred application with the help of express mongoose and node.js and the following application is deployed over heroku and we have got a url of our heroku which is shown here and from this site if i simply send a get request to my hiroku after pressing hitting send i am getting the following data back that is the title and a description of our to-do list so in this video let's integrate the following rest api without starter application so for that purpose we shall be moving back under our project folder and yeah let's create a new folder known as client easy let's open our terminal and let's cd into it of 3d client just like this and undo this i will be creating a new flutter project so it's our flutter create to-do app press enter all right the application is created let's go into it under to do under library and we are getting our main.dot file after a long time let's do one thing let's clear off our entire boilerplate code from here just like this and here i will be creating a new stateless widget of my app just like this and instead of container it should be returning a material app under our material app we should be having a debug check mode banner false just like this and also we should be having a new theme so under team you should be writing theme data dot a dark one why not and also we should be having a new home to our material app so for having a home let's create a new proper project structure so first of all we should be having all of our views and after our views we should be also having all of our providers because we are using provider as our main state management here so once we have added this let's move under our views and create a new view under home view dot dot just like this and here let's create a new stateful widget known as home view itself and instead of a container it should be returning a new scaffold so let's add a scaffold here why not once we have done this let's go back and here we should be having a home to be our home view the next thing we should be doing is go under our passport domain file and get all the proper dependencies so press ctrl shift and p to bring up the command palette and onto this under our prospect assist i should be writing here a dependency of http and also one more dependency for our provider why not so now the first thing that we need to do is create a new provider for our entire views that is our to-do provider because we are building a to-do list with it so yeah let's have a new file of to-do provider dot dot just like this so here first of all i will be having a new class of to do provider and following class i'll be extending with chain notifier so yeah let's have a new change notifier and onto our to-do provider first of all we should be having our http client so for that purpose we should be importing our http library as http itself just like this and here i should be having a new final http client should be equal to http dot client just like this cool so once we have done this the next thing we're gonna do is create a new future method for getting all the data so for that purpose we should be writing here a get request for our own check so here i will be having a new future method of fetch data the following method will be asynchronous so let's denote this method to be asynchronous so under this method first of all we need the url from which we are fetching all of our data so for that purpose i should be having a new uri let's say and this should be equal to uri dot parse just like this and under this we need to paste our entire url so we can be moving under our postman and copy the following url from here and paste it under this just like this and once we have done this the next thing we're gonna do is simply fetch all the data and once we have got our url we need a response from our url so yeah let's have a new response that is http response to be a response and the following response should be equal to http client dot get and under this first of all we should be having all of our url so i will be copying the following url from here and paste it here but you know what we need to simply wait for the response so you should be writing your await just like this and here if you observe the following response shall be under a type of response which will be a body so here if i simply write response dot i will be getting all of options available which will be a body so what i will be doing is creating a new mapping between our response on json so yeah let's have a final map to be parse data because we are parsing our data now the following par data shall be simply equal to await that is under average state for json let's import the following json from dot convert and here i should be having json decode and under source i should be having my response so yeah let's have response dot body dot to string and once we have done this the following path data shall be consisting all of our response now if i go back under my postman here you can see we are getting all of our response under a key of data so for fetching the proper data we should be going back and here we should be having a new list of data so here what i will be doing is create a new list which will be under a dynamic form and these things shall be equal to to-do data just like this our name of the list and now i can simply say the following to-do data should be equal to parse data let's have the path data and from the path data i will be fetching my data from my http response and once we have done this what we can really do is print the following to do data for our own sake so let's print our to data and now we are good to go so this will be our complete get request for fetching data from our server now remember one thing we don't have any parts token or json web token for now so we are free to use the following method because we are using a free api so i will be copying the following method from here and i will be going under our home view and under our home view under our scaffold first of all let's have a new app bar to be a new app bar so under my case of app bar first of all let's have a new title to be text and under let's have a text to be to do let's have central tile to be true why not and after having our falling cute looking app bar let's have a new body so under body i will be having a new container and under our container let's have a child to be a new consumer for our provider so yeah let's have a new consumer and this should be requiring a type so yeah let's have to do provider and under our consumer it will be having a new builder so under builder let's provide our context a model of our provider and also an empty value and this thing shall be throwing up a new future builder so yeah let's have a new future builder because we are receiving all of our data under a case of future so here under our future builder first of all let's have a new feature so for getting the future i should be writing model dot phase data just like this and under my case of builder i will be having a new context all right not a constant but a context so yeah let's have a new context and also a new snapshot and the following things i'll be referring to a new list view builder so under our listing builder first of all let's have a new item count under a case of model dot turo data dot length just like this and under item builder it should be having a new context that is a build context and also an integer which will be an index just like this and under this we should be returning a new list style for showing up our entire data and under our list style first of all i should be having a new title to be a new text and under our text we should be fetching all of our data from our rest api so for that purpose what we can really write here is model dot to do data and from this studio data we should be having a new index and from this we will be fetching up an entity and if i go under my postman just right here you may observe that we have two different entities of title and description so let's switch up our title under a case of title for our list view so once we have our title let's copy the following piece offline paste it here but here we should be having a new thing of subtitle and here we should be having a description of our to-do list so once we have added the following piece of line we should be having also having our any state method so here under unit state method let's remove the following comment and here i should be having a new provider dot of the following context and here it should be having a to do provider and under this it should have election property to false and from this we should be initializing our face data meter just like this and once we have constructed everything let's go under our main method and here instead of a material app we should be returning a multi-provider first of all let's have a new child to our multi-provider and under our providers as we have only one provider it is safe to provide a provider here just like this and under create it will be taking an empty value and throwing up our to-do provider so yeah let's have to do provider easy peasy so once we have constructed everything before moving forward let's try it out so for trying it out let me open my emulator and press f5 to read or enter application one so let's press f5 a few moments later alrighty so our application is reloaded and you can see we are getting our only single to-do which is coding and some different data so now in this way you can successfully perform the operation of get request under our to-do so now what i will be doing is go under my postman and if here if i simply post some new data so yeah let's add some post data and if you remember we have our path to be add let's move under body and here let's go under raw and under raw let's go under json and here let's paste some title and description just like this press enter all right not enter but simply press send cool so now you can see we have successfully sent the following data to our entire mongodb database that is database so now if i go back alright let's go on our application and if i press ctrl ns to hotload it let's go back under our application now you can see we are getting two different data here just like this now let's do one thing add some more data into it and let's go here cool that i send under our mongodb database that is database i don't know why i'm saying mongodb database so now let's go back and hotload it once because it is the future cool so we are getting three different data but you know what instead of manually sending all of our data from our postman under our application let's create a new post request just like this so here let's have a new post request and for performing post request as usual we need we need to have a new feature method so here let's have a new add data which is our new method it is going to be asynchronous so let's make this asynchronous so under our entire thing what we can really do is copy our url from here but here it should be having a new different url of ad just like this so after having the following rest api url if we we should be having a new http response so yeah let's have http uh response should be equal to under await state and here it should be equal to http client so yeah let's have http put that is not put but post one and under this it will be having a new rest api url just like this all right let's have a new response here why not let's say response should be equal to await this thing but if you hover over post one we should be also requiring some different headers so if i hover over it you should be requiring some different headers and also a different encoding so first of all we can go at the top of our method and here we should be having a new map and a mapping between a string and a dynamic so yeah let's have mapping between string and dynamic so yeah let's have a new thing to it called as custom headers and under custom headers we need to provide some values so under custom editor first of all let's provide our new value of accept so yeah let's provide a accept value and under this you should be accepting all the json data so yeah let's accept application slash json and after it should be having a content type all right not a capital one but our content and under our content type it should be having a new application slash json but the application of slash on should be requiring a character set so yeah let's have character set to be equal to utf of it just like this format document first so here we should be copying our custom headers from this side and paste under this but here let's have a property of headers to be headers just like this but under reports request we also require a new body so yeah let's have a new body and we need to provide our body through the following arguments so yeah let's provide a map to be a body so i can copy the following body here but here i should be adding json dot n code and under our encode i should be pasting my following body just like this but what you can also do is remove the following piece of line from here and add a json call property which is default so yeah let's have json encode for our following body format document first and now we are good to go so once we have got our entire response which will be equal to the http client dot post for the following url having a custom headers and also a body we can go at the bottom and here we should be simply adding a new method for parsing all of our data so here i should be simply returning a new response so yeah let's have a response dot body just like this under return statement format document first and now let's try it out but before trying it out if we observe our to-do list we should be having a new screen that is a new button for simply posting all of our data so for that purpose let's go under our home page and here under our skillful let's have a new floating action button to be a floating action button and under our shooting action button first of all let's have a property of on pressed and also it should be requiring a new child okay just like this and also we need to provide here an icon button all right not an icon let's say icons cool so once we have done everything from here let's construct a new method for on press or our following button so here on press what i will be doing is creating a new bottom sheet for simply posting all of our data so let's go under our views and create a new file and here we should be having a new bottom sheet for adding data so yeah let's have add data widget you can get any sort of name according to you so under our data widget first of all it should be requiring a build context so yeah let's provide a build context to be a new context so once we have provided our bill contacts let's have a new return statement so under return statement all that we don't need our update sorry we just video code so yeah let's have show model bottom sheet and under our builder let's have a new context to it just like this and here under our builder it should be returning us a new container so yeah let's have a new container and under our container first of all let's have some dimensions which will be a definite direct dimensions so here let's have a child to it so under our child it should be having a new column and another column let's have all the children so we should be requiring a new text field so yeah let's have a new text field so yeah let's have a new text field as a main as one of our child so yeah let's have a text field it should be requiring a new controller so for having that controller we can go at the top and here let's have a final should be equal to a should be equal to a text editing controller just like this and also we should be having a new final description controller so yeah let's have a description controller should be equal to new text heading controller cool so we so once we have got our boot of the controllers we can go under this file and first of all let's have our title controller to be the controller of our first text field also let's have some decoration to it so after having a following controller let's have some decoration to be an input decoration just like this another input decoration first of all let's have hint text to be add title just like this so let's copy the following text field from here and paste it one more time but here it should be having a new description controller just like this and also let's have a property of add description and once we have done this let's have a new button which will be elevated button so yeah let's have elevated button and on pressing over it we should be simply adding a property of sending all of our data to our rest server but before that let's have a new child to be a text under text let's have the text of submit just like this and on pressing over it we should be able to send all of our data to our rest server that is rest api so yeah let's have a provider that is on pressing over it provider dot off and under the context of to-do provider here let's have a new listen property all right listen property to be false and here let's have the property of add data now under add data it should be requiring a new body which will be a map but before that we so under map we shall be having a new mapping between our entire controllers so first of all let's have a new title that we need to submit and the title should be equal to title controller dot text easy and also we should be having a new description and you know what the description shall be description controller dot text just like this so now what we can really do is copy the following piece offline from here let's remove it off and add a new condition under our on press button so yeah let's go under on press button and here right so here i can simply say if title controller dot text dot is empty that is not empty we should be executing the following piece of code which is that simply providing all of our data just like this so now we are good to go because we are now i have added the following condition because now as no i have added the following piece off i have added the following condition because we have our title controller that should not be empty if you remember our schema that if i go under my rest api side and here if i go under my source under models under user model here you can see here you can see we have our title to be required which is a true one here you can see we have our title to be required which is a true one and we can have description to be empty but not our title so once we have done this press enter and now we are good to go so let's copy our following add data widget and let's go under our home view and here on pressing over it let's call the following widget let's paste on here and here we should need to provide a context let's import our method from the following file format document first and now let's check our application cool so now here we have got the following button of plus so let's place it over it cool so we are getting our following little form of add title and our description now now feel free to decorate all of our to do list according to you our following project is focused over backend not on front end so we should be keeping our ui minimal as possible so once we have got our everything let's try to fill in a title and a description and also we should be having our new description so now let's try submitting it out so after pressing our submit let's check our debug console if everything is happening right or wrong also if i go at top all right so we are getting an error that unhandled exception no worries so for this purpose let's go back all right let's go back under our add to do and here we should be having a new body so for having this body let's go back and here under our map we should be having a different body but yeah let's have a new map of string why not and also here let's have a defined body of a string and a string let's try it out one more so let's close off our entire thing let's open it one more time and here if i press submit and if i go under my debug console all right first of all let's check our postman whether we are getting all of our data so yeah let's add up get request let's remove it off and press send all right so let's try loading our entire application once so let's try sending it out let's open our debug console if everything is going right or wrong press submit okay let's try a different one let's try of us eating one because we already have a to-do of eating that is singing press submit and now let's check our entire postman and simply send a get request cool so now you can see we are getting a different post request from here because we are getting our singing singing and editing because we have added two different singings just like this so now let's try it out one more time so instead of eating let's have a different one let's say programming and if i go back under my postman let's press send i should be getting a new to-do of programming just like this so once we have done this let's go back here and if i simply hot reload my enter application once and open our entire application once you can see we are now successfully added all of our data under this but you know what we are getting our singing singing and singing multiple times so we need to delete them out but you know what the following tutorial has gone quite long so we shall be carrying out our operation of deleting singing singing singing and also updating all of our data in the next tutorial i know you are kinda excited for this tutorial and i have not cut out anything because i have solved all of our errors in front of your eyes i could have done this thing that i simply cut out the entire video and make the following changes under my code but i don't like that thing i love showing you all guys the real problem that any real developer faces so with that said i will see you in the next one where we shall be implementing deleting and updating functionality under our rest api with mongodb flutter express and yeah node.js till then if you love this tutorial please hit that like button it will be awesome also i will see you in the next one with another great video goodbye

Channel: Abhishvek

Views: 5,777

Keywords: flutter post method, flutter post request, how to make a post request in flutter, send post request flutter rest api, rest api post request flutter, post data flutter http, http post request flutter, flutter rest api post method, http post method in flutter, dio post method rest api flutter, rest api dio post method, create and send data flutter rest api, flutter post method in rest api 2020, send data to rest api flutter, flutter send data to rest api, http post flutter, http

Id: patMAx6-5MU

Length: 23min 16sec (1396 seconds)

Published: Thu Apr 08 2021