Flutter Getx Rest API Tutorial - Registration & Login | Post Method

hey everyone welcome back to another video in this video I'm gonna show you how to implement gitex with post method as in previous videos we have seen what is get X how to implement stage management navigation management and how to retrieve data using git method and in this video we will see how to perform login and registration using gitx controllers and if you're new to gitix I recommend you to watch our previous videos so you get some idea how it works and then you can come back to this video and continue with us so now let's see how the demo works and I will show you how to implement them alright our app is running here and you can see by pressing the login we can see the login UI and by pressing this register we can see the register UI and now let's test our registration and see if it works if I press register it should be able to register and yeah it's successfully registered we didn't get any error and now if I want to print the token as you can see we are getting the token here and if I press the logout button it should log out as from the home screen and redirect us back to the the authentication screen so now if I try to log in with the user that I have just created if I press login we should be able to log into the user and this print token should print the token for the user and this log out button should log out the user and let's try to re-register the same user and see if we are getting the proper error or not so we have registered this user already now if I press the register it gives us email address you have entered is already registered it means the registration works and in case of login if I test this so this is the email that we have not registered yet if I press login invalid username or password so this is how the application will work and this is what we are going to design in this tutorial and I recommend you to watch the video till the end so you won't face any problem but still if you have any problem you can comment down I will try to respond as soon as possible and please like the video subscribe to the channel so you won't miss such amazing videos in the future and without talking too much let's get started with the tutorial and see how we can implement this one alright in this video I'm gonna use this API which I have found in Internet and we will be implementing registration and login only and you can see the structure for registration we can provide the full path here then we have to pass the name email and password and as a result if the registration is successful we will get code 0 and a success message and also the token for the current user and if the result fails we will get code 1 and this message that the email has already been registered similarly in login we have to pass this path and the user email and password and if the result is Success we will get code 0 and a token which we have to save it locally and if the login fails or the user does not exist we will get code one and this message so considering this let's proceed with our application and see how we can implement this one alright to get started first thing you do is copy these three packages that we are going to use in this video and then you're good to go next next I want you to create this structure for your application where we have separated our controllers our screen and also the utility which contains the API endpoints so let's get started by writing Logic for registration controller and see how we can register a new user using get X controllers so first thing we do is create a registration controller and extend that with gitex controller then down here I have created four variables for our name controller email controller and password controller and also one shared preference to store our token locally and process the user login next I will write a function to register user with email okay here I've given a variable called headers which I have defined the content type as application slash Json because by default it takes plain text and for our URL I have specified the base URL plus the endpoint for registration email I have defined this base URL and endpoints in a separate file you can see here so this is how our base URL and this is our endpoint for registration and login so I'm going to create a map and then inside that I'm gonna pass name email and password and take the values from the controllers which I will pass the value from our UI screen now that we have our header we have got our URL we have got our body then I have to post it using HTTP post method and for that I have to import the HTTP package okay I have imported the HTTP package as HTTP and using the post method I have to pass my URL my body and also the headers notice that inside the body we have to encode our body because it will be in form of plain text and we have to Json in code which comes with the dart convert doing this we will get some response and we will check if the response code is equals to 200 which means the result of this one is successful and now we have to decode and see what is inside our response next we have to check whether the user is successfully registered or it was registered previous obviously so for that I have to check the code if it is equals to zero it means the registration is successful then we can simply take the token using data of token and print the token and also create a variable for our shared preference you can see here we have got our data as inside the data we have got the token that's how we can access that now we can store our token inside our shared preference using this and also we have to clear our name email and password controllers and then we can navigate to our home page and in case the user is already registered we have to show appropriate message and for that we have to put an else method down here and then we have to throw the appropriate message which comes from server side otherwise unknown error so in this case if the user is already registered we will get the message from the backend which this email address you have entered is already registered and now if the response code is now 200 which means our request for some reason failed we also have to show some error message which we will get the message from backend if there is otherwise we show unknown error occurred and inside our catch method we will show a simple dialog with the title of error and the appropriate error which comes from our throw okay now I will write the code for login controller and then I will show you what are the changes that you have to do it is somehow similar to the registration so all right we have our login controller and you can see we have got some changes and I removed the name controller from here and also the function name is login with email and down here in the body I don't have to pass the name because login will accept only email and password and as the endpoint I also pass the login endpoint which is account slash login and down here we don't have anything else to change or add everything is just same so now let's go ahead and write the code for our authentication screen and also a simple design for our home page and then we can run the app and see how it works alright I Will Not Waste too much time writing the UI code from scratch and I will copy my code from pieces which I have designed preview obviously by simply writing the art screen and the whole code for the authentication screen will come here so now I have to design my input text field widget and also the submit button so let me go to the submit button and copy my code from PCS again so here's my custom button for login and registration and now I will bring my code for the input text field and that's it now let me go to the home page and paste my code for home page all right here's the code for our home screen we've got a button to log out the user by clearing the preference and redirecting the user back to the authentication screen and down here we have got another button to print the token of the current user so in alt screen we have got some things to discuss here we have created two instance of our controllers registration controller and login controller and one simple variable to check whether our UI should show the login part or the registration part so if our is login is true down here we can see that if it is true then we will show the login UI screen otherwise the registration UI and from the UI I'm passing the value to the controller and then in the controller as you've seen we are passing that into our body for the rest API the same thing goes with our login we pass the email and password and then by pressing of this button we call this function which is available inside our login controller and one last thing here we have to redirect our user to the home screen and same thing goes to the registration and now we can run our application and see how it works alright our app is running here and you can see by pressing the login we can see the login UI and by pressing this register we can see the register UI and now let's test our registration and see if it works if I press register it should be able to register and yeah it's successfully registered we didn't get any error and now if I want to print the token as you can see we are getting the token here and if I press the logout button it should log out as from the home screen and redirect us back to the authentication screen so now if I try to log in with the user that I have just created if I press login we should be able to log into the user and this print token should print the token for the user and this log out button should log out the user and let's try to re-register the same user and see if we are getting the proper error or not so we have registered this user already now if I press the register it gives us email address you have entered is already registered it means the registration works and in case of login if I test this so this is the email that we have not registered yet if I press login invalid username or password so this is how the application works I will leave the source code in the description you don't have to worry about that and I recommend you to watch the video till the end so you won't face any problem but still if you have any problem you can comment down I will try to respond as soon as possible and please like the video subscribe to the channel so you won't miss such amazing videos in the future

Channel: Lazy TechNo

Views: 53,326

Keywords: flutter getx, flutter getx app tutorial, flutter getx for beginners, getx flutter full course, getx navigation management, flutter getx tutorial, flutter getx navigation management, flutter getx routing, getx flutter tutorial, getx flutter github, getx state management, flutter getx rest api code, get api in flutter, flutter getx with api, flutter rest api, flutter api example, flutter getx login, flutter getx registration, flutter getx authentication, getx authentication

Id: h-D_kvXYmDo

Length: 10min 6sec (606 seconds)

Published: Fri Oct 21 2022