Spring Boot Flutter Login Registration | Flutter Spring Boot Authentication | REST API | MySQL

[Music] [Applause] [Music] [Applause] [Music] okay welcome back to another exciting episode i am your host mahesh karya you're watching me on youtube live today i'm gonna take you through the spring boot flutter login registration tutorial so without wasting any time let's deep dive into it so you have to have these things available before proceeding letter sdk android studio xcode java of course the docker in which we are going to install mysql postman for testing restful application table plus for viewing your data you can use mysql watch workbench as well and visual studio code of course and we are going to use these dependencies in our spring boot application you can use anything by the way in back end it's all up to you but for this tutorial i am going to springboard mysql as a backup so uh if you haven't installed a vs code already so you can grab this from here code.visualstudio.com uh the next thing you have to have postman available so postman.com you can get this from here and the next thing is flutter sdk you can download this and this is essential by the way i'm going to use this for everything for my java back-end java stuff and my flutter front end as well you have to install few plug-ins search for java install and you'll enter you'll get this extension pack over here you have to install this and the next thing is search for spring and you will get this spring extension pack over here uh this one i guess yeah you have to install this uh next thing we are going to use lambo clock sorry convenience uh this long book lombok is essential so you don't need to use data status and the next thing for flutter search for flutter and you will get this two dependencies sorry are extensions uh this one and this one awesome snippets this is very essential better uh so without wasting any time let's deep dive into it create new folder on your desktop name it whatever it may be springboard will be better i guess and hit enter now in here inside view you will get this thing search for flutter and you will just get this thing float a new project click here name it whatever it may be odds will be better uh hit enter and select your desktop springboot folder empty folder and select this thing it will take time to install or create your flutter project in here and for now i'm going to open my terminal to make sure you have to make sure that you have to have docker available inside your system so search for docker hyphen fn version and you will get your current docker version over here okay so if you haven't got it already so you can grab this from here search for docker for your system for mac or for windows and you will get this very first link over here and click here and you will get this download link from here click here and you will get your docker available inside your system okay after that you have to create your container so okay so docker run hyphen have a name of your container whatever it may be new sql is my name of container after that you have to define environment variable like your password your root password then your database name mysql database and database will be mydb okay and in detach mode i am going to publish this thing in 3306 port which is default port for mysql and you have to define this mysql colon your version of your mysql image that you have to download it from docker hub how to define password over here okay i have made this mistake and this time i have to change this thing to something else like sql will be better for now yeah this is better so i now hit enter now search for docker ps you will get this thing so yeah it's completely fine so you can use uh table plus if you want to or mysql workbench tableplus.com our table plus is better for this is universal so you can use this uh for anything poster is mysql mongodb it's all up to you okay okay this is perfectly ready now run this thing on your android or your ios simulator it will take time so wait for it okay and the next thing again inside view command letter search for your uh spring initializer this time or this one yeah this one click here and you will get this list of versions that you want to use so i'm going to choose 2 3 4 for now and now choose your java it is same as your star dot spring dot io don't worry about it is very simple now choose your java or kotlin order it may be and this is your group id i've got my issues my group id hit enter you will get this your artifact id uh i wanna use api hit enter and this time i'll use char and version is 14 now dependency type search for vape this is spring web hit enter you will get this right click over here the next thing is jpa as usual click here your two dependencies selected uh after that long book and you'll get this thing lombok click here uh the next thing is uh i guess mysql hit enter and you'll get this four dependencies are selected now hit enter it will generate the project make sure that lombok is [Music] inside desktop i'll choose the same project springboard inside that generate okay now add to workspace will be better choose this thing or open this thing in another folder so it's all up to you how you use it let's try op yeah this will be better to use side by side windows so i don't want to mess with the things the same editor okay this is quite perfect now you can use select this thing yes and yes yeah you'll get this spinning icon over here okay so this is my back-end stuff this is my front-end stuff this is my api uh so it's installing api over here it's fine and this is my folder so without wasting any time so inside spring main you will get your package same i have got my restaurant api excluding workspace yeah again okay so this time i got my boilerplate it's fine and now i'll use this oh okay you will get this suggestion you have to choose this hit enter okay it will automatically grab this thing for you next time data it from lombok hit enter uh in teacher id which will be type of id hit enter and generated value make sure to hit enter okay it will grab this dependencies for you the next thing is your string email and my string password that's it i guess yeah the next thing is user repository dot java and you will get this thing you have to choose this interface over here which will be extended by my gpa repository search for jp repository you will get this hit enter it would automatically grab this thing and now in here you have to choose your user hit enter and integer hit enter so now in here okay close this thing in here you have to define user space and find find by email and password so yeah i guess string email string password this is for login uh verification okay uh you have to create this thing that's it i guess and the next thing is i have to create a controller dot java okay now i have to define this is my rest controller hit enter [Music] inside here cross origin so i can use this thing with my flutter okay so inside rest controller you can define your auto white to my private user repository okay use a repository and i have to create two post methods post mapping will be my public methods select this thing retro type will be user for both the cases and name will be my register and in request body i'll pass my type of user user okay so you can in written you can save this thing user repository dot save simply i will perform validation here but for now it's fine that if user is already available then you don't want to uh save this thing it's it's like the general validation will do that later post mapping again and again my public method will be type written type will be user and this is my login in here i have to define my request body user okay uh user repository dot find by email and password and pass your user dot email and your user dot password okay once you get this you have to save this in user hold user equal to and you can return this thing over here like this your old user that's it so uh yeah that's it i guess now you can run this thing but before that in here in resources application properties spring dot source dot driver class name will be com dot [Music] com.mysql dot cj dot jd pc driver spring dot data so start user name will be my root string dot data source your password will be my password string dot data source dot url will be my jdbc colon mysql colon localhost colon 33306 your database name will be mydb as i mentioned in my docker at the time of creating docker after that spring dot gpa dot hibernate dot tdl auto update okay that's it that's it so this is perfectly fine now i can run this thing from here so once you get the all the dependencies or extensions from here marketplace then you will get this option over here and run this thing okay so yeah this is running now i have to work on my flutter side so yeah this is my flat up okay and the roller i have to define the path means slash login and this is slash register okay now this is perfect now you have to restart this thing once again select this thing and run this thing yeah this is working now in here uh you can remove this thing all the things so here and simply import material.dart and here void main run app your material app where debug banner will be false and you you can define your home over here which will be login at first so i'm going to create this login page here inside lib library login dot dot the next thing is register dot dot and dashboard dot dot hit enter that's it i guess now inside here login you will get the same packages material and you just need to write this date full widget this one hit enter you will get this thing you just need to write login okay you don't have to worry about anything else now this is my scaffold uh scaffold is something that provides a completely white page for the background inside here child will be my simple text normal text which will be hello world or login for the first time okay and this is my body that's it you can you can wrap this thing from here just wrap this thing um okay i have to make it center okay that's it now inside main you just need to click here on yellow bulb and you will get this login you can manually do this if you want to okay i'm i have to use semicolon over here and yeah everything is perfectly fine you can just start this if you want to so i got this login here you can see that now i can work on login so the very first thing is we have to wrap everything in [Music] single child scroll view which will be scrollable vertically and in here child will be my form and inside form i am going to create my column contains column contains lots of children's children sorry uh and in here i define my text first of all okay size box contains height this is imaginary box which contains height of 100 from top the next thing is simple text but this time i'll use again login and i have to install few dependencies from here inside here inside dependencies you can define uh like flutter svg or there are google fonts is here google fonts one 1.1.0 i'm using for now uh http will be 0.12.2 that's it i guess okay for now that's it if you want some more we can define here okay it will automatically grab the dependencies from here you have to wait for it okay for just few seconds now you can close this thing now in here comma style google fonts you will get this suggestion over here google fonts dot pacifico and in here i'll define my font weight and everything font to it dot bold and my font size will be my font size of 50 and my color will be uh my color mess whatever it may be for now it will be black color dot blue 233 6 5 eight two and one for now let's see how it looks like so this is my login i need to refresh the page okay this is my login it it's not looking good i know know that but uh for now i have to wrap this column inside a container i guess so i can define my height of container which will be at least 700 and decoration in decoration i'll use my box decoration contains my color which will be the same as this and in here i'll use colors dot white okay so yeah this is perfect child is already specified okay okay we have to define width i guess width will be my media query dot off context dot size dot my width okay this is text i'm getting error in text okay now it's fine i guess okay i got this thing a very beautiful screen over here now i have to use my box decoration to define my shadow and border radius all the things okay i have to define a border radius so here like this which will be my border radius only from bottom left radius dot circular will be 30 i guess and from bottom right i'll define a radius radius dot circular will be 12 will be better yep let's see how it looks like like this uh you can increase this let's see how it looks like yeah it's good and this is 20. yeah it's good you can use a box shadow as well okay never mind we'll see that later now i need to define few things over here again size box will be height it will be 30 for now the next thing is my once again text will be my email and this time i'll use google fonts dot roboto where the font weight will be bold once again and font size will be 30 i guess yeah 30 will be better and the color is most important because this time i am going to use the same color but with different opacity with the opacity of 0.8 i guess it but you need to align this thing so make sure to wrap this in container or something else so a line will be better so so you can define your alignment over here to top left will be better yeah top left corner so it will look like this i'm not getting this here so you can refresh this and you will get this here i guess so uh the color should be 255 it should be white okay this is my email now i have to increase the font up to 50 of 40 i guess [Music] yep uh it will be better i guess let's try 50 without wood and if you want to use padding you have to wrap all the things inside here inside this column inside padding with 16 or 12 will be better like this yeah this is better but now i'll use my input over here after line my text form field and in here you can use decoration yeah oh now in here i need to remove border outline input border and in here border side will be none so i don't need to see anything the borders okay so we can now we can use style i guess [Music] text style and in here you can define your font size will be of 30 yeah this is perfect style font style color will be colors.white perfect and the next thing is after that you need to define a container so inside container the height will be of 10 and color will be off white okay now yeah this is perfect but uh 10 is this is perfect and i'll use the same color but with different opacity this time which will be 4 0.4 this is perfectly fine okay so again after container you can define size box over here with the height of again 30 and this time will grab this thing with a line here okay yeah but uh i'll use password here yeah i know this is not looking great but i'll try our best to refresh this thing i need to make some changes so here email is not perfect size should be 60 so this is perfect but email will be 40 perfect yeah perfect and in here password will be 40. perfect now it's looking great so i'll get space here after my container i need again i need a size box i can grab this [Music] in here but this time i'll use a 30 so i can define a text over here text will be already have account don't have account because we are in login page don't have account question mark and in here you have to define your style so once again google fonts dot roboto and font size will be this centers you can align this thing if you want to and center i guess if you want to or you can define your your font size over here which will be your 20 i guess yeah like this and the color will be standard height [Music] yeah like this and 16 will be better i guess yeah perfectly fine you can click here if you want to miss if you don't have account click here but font-weight will be always bold so it makes sense to use port yeah this is perfectly fine now the one thing is missing over here is the button how it will look like and the form key of course so in here you have to define a final form key which will be type of global key form state yeah so this is form key very essential so inside form you need to define a key so for validation and all we need this thing okay and the next thing that you have to have this in here i guess yeah the next thing you have to define user again over here so create a user dot dot and simply define a class [Music] user so you can define a string email and your string password [Music] and in here create a constructor this dot email and this dot password with semicolon so this is my class so just need to import this thing in here with empty values for the first time well when you load the page import user so yeah and this is ready to use but uh before that i have to create a button after your column and padding and your form i guess i guess in here so we have to wrap this inside a column the another column so uh this container should be inside column so yeah this is perfect so in here inside my column i can define my button so uh my button will be first of all i'll create a simple container with height of 70 and width of 70 and the child will be my flat button on pressed i'll perform my action and child will be simple text contains icon off arrow which will be a forward yeah this is perfect you can remove this thing you don't need to define this but you can define your color should be colors.white and you if you don't get stylo here then sci okay 20 i guess will be better okay now i need a shape shape will be around it rectangle border contains border radius will be a radius dot circular 40 50 water it may be yeah perfect now this is perfect i guess i just need to define my color okay color of my flat better color from our gpo with opacity which will be again same i have to define this thing in constants i know that but for now this one pink one yeah now you just need to define color over here dot white and with my size box of height 30 once again so it makes sense right now you can define this size 30 if you want to which looks great and so it should be 1990 i guess which will look better and this will be 50 i guess yeah this is perfectly fine and it should be 40 hit list yeah now it's perfectly fine now we have to make few changes over here like inside input fields here you can use validator with your value if value is empty then you can return something that enter value is empty or email is empty or whatever it may be what is this this is a mess email is empty like this otherwise return null like this but just nothing ah the next thing is controller which will be text editing controller contents text will be my user dot email and on change you can perform a val so user dot email will be my file so yeah these three things are essential over here and over here as well inside my text form fit of password change this to password and change this thing to password now i have to import my http package from here as http and now in here i just need to use http over here like my future method which will be a save i guess but type of async like this so we can await http dot post method your url whatever it may be like my url will be type of string url will be http colon slash localhost coolant att slash login like this and you can define your headers here like your content type [Music] will be application slash json and your body will be json dot encode you just need to import this thing from here and here you need to define your user right so your email will be user dot email and your password will be your user dot password that's it and where response you can save this thing to so you can print this or written this thing restore body like this so this is contain type i guess because uh we if we use context then we have to define the car city effect i hope it will work now this button is something is not working properly so let's see if i change this validate to on pressed only then it will work i guess [Music] yeah i got this thing perfectly fine okay if i click here then yeah still it's working the mistake was the form key is not working over here because the the form key yeah why it's not working okay it's fine we'll see that later but for now uh the verification is perfectly fine now i have to work on this do have account so you can grab this all the source code as written in register but this time i'll use instead of login rename this thing change all occurrences with register as usual like this this thing will be register [Music] and in here you just need to define already have account like this okay and we need to navigate this thing on click ok this is my text that you should wrap container and name it ink well like this so on tap you can use navigator over here [Music] navigator dot push context material page route again context your name of page will be registered and by clicking here you can grab this thing import library so yeah i got this and the same thing in here wrap this thing in container name it inkwell on tap you just need to use navigator dot pop context you don't need to re-route again so it will create the multiple layers which will not write right so don't have account click here you will get register click here already have account don't have account or you have account it's perfectly fine it's working if i if i do this thing here means if i want to register something like mahesh gmail.com which is my official email address and my shirt one two three which is not my official emails if i click here then it should return okay it's working perfectly fine okay in here if body which is not equal to null then will use a navigator on navigator navigator.pop context yeah this will be better i guess okay in login page it's returning body once again mahesh three to one at gmail.com mahesh three two one submit so i got this and mahesh three two one my h321 okay it's perfectly working so now the one thing is remaining is the error highlighting so validation is not working the main problem is this one which is very essential okay now if i click this it should return this thing so inside email where is my email yeah in here yeah error style which will be my text style and in here i'll define my font size and color like this and don't worry about this 20 will be better and i have to increase this size the overall size to 750 like this and it should be no no 30 will be better email is empty but this time i have to use something like i don't want to waste any time and such a silly case okay now if you want to properly uh validate this thing you can perform this regular expression from here you just need to use letter ml validation and you will get this stack overflow link over here and you just need to grab this thing which is this here you can use this thing like this in email okay so uh to check this thing you can use this thing it's all up to you so as of now this is perfectly fine you can navigate this thing so thank you very much all of you guys for being with me supporting me all the time if you want some more tutorials from my side please please let me know inside comment box feel free to ask me anything i'll definitely help you guys and thank you very much all of you guys for such a great support today i got my first 1000 subscribers so please hit the like button and bell icon for future updates thank you so much

Channel: Mahesh Kariya

Views: 28,799

Keywords: flutter spring boot, flutter spring mysql, spring boot flutter, login registration, flutter login registration, flutter authentication, flutter java mysql, spring boot app, spring boot flutter login, java flutter, flutter CRUD, Flutter and spring, spring boot and flutter

Id: y-B_5N2sZKE

Length: 55min 17sec (3317 seconds)

Published: Tue Oct 27 2020