Flutter Backend | Flutter Laravel Backend PHP | Flutter Rest API | Flutter Http Post Request

[Music] hello everyone if you downloaded the files from the github link and installed flatter you should have this project structure as you can see these files are all pretty much opened here some of them are empty though so you should have a file structure like this and if you go ahead and run it you'll see things like this welcome page definitely of course you can click this button here get started and it will take you to a new page where you can sign in but for now we can't sign in because we don't have the credentials okay and this sign-in would be connected to the connected to our backend and server so the information would be saved to the database directly but the first thing we want to do is show here like a slide and information and a text like what you have seen earlier in this video in the demo section okay so we want to uh display some text information here but this information should be coming from our uh back end where we uh type in the information and app receives this information and so it here okay all right so that's what we want to do so now let's go ahead and see our back end so if you installed the back end from github link then you should have this back end page where you have different menus okay i already have done this for you guys so you can just go ahead and install it but if you're having problem installing you can leave a comment below i will try to reply you but at the same time don't forget to execute this uh commands on your terminal okay and at the same time your env file should have a configuration basic configuration like your database name username and password that's what you have to do and it should be in your env file and if you don't have one enb file you can just create one all right and after that you should run these commands on the terminal one by one okay and your back end should be up and running i also keep the link for this commands in the description section so that you can find and run this command okay and once you're done with the command you will have a back end like this okay where you can have uh different menus okay like we can click on this user section of course we don't have any users we can click on the article sections we don't have articles our article types dashboard and many different things like this okay all right now well i have also created a video how to create this back end a very simple video so you can go ahead and check it out if you want to use laravel as your admin panel and i find this panel is pretty convenient and easy to use okay anyway so the first thing we want to do we want to create a article type okay so we need to go ahead and create a new new article type and we'll call it welcome okay the article type and that's all we need to do we don't need to put any description and then we'll submit it okay so i just say succeed so it worked now we'll go ahead and create our first article okay so to create an article just click here new all right and we'll uh select the type of our article the category type or article type okay so it's a welcome and well title say welcome it doesn't matter though authors of dealing this information are not necessary for welcome page all right so basic description so let's go ahead and this one say we love watcher and laravel okay you must learn it to do rapid web and app development like this okay this is the basic information we want to put in and this is the information actually we'd be showing on our app section over here okay so next what we need to do we need to submit this okay well it already saved over here as you see the basic information design of the settings uh it doesn't matter though yes um well now so that's the backend thing is done all right now we can go ahead and run our app now let's see what happens all right nothing happens well the the thing we need to do we need to find our welcome page which is uh this one so this is the welcome page okay so go ahead and find your welcome page and if you have this welcome page it should look like this and as you see welcome pages is background image so this is the background image okay all right and now we need to get the data so to get the data we need to have an api and this is the api and if you install this uh flatter files correctly you should have this api file over here okay everything is there all right uh so let's see where we have this file called get public data okay all right so this is here we have this function called init file any data and it calls a from our class api it's called get public data and then we send the router or the api to get information all right and then it calls a function over here get public data but currently this function is empty and that's what we need to write all right so that's what we get here we created an http response object and we pass the url and api url now we have this url here and this is the base url for our server so in our case in my case this is the base url and api well for your case it could be any domain name or your localhost slash api because in laravel every api is saved in api folder so you can go ahead and check it out over here all right so in laravel if you install the back end you'll see there is a folder called route and in the route we have this api file dot php and over here we have saved our router to get the api request so what happens over here uh so it takes this base url first and then api and after that whatever the function we call it finds that okay and that function should receive a url short url from the page where we call it in this case this is called welcome info so welcome info is passed down from here to here and then together it becomes your base url plus the short url and then it creates a request from the server okay yeah and when it creates a request from the server first it comes to this file okay and then it finds this uh router which is welcome info and once that's happened then it finds a controller which is called articles controller and the controller is over here this one okay and with that article controller we have a function which which is called welcome info so this is the welcome info all right and welcome info also calls another function which is called get welcome info which is coming from our article model which is this one get welcome info this is the function that is get cold all right yeah so eventually when this get called it connects with our database and which is this one let's see what we have so far in our database all right so in our database we have uh type which is article type and the id is five and for that article we have uh over here this description section okay so that's what we have here so we created an article type and for that article type we have created one entry in the database and this is saved over here so now what we need to do and we already did okay we have connected this one and which calls our api over here and then eventually it gets called from the back end now as you see here we have this type id and this type id is related to our database id in our case let's see what in our case the type id is five as you can see and that's what we are going to change in our uh articles controller let's go ahead and change it all right now once we save it let's come to our android studio and uh let's run this again all right so looks like nothing is happening okay uh the reason because it's not happening well we we have this response now it goes back to the server takes the info and after that we should display it and before we display it we should decode it okay and after decoding we save it to an article list okay and which should be in your file as well article list is article info type and article info is a model for our data as you'll see from here let's see this is the file okay so this is a model for our data okay so which this is what describes our data and the field they should have and they have like that okay all right now let's go ahead and check it out so now we have this uh variable which contains the information that is uh given back from the server and then we decoded them okay and sam saved it over here all right okay now let's go ahead and run it and let's see what do we see here okay perfect so this is the first information that we have from our back end all right so to verify that it's coming from back end we can go ahead and change the backend information so you can come here and click edit all right you should be able to add it and we can add new more information okay the flutter is the way to go all right so i've done it and now let's submit it okay now go to our app and refresh it okay um or let's restart so it should get a new call from our server as you see so now flutter is the way to go so that's what i have updated at the back end all right now this file this section should be scrollable which is not because we don't have more information so we want to create more information before we go ahead and create more information and we will be able to scroll so we need to do a few tweak over here over here uh this section okay so right now it's three that's why it is showing three over here so we want default as one okay so now only one but as we get more and more information from the back end and which is save in our article list okay so from this list we can count the number of post we have welcome post or welcome info and then save it all right so how to do that so we can call total dots you call articles dot length that's all we need to do okay so whatever the information uh let's see we might have okay so uh we need to change the type instead of final we can call it var because we are going to change it finally means which doesn't change ever anyway so now it takes the articles and find the length and increase the dot indicator so as we have more articles so we'll have we'll see more and more dots all right so now uh of course we can rerun the application and there's still only one done because we have only one post okay so now we can go to the back end over here and create multiple information all right so now once again type id is welcome say uh second one well for welcome page it's not important though the name and other information they are not really important because we are not showing anything else all right so let's go ahead and just uh copy some of them all right and let's see how it looks like so let's go ahead and paste it there okay now we'll save it all right and it's already saved so now we go to find our app over here restore the app all right so now we have two uh welcome info or messages as you can see we've done this one and this one this is the first one and this is the second one we did so we want one more post over here all right having three okay and again type is welcome um welcome it doesn't matter title could be anything this information you can keep empty because only thing we are showing in our app this content article content all right okay perfect so now let's go to our app and let's rerun it okay so this is the one we posted at last and this is the second one and this is the third one so as you increase more and more post well composed here you will see more of that so what happened here let me walk you through uh so this is any data function and which gets called when this file welcome page any initiated or initialized and then it creates a function call which is called get public data and which is in our api function okay and this sends a route and routes name is welcome info and it takes over here route name and then with the base url together this url is sent to our server and our server the back end over here the server backend uh our api sits over here okay so welcome info is the router and then it calls welcome info another function this function lives in our inner controller which is called articles controller and then it calls another function which is called get welcome info but this function is coming from our article model okay and which is this one and over here it checks what type of id we want to show and receive from the database and send it back so that's what it does so so far we have done three you can do more all right so it takes the first three and so that's all about this uh welcoming for page all right okay and then once the welcome input page you are satisfied with then you can get started and do a sign up page okay so now what happens with sign up let's say email address a dot a dot com and say password one two three let's save it so invalid email or password that happens because we don't have our information saved in the database we're going to go ahead and check our database in our database the user information is this section okay as you can see from this table it's totally empty no user information all right so that's why it can't get any information from from the database and show this message that nothing is there or invalid password or maybe the user doesn't exist all right so this is our welcome page okay uh sorry sign in page let's go ahead and take a look at the sign in page and which should be in your folder like over here all right okay so this is the sign-in page and you can go through it it should be pretty straightforward and easy all right yeah the only thing we have here that connects with our back end and api which is logic login this function well this function also again gets cold when we uh press on this button over here all right and it tries to collect this information from our text field and save them in these two variables okay also in this two key because this is an object type in this two key and then using that key which is saved in data variable and we send our appear request to our uh api i would say and it uses a function called post data we call it post data because we are trying to take this information and post it to the server so that's why we call it post data all right and now again as just now we saw earlier this post data this function lives in our api file and this api file has a function called post data which is this one so data and with our api url so what is our api url our api url is let's see login okay so it takes this route and which is given to this parameter over here and the data this data is coming from here okay and then we create an http request and send it to the server and at the same time we create a token before we send it this token is created down over here all right so this token is created to save user information in our device all right okay next so this data we post it to the server okay so this complete url and now let's take a look at the server or the back-end code which is our articles api over here well as you can see from this api file uh we have this login router over here which is a post request and it calls a function called login so let's go ahead and find it this is in user controller and this is the login request but at the same time you see that in general logging is coming from our register function and register function calls this login of course you can call login if the register has been done i mean the user has registered already if not users should go ahead and register first and register it called login function okay so that's why now we'll see how to create the register page or sign up page now we'll go ahead and create the sign up page to create the sign up page first we'll copy the code from sign in page copy the return section with stuff scaffold and then put it into our sign up page and just copy paste all right and after copy pasting we might have some error let's go ahead and fix them quickly instead of text controller we'll call it pass controller and we also donate this hint and hint over here we don't need them at the same time for name we don't want uh for email we don't want to obscure text this is used for password you know where you show the star when someone types in password so we put it false over here all right and at the same time we want to copy paste this okay so instead of email the first one would be name and over here instead of email controller we can have name controller all right and for password we'll have double fills so we can just copy paste it and over here we'll call it re-pass controller okay and i guess we also need to change things up at the bottom uh over here i think yes we are good uh yeah we are good we don't need to make changes there and let's see instead of login we'll call it register all the registered code is in the file in this signup file which you should have once you downloaded with the uh the link from the github so let's take a look at this register function okay so it takes user input and put them in data okay and after putting them in data it calls an api request which is post data post data takes a router which is register router we can take a look at our post data function which is this one and it creates an http request and sent the request to the server and the server over here in our api file it finds the same router that has been sent from flutter which is register okay and then it calls the function register function in user controller controller and this is the controller and the controller itself has this function register which we created and it passed down the password and other credentials especially we take care of the password we cre encrypt the password and then create a record using this one in the database and after that we pass the request information to the login function and login function again tries to authenticate this information which tries to take the email and password from the database and then uh if it can find and match the credential then it returns a response back to the browser oh sorry not the browser to our uh flutter app okay so this response is returned over here in this body section so in sign up page in body section we check if we have success information this one success is this success means over here we have to be true right if we have this one then we go to article page and that's all it is happening over here so now let's go ahead and save this and let's see what happens okay all right so one more time let's go ahead and restart everything from the scratch okay all right now this is our sign-in page but we don't have any information over here we can try to log in like this whatever information you can use sign in well we don't have this information so we can go to sign up page okay well in sign up page it has this overflow so we can fix the overflow very easily uh let's uh come down to our uh body section of scaffold and we have too much space so let's reduce the space doing instead of 0.1 we can do 0.05 and over here it's the same now let's save it perfect okay now instead of writing sign in here we need to have sign up okay and then over here instead of doing sign up we should do sign in okay let's refresh it okay perfect okay now we can try to create a user so dylan and say my email is a at a.com say password123 one two three let's go ahead and sign up all right so it takes us a page like this okay so that's where we go now next we'll take a look how we create this page and the information layout and the api request to the server well earlier we saw once you sign up it takes you to a page like this and this page is actually coming from our uh register function remember the register function this one okay if the api call is successful it takes the information from the server and then it forward us to a new page which is called article page and this page i already have done the coding which is over here and you you the code you have downloaded from the github it doesn't have this all this information so you need to follow along with me i'll walk you through step by step well and in this file i have imported some of the other files but you need to import them step by step as we go ahead first we have created two variables for putting our data from the server request and two different data so we have two different lists and then we have this uh get articles and we didn't get articles we have this few lines we are not using them now but in future in the tutorial we will use them anyway next we call another function which is called any data and within any data we call we we use two api requests one using the router called recommended articles the other one is all articles and they go through the same function which is called get public data all right so let's go ahead and take a look so once again get public data is down over here okay so what do we do we pass down this two routes of course it happens one by one okay these two routes to our api file and api file then creates http request later on this request comes over here in our api function uh which i already done this routes over here as you can see recommended articles and all articles they're all in articles controller so let's go ahead and take a look first see the function get recommended so get recommended this is the function this is pretty much uh the earlier one which is called welcome info okay but only difference is that instead of calling get welcome info we are calling get recommended and get recommended is a function in our model so let's take a look what it does so get recommended is this one and as you see we we use the recommended flag which is one okay we use this one and we also use order by descendants and this recommendation one is done when you create a new article okay and you submit it from the back end so let's go ahead and check the back end say for example i want to create a new article okay and say the type is new books or any type it doesn't matter okay uh i would say america all right title say bush all right he was a president right and then we will have some random information well for now what we could do let's see just say copy paste some of the information from here okay and paste them down all right and over here once you click on this on the back end recommend equal one is submitted to the database all right okay of course we can change it this one we also need to upload an image which we didn't do early okay let's say we want to upload this image all right okay and then we resubmit it just knowing for that to upload the image so submit it but anyway so as you see if an article is recommended it is over here the tag is like uh blue okay or green i would say all right so one more thing though if you want to try to upload an image and if it doesn't work most of the time it is the permission problem so what you have to do come over here in your uh laravel project and find public uploads which you should have if you don't have this file you need to create and then create another folder which is called images and then create file attributes go over there and try to give information sorry give permission like 775 or 777 like this okay and do it in a recursive way which i've already done it so i'm not going to do it again all right so if you have image uploading problem this is mostly the permission problem and which you need to change from here all right so that's what we have done just now and uh now let's go back to our api so because we have done the recommended the recommended flag is one which is saved in the database all right and we take the first three all right uh so that's what we're doing and another request we had from article page which is called all articles so all articles again the api is this one and it calls a function all articles all articles is over here again these two are pretty much same the only difference is over here okay so let's take a look at this function in the model so all articles is this so all it does it takes all the articles that's in the database okay and then it's the request response back to the flutter all right okay that's what is happening here so anyway so after these two calls we have a request from the request to the server and response from the server and once the response is given we take the body section from the response and we go through it as a map and save them in a variable called articles and for all articles we save them in a variable called all articles and for recommended we save them in for recommended we save them in all articles this variable so two different variables so right now after this initialization which happens right when we call this page right after when we call this page from sign up page so all the data is initialized over here okay all right so that's all about the data initialization well just now we take a look at the api request which were this in any data function and now we'll take a look about the layout of this page and the code you downloaded from github it doesn't have this section so let me walk you through first container well this container is responsible for showing this to icons over here and they are pretty simple as you can see from the code just two icons we have used and we used them in a row and we used a space between so that we can push them to the end of the screen and in the color that's all and after that we have size box to create distance between this one and this icon and the next one is another container and this container used for showing this one uh and at the same time we have used expanded and child container so that it takes the rest of the empty space and push it to the left and and we also applied a left padding so so that we can align and after that we have this size box again between these two okay and then we have this container and this container is a search bar and this search bar is a plugin which i have downloaded and it should be in your y m a l dot spec file you should check it out but it should be there and what else next we have this container and this container is responsible for showing these two items over here the first one is a text and this text is using our text widget and text widget is this one just for some simple decoration of text it should be in your file as well when you download it from github and after that for showing these two items we used a row okay and within this row we have used a button button is responsible for showing this one and we also have applied basic style as you can see size and color okay and let's see the next one so the next is size box for creating some distance okay and after that we have another container and this container is basically responsible for showing everything happens over here okay well this one uh we used a page builder because we want to be able to scroll but as we don't have many images and content so we can't scroll it right now we'll see it later that we can scroll it and we also use uh viewport fraction 0.9 so that means it should not occupy to the whole screen you see it it leaves a screen over here and there is a default uh padding or margin you can understand that it creates from page controller and at the same time we count that how many articles or books we have and then because we want to be able to click on it so we use this uh gesture detector over here and once we click on this we'll go to a new page well we'll deal with this new page a little later it doesn't matter if you are following along you can keep it empty it doesn't matter though and after that we also have this circular progress indicator this is in flutter directly so you can just call it it shows this circular indicator if your article length is zero or no articles or no books there and after that we have used this position widget the reason we use a position widget because uh we want to put this few things on the top of each other so as you can feel like actually there are two cards over here this is one card and the picture is the other card so we are putting them on to each other so that's why we use a position widget and because at the same time we want for this card over here we want to create a shadow so that's why you use material container and we have given them box decoration and box shadow so this first position widget this one is responsible for drawing this card this white card right okay so now we'll take a look at next position widget and this position widget is responsible for drawing this image on the top of this card as you can see we mentioned the top area and left area and as again this is a card and this card contains an image so this is our image and this image is actually wrapped with box decoration to create a little shadow as you can see the image itself has a little shadow and this is a network image so you use network api and at the same time we show the image from our server request and the request has saved information as a response in articles which we saw earlier all right okay and next this is the another position widget but this position widget is for showing this text on a certain position because you have to see that this is taking some space and then this part is taking other spaces so it's more like they're all colliding onto this card so i have used a three position widget the first one is for drawing the big card second one is the image and third one is for them all right there could be many different ways you you could do it this is i have done i've tried i just i i'd like to try many different ways okay and this is responsible for showing our text information the book's name author's name and basic description of the book so this is the last widget position widget we used so over here actually we have three position widgets so let me collapse them over here so this is the last one and this was the second one which is responsible for image and this is uh for the big card on the background okay all right okay and once again because we want to be able to click on them so that's why we have this material page route would be able to click them later so just leave it there if you're following along you just pass here null or just remove this part of the code that's okay too if you don't want to click right now all right so that was for this whole container uh using this container thing all right next we have the other container and next container is pretty much like this one it shows information uh text information and buttons like this over here it should be pretty easy simple and self-explanatory we have on press event but we are not doing anything with this okay and the last one is this one and this one actually for uh scrollable because sometimes your image might be much bigger the height so that's why we use expanded widget and within it we have a child that has single child scrollable view because you just want to scroll one child not the whole page so in that case you wrap things around single child scroll level view and of course within it we have container and this container we have used as list view builder okay at least with list view builder and you can scroll left and right like this okay this is also this could be also done through page view builder but they're slightly different page view builder doesn't really take well if you have page view builder it's difficult to apply many padding and margin but with the list view builder you can apply padding and margin very easily so that's my experience though and of course over here we are passing a different list which we received from the server and it should have information it doesn't have its null if it's null then we set it to zero if we have then we continue in a loop so this loop again uh it's within uh in the loop we are using gesture detector because we want to be able to click on them all right yes i think we have this section yes so actually for showing the image itself and the box and things like that and card as you can see okay yeah so once again we have this circular progress indicator you can skip it if you want and after that we have this container okay this container is responsible for wrapping everything there and this container is scrollable because remember we are scrolling because we have this one single child scroll view okay after that we set the height and width for our container all right okay and after that we have the card the first card is for showing our image this image and it also has a little bit border and shadow cards in general they have shadow because they have elevation and this part is our image path and image path is given from our api call request which had which is saved in this list which we saw early and of course if you're working with your own url so you need to replace this with your own project url so you don't need to follow mine and then after that we have this text widget for showing the title and author's name yeah so that's pretty much it okay so just a basic style that i have applied over here all right now we'll see how to load a new article and show it to the recommended section so we'll say how to do that go ahead and create a new article and create you can pick well now actually what we could do we could create a new type the article type let's go ahead and do it call it say mind mind and description could be mind blowing or anything whatever you want doesn't matter so you created a new category and now based on this category will create a new article so let's go ahead and do that choose the article type is mind and the title say mind bog mind boggling i think authors say george this question all about mind and put a little bit of information there and let's uh so it's all about mine mine so let's pick up this image all right and now we want to put in our recommended section over here so that's why i put it on okay now let's submit it and save succeeded now what it will do we'll restart our app okay let's see if we see the result we wanted okay so while these are the information coming from back end get started and now it's asking me to log in while earlier we i made a credential which was a at a.com and my password was one two three so let's sign in perfect yeah so this is the new article that we have posted just now and it's at the same time it is here because remember here we are showing all the articles in our database all right so perfect and now we can also able to scroll this thing all right yeah so we can do different things right now okay perfect to be able to click on this and go to a new page let's go ahead and click well everything is showing as we want it uh well we have some problem oh it's not a problem though just a random message uh let's see mind boggling this one this is the latest one perfect but the image is not showing so let's go ahead and find the file and this file is a detailed book this one all right so you should have it in your github project file the one you downloaded the only reason the image is not showing most probably for this one so the base url let me change it and restart it yes perfect so it's there uh let's go ahead and check on this yes perfect and uh how about another article this one yes perfect so we have things showing up everywhere and the design we wanted and next we'll see how to do this design and how we did that

Channel: dbestech

Views: 26,328

Keywords: flutter rest api, flutter rest api tutorial, learn flutter, flutter app development, flutter json api, flutter tutorial for beginners, flutter app with backend, flutter laravel backend, flutter login page, flutter signup and login, flutter fetch data from api, flutter image upload, flutter web, flutter laravel crud, flutter php mysql login and register tutorial, flutter backend development, flutter backend php, flutter complete app, flutter tutorial, flutter app from scratch

Id: kTrbcb21ENU

Length: 48min 1sec (2881 seconds)

Published: Sat Jun 19 2021