Flutter + Strapi Fullstack CRUD Application | REST API | HTTP | GET POST PUT DELETE | Node | VSCode

[Music] [Applause] [Music] [Applause] [Music] hello welcome back to another episode my name is maheshkarya and you are watching me on youtube live today we are going to create kind of full stack web application using flutter and strappy so if you haven't heard about strappy is a tool for rapid api development so we don't need to write code for backend apis and at the end of this video you are going to create you are able to do this like the list of user how to fetch this data from back in how to add some data uh save this and you can edit this thing you can view this thing you can delete as well so it's all up to you how you use it uh so let's deep dive into it so i'm going to use a flutter for now okay this is strappy ui you don't need to gen this is a tool for generating api okay based on node but we are not writing any code for writing apis okay so uh first of all i'm going to use visual studio code if you haven't downloaded this already so you can grab this from here code.visualstudio.com and another thing is you have to have node available so you can grab this from here node.js.org okay uh so you just need to download node.js for using strappy okay that's it we are not going to use node.js anymore so and this visual studio code very lightweight and for development of flutter i'm going to use this thing you can use android studio whatever it may be it's all up to you guys i already have it so okay open your code and you just simply need to install a flutter from here if you don't have it i already have it so after that you have to follow the procedure that's it so after that inside view command platter search for a flutter new project click here and you will get this input field or type the name whatever it may be like front end front pane is my name okay and you have to choose location for it so i'm going to select desktop and i'll create new folder over here uh name it like flutter and strappy okay so create this thing and inside here i'm going to create this folder okay so this is the first process of creating so for now you can open terminal integrated terminal from here and you have to have at least xcode or android studio available inside your system so you can use simulator so it's recommended guys you have to install android studio i currently am using mac so i'm using my i already have a text code so now uh search for node hyphen f1 version once you get okay sorry once you get node available inside your system now we are able to change your directory to flutters typey and simply type for npx create strappy app space name of your uh backend folder like backhand okay that's it that's it guys we don't need to do anything else just fire this command to get up and running with strappy okay lots of companies are using it like nasa tesla and lots of other companies are using this tool so i highly recommend you guys if you are a android developer or as developer you have to have this available inside your system so you don't need to be dependent all the time on back-end developers too for eps okay so that's it so this is my main dot dot you can for now i have to delete this will start from scratch and we need few pages like as you know main another thing is list to view this data and for the view the specific user will use detail dot dot and uh for schema for model we will use user dot dot that it this just uh minimum required required uh things again main file i'll import my material dot dot okay so i can use my void main method and inside that i have to run app and name of app generally we use home okay and i'll create my i need to use semicolon and i'll create a stateful widget okay there are two types of widgets stateful and stateless if something is changeable then we call this thing a stateful widget that's it so home okay so uh if if you don't know how i got this just type for stateful stateful you will get this suggestion for status and stateful that's it hit enter and type for home that's it okay uh you will get this option over here uh quick start so you can select this quick start enter it will take time it will take a while so i'm not going to pause this video we will wait for it okay and now in here child you just need to add um first of all we are working on material widgets so material app inside that home okay for double f i'm sorry body then my [Music] container you can use container inside the center line my text again shard and text will be hello [Music] that's it and now to to start my ios device or simulator you just simply need to go here and click here or otherwise you can use f5 directly function plus f5 on your keyboard and you'll get this thing okay run this thing [Music] so it will take time to launch okay for now i'll make another pages like list again the process is same uh import your material.dart and create your stateful widget hit enter and name it my list don't use list okay and inside here again i need a text will be list that's it okay inside your detail again import material and stateful widget name is my form [Music] my data that's it text will be data and inside my form i don't have form okay i have to create form dot dot so i can fill something i can post data the process of posting and updating data so for that i need to create form so again stateful widget and this time my form i'll use this thing inside here i have to create text field this is my form that's it so we got this we are getting error so let's see what made mistake okay after that after that written statement i have to use semicolon that's it again function plus f5 okay extremely sorry for that these are just minor mistakes i used to do this okay so for now we have user dot dot so i can create my model or you can say schema so for that just simply type for user uh this is my class so class user and inside here i have to create my string will be name string email or string password and my int id okay which will be auto incremented okay and in here i'll use a constructor so i can pass this dot id this dot name this dot password and that email this dot email that's it so that's it for now and here may be simple and it's required so it's launching okay and now inside main uh you can create um inside scaffold i need to use appbar app bar a bar again and inside here you can use title will be type text i guess okay and in here you can write title for now my title is title that's it and after that i can use bottom navigation bar so in here i'll use my bottom navigation bar where is that bottom navigation bar and items so we can use multiple items in the form of firey so again process is same bottom navigation bar item [Music] bar item got it icon will be my icons dot add because we are going to add uh something okay and my title will be chart maybe i guess let's see what is that title yeah so title will be again type of text so we can pass add okay simply add that's it comma and the next thing is to view data values for you that's it so we can see this data so it will be type of table chart this is my icon table chat so let's see how it looks like okay this is working okay so i can close this i don't need this anymore okay it is if us okay i got error in here and strappy already another application is running it's completely fine this man now the application is running i already made this before that's why i'm getting problem okay so once again let's hear how to remove this folder and again i'll fire this command and px or create step yeah back and hit enter it will take again while don't worry about it we'll continue our development so we got this and we got this beautiful ui and now the main part of coding will use so uh now in here i have to create my int current index so we can change index and if you don't know about current index this is something uh this which is active right now so current index is 0 for now and if i want to change this because it should be dynamic right so i have to change this over here current index should be current index but for now for the first time i'll use 0 okay so it's already zero don't worry but if i change this to one it will reflect over here i guess i don't know why okay okay quick start select quick start if something goes wrong okay uh you can if you don't see the changes over here you can hit this button refresh it will reload page manually okay i got this inside view you'll see that blue icon okay after that i have to use this on tab method so on tab i have to call function on tab so i have to create this okay so in here simply create void on tab i'll create this function and i'll simply call or to change my view i'll create another function to change you that's it so i don't have it again i'll create a new view and i'll pass index over here which will be available over here as well and here as well so i can use this over here and once i get this so i can use switch case over here and pass this index if i get the position is zero it means i'll use this i don't need this default and break you have to use default okay so now now imagine if you change between tabs so you have to change the data that switch it and this title these two things are important to change something so i'm going to create a variable so here like uh widget widget type will be my body okay so for now it's empty and another thing is type of string which is my title that's it so if i'm going to uh if i select 0 it means we are using titleist form and body is form so in here i have to change my title to form right and my body to um my what my form but i have to import this right i already got it i guess okay yeah this is i already got this so if you don't see this you have to import this manually okay uh in case one i have to use this [Music] okay for case one i'll use list and in here i'll use my list my list okay so i got this the list is available over here now the next thing is we can hit refresh and let's see if it's working or not okay click here on add it's not working because i got something okay in here you have to change your current index current index equal to your index the first step and the next step is you have to set state for uh to reflect the changes right okay so the switch case is inside the set state i guess it will reflect the changes let's see for the first time it current index is 0 by default okay here we go [Music] okay uh it it this is showing hello world i don't know why but if i change this to here still this is showing me hello i don't want this hello world because of in here i have to change my title okay this is my title and in here the body i don't want this body anymore instead of that i'll use my body okay if i hit refresh then i'll get this thing later okay i got error because let's see okay okay i got this error because by default when i call for the first time it this is confused because a body by default is empty okay so i have to use init method over here simply type in it you will get this suggestion and simply use tab that's it so while initiating you just simply need to call change view again but this time you have to pass your index by default zero so that's it and let's see how it looks like so still we are getting okay got this so by default on initiated we got form and if we change this we we get list form list and form but be careful guys uh if if we are getting list over here and if i click on that particular element then it will open the another page which is called as detail page but detail page should not contain this thing which will be another separate page so i have to create detail page i have to change few things in detail page okay this is not sub part of that page so it should be again it should contain material page again as usual the main page material app and in here i have to use home again where i i'll use a scaffold again i'll create a body and inside that i'll use my container for now [Music] container child center element again so child will be again normal text will be detailed that's it this is just a simple thing but inside detail i'll use my app bar [Music] okay oh sorry inside scaffold i'll use my app bar and simply title inside that i have to use stat which will be type of text and that's it title is detail that's it i guess i don't need to use anything else that's it finish now i have to install something we are going to use http request so let's see again i got error i don't know why i'm getting this error inside my strappy server wasn't available start properly 1307 is already using i don't know why oh my god okay now something is running on one three three seven so let's see nah what again inside desktop i can [Music] okay this is my old project that's why i'm getting travel while using it okay let's try again i'm extremely sorry for that strappy kind of thing okay uh let it be it will again ask for the quick start i'll use the same thing okay another thing is if you are working on mean thing i have to create a form for for now so first of all let's get started with our form [Music] i don't know i am getting this error again creating new step application on back and you can okay again i have to remove my folders okay i always used to uh do mistakes in live streaming okay here we go so i in here you have to create a form okay form contains child means column because we need multiple uh things inside our column right so column contains the children because we we have to insert multiple things like multiple text fields so this is my text field but before proceeding we are going to use padding and lots of other stuff so for now i'll use simple text field let's see how it looks like so these are my simple three things and if i change this to my form this i see this is just a simple input fields nothing else so to use something in it you just need okay select again quick start extremely sorry for that [Music] okay in here i have to use padding so i have to wrap this thing [Music] inside of widget select this here yellow bulb over here and wrap this inside column for now again and change this to oh sorry use padding over here padding by default padding will be h and sets of all from all side we'll use 19.0 or 20 or whatever it may be and comma inside that i have to use my child and put this over here this thing your column so that's it i guess i don't like this thing uh there may be some short way to do this but for now we have this process so okay i got this uh padding from here and here so in here you will use icon i guess like i don't know okay it contains a decoration inside here i'll use uh input decoration i guess input decoration yes and in here i'll use a label text will be my normal text i guess no okay like this is name okay let's see okay this is my name this is my normal thing and again i can use icon okay icon is available so use icon over here and there are multiple icons available like a person is one of them all the material icon available okay let's see how it looks like okay person is here and now i need a controller we'll use controller later don't worry about it for that i have to import my user so i can use my controller okay that's it now in here create your user like this okay so first is by default zero name is empty empty email and this is my password [Music] okay why this is empty because while post with the same form we are going to post it and update data so we need to use empty for the first time well and we'll if zero for that from this zero we will identify if the form is zero we will use another text field over here which is hidden by default if this is zero it means we are going to post it otherwise we will update that the data so uh let's use it [Music] and copy this thing for let's use this controller which is edit editable controller text edit controller this thing and in here use text i guess text will be my uh what is that user dot name that's it i guess okay okay that's it so now you can copy this thing [Music] for two times for email and password i'm not going to use valid okay my step is running over here so first of all we will complete the process of strapping just register with normal process okay it will automatically open don't worry about it okay use strong password okay here we go okay now in here click here content times filter and select new collection type to create a new api and name it and simply api that's it continue and select this text field whatever the fields there there are lots of it's available i'm going to use text for everything text for my name enter again select text for my email enter again text paul my password enter that's it close this thing you will get this thing you just have to save this thing that's it finish we are ready to use our api okay with all the endpoints i'm going to show you guys it will take time to restart it's completely fine now this is restarting the server to get uh reflect the changes and just you need to change his permissions inside here okay edit this thing so it so api will be available publicly to uh change update delete data so select all save this thing that's it we are ready to use again so i have to show you guys which apis that we are using like this for creating we'll use localhost colon uh one three three seven slash api so you will get all the apis that are available like this if i hit this apis enter i'll get this empty array over here you can see this right so if i if i want to delete this you will get this slash api slash uh id and with delete method with update i just need this normal api endpoints don't worry about it okay so now in here i got my name email password okay change this to password is my vpn key vpn key is the icon available for password and here i'll use my password again this is my email that's it okay here we go this is my email now i need buttons okay i have to change this to here okay this is perfectly fine i need button so there are two types of buttons generally everyone is used to work on race buttons but i'll use a material button i guess material material button this one okay on place uh nothing we'll use something like this let it be but i have to make some changes like uh minimum weight should be double dot infinity okay to expand uh the button for full width and another thing i have to use a color so there are lots of colors available inside material design so you can we will use simply blue that's it and for text color i'll use my colors.white that's it let's see how it looks like nothing because we don't have [Music] child i guess which will be type of text save that's it finish so but we need to use padding okay it's not looking good so as we know how to use padding again wrap this thing inside a padding thing okay here [Music] agent sets dot all side i'll use again 19 i guess this is better if you don't like this there are other options let's see which is cool okay and here we go [Music] i don't have beautifier so i have to manually do this okay save this is not looking good again so we can use [Music] dot from ltrb left right so from left i need to use 20 from top i need to use 20 and from right 0 or 20 again from bottom 0 i don't know let's see so from zero again okay and from 25 this is all up to you how you use it okay oh my god i need to use 30 now 34 and this this is better i guess okay 35 is better that's it so here we go now i have to create something else that i have to import something from here i have to install something dependency of http because uh we are using https so current version is 0.12.2 just save this thing it will automatically appear over here and it will uh install the dependency that's it you don't need to worry about anything else so inside here inside list to you i'll import this thing this is just simply type http and you will get this thing over here and import something called a start async and i need to use start or convert to convert our json thing okay now in here i have to use a list okay so i have to use my future builder over here so while future builder is something that allows you to fetch data okay in future whatever you are doing with the http is uh based on the future entity okay so this is my builder so we have to call functions like getall gate all okay this is my function and once you get this then after that builder and okay [Music] okay this is my future not build this is my future in future i'll call this thing and in builder i'll use my list view dot builder again okay but it is something else build context now comma [Music] [Music] his thing that's it i guess and in return i'll use the list to you so i need to define item count whatever it may be 0 or 1 or 2 or whatever it may be in here again i have to use this written this might be confusing but you will use to it uh this is list style okay that individual tile inside list so [Music] it contains title which is type of text again and define whatever your snapshot dot your uh this is again context okay build context context and another thing is int id i guess that's it okay so snapshot dot data contains id means your current index you have to use index this is better i guess okay so this is my current index and dot your name or whatever maybe you are using it over here so that's it i guess use semicolon and again in here after builder you have to use same color okay now in here i need to use a subtitle as well like type of text again my snapshot dot data index dot email again that's it for now i guess but i don't have this gate all okay so for that i have to create a future class future function which is gate all which will fetch all the data which will type of sync so i have to use await for http dot get okay in here i'll use my http colon localhost seven colon1337 apis slash that's it so okay so i got this http error because i have to use as http over here that's it so now when we get this data where data so i have to convert this data okay so i have to convert this data into our json data so we can use this thing so for that there is a method called as json decode so i have to decode that data dot body what are the data is available over here so now the simplest process is to look through each data okay and each that json data and create new user okay news and in here use id [Music] this is my name this is my email and this is my password [Music] okay and you can save this data inside user again so that's it i guess otherwise you can use simply uh this thing like dot ad and paste it over here but we don't have users right now okay so you just need to import user manually slash users okay and create a variable over here right here which will be type of list of your users which is called as user sql equal to empty array so okay in return uh we don't need to use that curly braces for single statement but it's fine return that users okay so this is the process of fetching data from apis your strappy and this is the process of building this thing so let's see how it works as for that i have to use in here snapshot dot data dot length but here is the problem if you know that something is coming from that snapshot if or something is not available then i have to check this over here means if snapshot dot data is equal to equal to null it means we have to print that something is loading please wait for it right so written container contains a child in center you will use make sure to use semicolon okay so again child will be type of text is loading right dot dot make sure to use dot dot that looks better uh and grab this thing this thing i guess i don't know where is this okay this thing inside curly braces that's it you got this right okay perfectly fine let's see how it looks like we'll get error i guess okay we got error okay no such method the method is was called on null it's completely fine [Music] list of user users users.add okay let's refresh this thing okay here we go okay okay in here i got error okay i have to remove this that's it let's refresh this okay got this in list i don't have data okay empty data that's why i'm not getting anything if uh inside steppy if you add manually something over here for now i'll use manually mahesh okay gmail.com and my my password that's it so save this thing okay now again refresh the page okay got this so this is working but i can't able to touch this thing so on tab i have to use something like in here in list style i have to use on tab okay on tab you have to do something like to redirect to navigate [Music] navigator dot push just pop to push i have to close this thing context and new material page route i have to route this page to this is a process of routing the simplest process of routing so in here i'll call whatever the page you want to go to so this is my detail my detail page okay i have to import this and pass context over here uh i have to import this detail page over here uh where is my data okay editor oh okay editor is gone let's see how it looks like okay this uh this is not working because i have to use snapshot.data.link i have used it okay i don't know why this is coming it's fine it's fine okay now click this thing you will get this detail page over here but the main problem is if i'm getting this data page i have to pass something in here like your whatever the snapshot dot index is available over here okay so now in here click over here and in detail page you just need to accept that user okay so i have to import this thing dot slash user so i'm x accepting that user over here like this this dot user and now i have to pass this thing over here this dot user again the same process for this there should be some simpler process but i don't know i don't have this that's why i'm using this process so i'm passing uh the user from there to here and here to here okay so i can use this user somehow here so first of all we'll try to get this thing over here like user dot name will be your title for now on inside here we'll use a user dot uh email again i'll use name for now okay let's refresh the page and we'll get errors i guess okay here we go click here okay i got this mesh over here it means everything is working okay so again i need to create a column as usual because there are multiple things over here okay so create column and inside column we will use the what is that we have to use padding first right because we always uh get errors [Music] padding our padding should should be [Music] dot from all side we use 19.0 and the child will be our column okay contains children no no i'm not getting this [Music] okay children's contains multiple text fields okay so text will be user dot name and it contains style as well okay this is my text it contains something style okay so text style i guess okay here we go and in here you can define a font size font size will be 20. let's see how it looks like okay 20 nothing good enough okay and next thing is that's it i guess for now copy this thing for rest of them for email and for my password it should be like id email id name emails [Music] right so i don't know why i'm getting this error because this is type of inked okay i have to convert this into string so this is perfect now so let's see okay there is a problem i have to use i don't want this center alignment so i have to change this thing from inside column use cross axis alignment and inside [Music] cross sec access alignment dot start save this thing okay it will appear over here and you can concatenate this thing with id okay id name and email [Music] name and email okay that's it here we go i need a padding so i have to use padding manually you can pause this video if you want to because uh this little bit big [Music] itching set start from all again 19 is my standard value so i'm using it and child contains this so i have to copy this for rest of them okay paste it over here again [Music] okay that's it let's see how it looks like perfect now we need a button but make sure we need button uh it should be in row okay so in row we'll use a material button again [Music] it should be children [Music] material button okay on pressed uh we'll do something whatever it may be add it or delete but for now it's not and another thing is color color should be colors dot blue as usual which is our theme and the text color will be colors dot white okay and the child element should be type of text of edit in here i'll use a spacer i'll tell you guys why i'm using spacer it makes sense to use spacer okay and here we go till it okay let's see how it looks like okay this looking like this but i want this my color to blue i don't know why i'm not getting this color let's see okay click here okay uh it is disabled for now i have to create my edit and delete function there's my edit and this for my delete so in here i have to create a void method edit okay [Music] white tell it let's see now okay i got this blue okay that's it and now we'll use edit [Music] will be type of async no this is not type of async we are going to pass the data but delete is the type of async okay so ah that's it now inside form let's see what we are doing over here inside form if our if we are pressing the button of okay let's refresh this thing first okay if i save this data i have to post this okay so let's import our http library http let's import our async and convert i don't need to convert anything but even though that's it now if i use my future save async [Music] await function for http dot post data okay i have to use http colon localhost one three three seven slash fps slash that's it but i have to use as http over here okay so i'm posting data but first of all i have to check this if if my what is that that the thing is user dot id okay user dot id is equal to equal to zero then only i'll post my data okay otherwise i'll put data so otherwise i'll use a put data but before that we have to do something use string header headers and body [Music] headers i have to pass this thing it does and another thing is my body okay again which will be type of string string okay this is my name [Music] name is user dot name uh then my email is user dot email then my password will be user dot password so here we go now the next thing is we have to set headers simple this is by process content type will be which is equal to [Music] application slash json okay and comma cassette i guess cassette is equal to utf 8 that's it so i i mean mr ghana application slash jason i don't know but there there is a mistake like this this uh i'll be back uh this is context type okay and here this is like this context context type ah that's it that's it that's it okay okay here we go so uh now what's happening uh you can copy this thing for the put data as well okay the process is same instead of that you have to change this to put and in here you have to concatenate the id of user like user dot id but this is in int so you have to convert this thing into string so that's it but after uh that you have to navigate to the list okay so again navigator dot push something okay so context and route will be my new new material page here is the trick okay uh this these are not two different things these are the same page okay this is the same material page view and add so i have to pass integer inside my main page this is my home page so if i pass 0 it means i'm trying to open the form otherwise i'll try to open the table so i i'll use new material p shroud over here and in here you have to pass context uh and the name is my app okay which is home i guess [Music] okay so that's it so import import home home main main contains home okay so i'm getting this but i have to pass zero for form and one so currently i'm on zero means i'm on form so i'll pass one so click here control plus or command plus click it will go to that particular class and in here i have to accept that state we can say so let's create a state okay state and in here pass this dot state okay except this this dot state and in here i have to create state this is a real life example okay guys [Music] okay and now here [Music] home street use this this dot state okay the process is same and i have to pass this for the first time it will open 0 okay so here we go now the remaining process is same i guess okay in its state in its state uh let's see if i get this error i have to pass straight uh over here some here state okay i'll get error and the next thing is i'm missing something i know but let it be refresh the page if i'm clicking over here if i click here if i click on edit okay okay sorry again refresh the page [Music] if i am trying to post the data okay save this thing so it has to change the state okay on clicking that particular thing so wait okay guys i got this so inside form i just have to change this on plus method to save okay because we have made this save function over here so i have to call this and the next thing is each time when i type something inside text element i just have to get that particular changes over here and you just need to call this function like whatever the value is [Music] coming inside that field you have to set this to dot name will be equal to val okay so that's it okay and for rest of them i'll use the same process but remember that we have to use the same page for editing as well to update data so for that i have to know the [Music] uh what id okay password will be [Music] password huh i always do such mistakes uh so password is the password that's it so let's see how it look oh my god oh my god oh my god where it came from [Music] okay here we go now demo demo at one two three dot com demo at one two three see okay it's working completely fine okay it's working but when i click on edit it should again go to the same form but this time i'll use and that's it i guess it's fine but yeah if you want to use a text field over here for id as well you can use this thing like this okay no need to use this but uh the visibility of visibility of this child element which will be type of text text and controller will be same as rest of them id okay and visibility is hidden okay visible is false so controller text field text to it okay and id should be converted into two string [Music] that's it so it's perfectly fine now i'm getting error over here i don't know why [Music] it's just a silly error okay got this now i have to know that if i'm inside my detail page and if i hit on edit so i have to navigate page right so again navigate dot push context so new material paged out and this time i'll use context and it will call my what is that home so i have to go to zero page zero but i have id okay so if i have id first of all i have to import main page over here so i can access my home okay so now this time i have to increment variables like another is my id okay i'll pass 0 by default but in this case i'll pass my user dot id that's it so click here control plus click and in here create another variable known as id now in here i'll use this dot id for rest of them as well here as well and tidy and here as well entity again wherever you see that home so you can pass this uh over there okay so let's see where i'm getting this error right here home by default zero zero plus zero zero and where we are getting this error we are getting two okay okay okay in here this dot id so we got this we will get error okay we are getting enter navigator dot push where we are getting this in the page of form in the page of form we have to change this over here where is that okay one comma zero okay here we go let's update the page and let's see okay we got this okay so next time when we click on edit it should go to it's going on the page but we have to get the data as well so inside my form okay on initiated okay whenever we initiate the page so on in it simply type in it on unit state after that if we get id you just need to print id first so print your id let's see if it's working or not i'm not getting this idea here inside my form i don't know why [Music] okay here we go now inside my main whenever i get this id okay so i have to pass this over here inside my form by default this is zero okay so inside form again i have to create id [Music] so inch id okay so i can pass this over here again this dot id and from here again id and now in here where is that where is that the you just need to pass id again so you if you get this id or here you just need to print this thing okay so [Music] inside me you just need to pass id i guess yeah id let's use this dot id which is better okay so we are not getting anything let's refresh the page [Music] okay we got zero but when we click here and here again on edit i have to get three so it's working completely fine so now inside i know guys it's tricky because uh we are passing id from here to there so that's it so now in here if id sorry what was that this dot id if this dot id is not equal to zero it means i have to fetch data okay so i i'll call something to get one okay we have to get one and [Music] because uh we don't use init state as a s it not looks good so gate one that particular thing which will be type of async [Music] async okay and use a which make sure to import everything okay this http dot key that's single user single url http [Music] slash eps slash dollar and what was that this this dot id is better it's not id that's it is better so i got this data as usual okay so where data i got this data so again where now json data will be my json dot decode right so you need to use that con you need to import this convert [Music] convert dot convert so json.decode okay and your data dot body this is standard process you can use something else it's all up to you how you use it and in return i just simply need to use user equal to user which where i have to use you which is better you're familiar with it your dot id your dot name email password name email and password okay so that's it i guess so let's see how it looks like i it should be init state i guess let's see if it's working or not [Music] if i go here here and here i have to reflect the changes so let's try to use set state so it will be better okay let's refresh the page and let's try it again okay i got this here here here okay i got this but this time if i see this thing it should be go here okay it's working perfectly fine again demo one demo one at gmail.com and demo one two three let's save it and let's try to delete this thing it's not deleting the data okay it's completely fine so now for deleting data i have to use inside detail in delete i simply use await method and http dot delete something i have to import that http again import http as http make sure to use http and in here while deleting data i have to pass url [Music] save and slash apis slash i think we have id right this dot user dot id okay we have id right we have idea so this is the process of deleting that's it and after that uh once we get rid of that thing you can again transfer this thing to zero zero uh instead of that i'll pass one okay one is a list okay so let's try this out don't worry about this try to refresh this page everything will be all right and click here try to delete this thing okay so it's working completely fine so thank you very much all of you guys for being with me supporting me all the time uh it's been pleasure to be here make sure to follow me on github as well uh this is available on github you can subscribe my youtube channel if you like my video if you want some more videos please let me know inside comment box i'm really very excited guys uh you want anything you just tell me what you want i'll make videos for you guys so thank you very much thank you all of you guys for being with me love you all

Channel: Mahesh Kariya

Views: 4,666

Keywords: flutter fullstack app, flutter strap app, flutter crud, flutter rest api, flutter complete app, flutter node fullstack app

Id: gmEPNyjlrOY

Length: 79min 55sec (4795 seconds)

Published: Tue Oct 27 2020