[Flutter] Login Screen with HTTP Post Request | SnippetCoder | LEARN.CODE.CREATE | HD Video

[Music] welcome back to snippet coder and we are back with another video and in this video we will learn how to make login screen with http post request inflator and this is how our final output will look like thank you first of all we have to design the ui part and after that we will move to that http post request coding so we will add the new page and here we will add the page name that is login underscore page dot file and we will make it as a stateful visit i will run the application to see side by side how our ui is looking so we have to add the name in that home page that is main dot dot file so now we will design the ui and we will use the skate fold visit over here and we will create one key over here he is used to basically for the state maintaining a known we will use the single child scald group now child we will use a multiple columns and the children we use the stack and here we will use that stake visit and basically state wizards allow us to put multiple layer of visit onto the screen and the visit take multiple children and order them from the bottom to top and here we will add the container we will add a width as a double dot infinity then we will add the padding we will make it as a symmetric and vertical we will use 30 and horizontal 20 then we will use the margin margin we will use the same vertical we will use 85 and horizontal we will use 20 then we will use the decoration wizard we'll use the box decoration and here we will use the border radius border radius we will using the border radius dot circular that is we are using 20. and the color we will use the theme dot of context dot primary color then we will use the box shadow and here the color we are using theme off and color dot with opacity 0.2 offset we are using offset 0 then 10 blur radius we are using 20 here the box is getting ready i will use the background color here context accent color we will modify these themes in the main dot dart file later on now here we will add the form here we will provide the key and we will define the key here global key then we will have form state global key form is equal to new global key form state and here we will provide a key then we will add the child and the child we will add multiple child and those will be text box of email id and then we have a password we are using a column here size box basically we are using the size box wizard as a box with the specific size unlike container you cannot set color decoration using size box the wizard is only used for sizing the visit pass as a child pass the text here text visit and here we will pass login then we will pass the style and we will use the theme here text theme dot headline 2 and here login is coming we will modify the design later on then we will pass one more size box now here we will pass that text field text form field and the keyboard type we will use text input dot email address then we will have a validator here before that we will use onsave and we will use it later on let's comment it for as of now in the validator we will use input and here we are checking input dot contain at the rate not contain adderall then we will pass the error message of email id should be valid else null now we will do the decoration new input decoration then we will have hint color and text email address here the email address is coming now we will pass enable border and for the border we are using underline input border and here we are using border side border site and then we are passing the color here and we are using theme of context not accent color with opacity 0.2 now here we will use focus focus color before that we will use focus border and the focus border we will provide underline input border and here we will provide a border site and then we will pass the color theme of context dot accent color then we will provide the prefix icon and for the icon we are using icon i can start email icon we are using here and the color we are providing theme of as in color before that we have to provide the themes and all we already had the theme ready just i am just copying paste so now icon is coming and theme we have changed it to black so in the theme what we are doing we have used the theme data and we are using the font family and for the primary color we are using white and then we have a floating action button theme and then we have a accent color here we are using the red accent then we have a text theme and for the text we are using heading 1 heading 2 body text 1 and we are using the same color for red accent only change we are doing here is we are using the font weight here in that heading 2 we are using the font pate as a w700 and for the body text phone we are using font weight as a w400 so now just continue with our designing ui design part so email address text box is ready so now we have to create that password text box after that we will add that button of login button here we will provide the size box we are using height as a 20 then we are using the same text form field just to save the time i am just copying pasting the same so here we will do the modulation for the type we will change it to password to text then we will have a validator here in the validator we will check if input dot length is less than three then we'll pass the message of password should be more than three characters and here we will pass password so now the password is coming so now we will also suffix the icon for that being the password for that we have to do suffix icon and here we will pass the icon button here we will use the on press then we will have the color we are using the same theme of context accent color with opacity 0.4 so now we will add the icon icon and here we are providing the icon start visibility off so this is the icon we use for showing the password or hiding the password for that we have to provide one variable here and we will name it as a bool height password is equal to true so here we will use the abstract text parameter that is used in the text field wizard to automatically convert all the enter text into bullet characters and they look like the bullet dot inside the text field wizard so this parameter is mostly you to hide the type text inside the text field like password typing and this will make the typing secure and here we are using that variable height password so in the on press we will provide set state and here we will do height password is equal to not of height pass one and here for the icon we will modify our code and here we will use height we will check if height password then we will use icons dot visibility off else we will use icon dot visibility so here we have the icon now if i type here raman and now the text is converted to that dot bullets and when i click on this it will show me the content which i have type in the password field if i re and the icon has been changed to the visible icon and now if i click again it will convert my password into that bullets and icon hasn't changed so now the fields have been added so now we will add the final button of that login button here we will add the size box and here we will add the flat button i will add the padding here the padding we will use as insert now symmetric and vertical we are using here 12 and horizontal we are using here 80. then we will have the on press button then we will add the child here for the text and here we will write login and then we will use the styling here style we are using a set text style and a color we are using colors dot white for the text color we are using the white color and for the overall uh background color we are using the accent color for that is red color we are using here then we are using a shape here and a shape we are using a stadium border so here the button has been ready we can also try other shapes also if i remove the shape here and it will come in a rectangle form so we will use the shape as stadiums so now the ui part is ready so next step we will do the integration of that http post request with our form so we will use this website in our application as a test api for the login and we are using that api slash login and here we have to pass to parameter first one is the email id and then we have to pass a password in the response we will get a token in the case of invalid email id we will get the error message so now we have to write the model class to deal it with our request and the response parameters so now just move let's get moved to the coding part now we will create our model class here and we will create one folder that is model folder and here we will get a class file that is login underscore model dot dot file and here we have to create two classes first one is a class login response model and the second one is a class login request model so first we have to write a code in the login request model that is we have to we have to create two parameter here first one is string email then we will have the string password and here in the constructor we will pass request login model and here we will pass the start email this dot password so now we have to create one method of 2 json and we have to create a json from the map and in the map we will have the string then we will have the dynamic i will name it as a to json map string dynamic map is equal to email email dot trim password password dot trim and we are returning that map what we are doing is we have created one matter of two json and from the variables we have we are creating the json and we are using the map type of string and dynamic then in the response we will add the parameters first one will be final string token and the second one will be final string error then we will create the constructor here login response model this dot token this dot error we are creating a factory login response login response model from json map string dynamic json then we will return here login response model and here we will pass token and here we will check if json token is not null then we will pass here json of token else empty for the error we will do the same else empty so now the model file is ready so now we have to create our api file which will do the http post request in the server so now we will create the api service dot dot file and we will create one folder that is api and here we will pass the file and we will name it as a api underscore service dot dot file and here we will create a class file and name it as a api service before that we have to add a package of http now we have to import import package http as http also we have to import dot convert now we will create one method of feature type and here we will pass a return type of login response model and here we will name it as a login in the parameter we will pass login request model and here we are making as a async and here we will pass the url we will name it as a https request a small start line slash api slash login here we have to provide one variable of final response and here we are making as away and then http dot post request here we are passing the url and then we have a body in the body we have to provide login response model dot sorry we have to change it to login request model and here request model then we are passing request model dot to json so here what we are doing in the http post request we are providing the url uh in the body we are just providing that json of that model class then here we will check if response dot status code is equal to 200 else or a response start status code is equal to 400 400 we are using for the invalid username uh they have the status code of 400 and then we will pass return login response model dot from json and here json.decode and here response dot body and that's condition we are throwing the error exception fail to load data so now the api service class is ready so now we will do the final integration of that api class in our ui part so now we will update our login page and here we will do the authentication api and all for that here we have to provide login request model request model then we will do the initialize date and here we will create request model is equal to new login request model so on saved here will now update our own save button and here we will pass on save and we are checking here input and we will map it with our login that is request model dot email is equal to input and in the password also we will do input request model dot password is equal to input what we are doing here is on the onsave whenever we uh enter any data in our textbox it will map that data with our request model variables and it will do the automatically mapping and all and here yeah here we have to change the icon we have to use the lock icon here before jumping to that our login button we have to create one method that is of bool type and we have to name it as a validate save validate and save and here we will check and here we will check form dot validate then we will return form dot safe and here we will return true and we will return false here what we will check we are checking here if the form is valid then only we will uh return it as a true and we will save the form and after that once it is true then only we will call our api matter and now in the login button we have to type here if validate and save true then we have to call over that uh api matter before doing that we will print our json of that request model we just to check that our json is working or not properly and here we will pass request model dot to json now we will enter our data in the form and we will click on the login button and in the console we will see the json if the json is coming then we are just good with our code and here we will pass abc and that it test.com then in the password we will pass one two three four five six now we will click on our login we are getting a error here email is equal to null so we have to uh reload our application because we have just created the model file and that is not reflecting so now the application has been restarted so now we will enter abc at the rate test.com and here we will pass one two three four five six now we click on the login and here we are getting the json and this json will be posted in the http post request and now we are good with the json part so now we will call that api before doing that for the better user experience we will create one more class and what that class will do when whenever we click on our login button and it we will get a loader a loader in the on screen and multi api call is success the loader will be automatically hired and we will get the response from the api for doing that we have already created a class file we will name it as a progress hud so what we are doing here is we have created one classify and in that class uh we are just passing the list of widgets and here we have the parameters first one is a child visit uh we have to pass from that ui screen then we have a variable of n i async call and we have to pass true or false then we have opportunity like loader is loading and we have to hide the background with some opacity and the color we have to define and we are using here grey color and then we have a value color also parameter here we are checking if that async call is true then only we will show that loader else we will just return our child wizards now we will update our login page and here we have to pass one variable that is of bool is api call process is equal to false then we have to modify our build matter here we will pass and this one we will name it as a ui setup and here we will return progress uhd and we will pass child and the child we will pass that wizard which we have created u.s setup and here we are passing the context then we will pass async call and here we will pass that parameter his api call process then we are passing the opacity that is we are using dot three so now whenever we click on uh login button we will pass this parameter as it true now you will whenever we click on that login button you will see the progressor i'm just reloading the application so now if i enter a b then i click on login we are getting the validation message also email id should be valid we have to pass abcd enter it123.com if i click on the login now you will see the progress bar so this progress bar will help us to the user that something is doing in the background for notification of that thing we have to use these types of progress bar and now uh when when we do our integration api uh we have to pass this as a true and on that completion of that api part we will make it as a false and the loader will be hide so let's get modify that code also so now here i will call that api part aps service api service is equal to new api service and we will call here aps service login method and here we are passing that that our request model then we are in the checking here so in the then we we will pass it as a we will change our api call process and we will make it as a false once that ap call has been done completed then we will changing the status of that api call process to false and the loader will be hired automatically so here we will i'm just reloading the application and we will check the api call and all we'll see in that debugger also so here we are passing abc test.com then we will pass the password now i am putting two character only so we will get the error of password should be more than three characters so these are the client-side validations uh before going to that server side we are we have also added two client-side validation also and now if i click on the login so here the loader is loading once that api call is completed so our loader will be automatically height now the loader has been hide and that api call has been successfully done so so now the thing is left we have done the api call and all now we have to show the response to the user which we have received from the server for that we have to pass here if we will check here if the value dot token is not empty then we will uh we are using the snack bar here final snack bar is equal to snack bar and then we will have hiding the content here and here we are using the text visit man we are providing the message of login successful and here we are using that constraint.snackmap we are passing here so in as statement also we will pass and here we will show the error masses now if i click on the login and we will get that error message of user not found because we are providing the invalid username so here i am getting user not form so now i will add that proper username now if i click on the login i will get login successful so here i'm getting the login successful so that's all in this video i hope you liked the video don't forget to subscribe to the channel like comment share and it will motivate me to do more and more video on the channel so thank you all [Music] you

Channel: Snippet Coder

Views: 46,907

Keywords: flutter, introducing flutter, flutterio, ui framework, flutter widgets, build native apps, google mobile ui, widgets, firebase, firebase and flutter, expressive ui, cupertino, material design, ui, native, google, app developer, flutter sdk, dart, android, app, flutter tutorial, create login page, create signup, flutter tutorials, flutter google, flutter app tutorial, flutter app, dart tutorial, flutter app demo, cross platform flutter, flutter and dart, google flutter, login

Id: _Kw4BfNX1-4

Length: 45min 35sec (2735 seconds)

Published: Mon Aug 03 2020