Flutter Phone Authentication With Firebase | Flutter 3 Updated Code

hey guys welcome back to another video in this video i will update the source code for flatter phone authentication which we have done two years ago in this channel and after that there were a lot of changes and updates to flutter and dart including the null safety and also all the packages have been updated and there were some changes to the structure and the usage we will try to cover everything in this video and make this project work here is the final result how it will perform we will give our phone number and by pressing the next button we will come to the otp verification and by providing our otp we will be logged into our home page and have the unique user id by pressing this button we will be logged out so let's get start with the video but before that i request you to like the video and subscribe to the channel so you won't miss such videos in the future and without talking too much let's do it okay to get started first you have to come here and download the project then open up the zip file and extract it to your location now look so now that we have our project first of all you have to come to pub spec yaml and upgrade the packages once it's done then we also have to update the latest dart sdk so in this case i will open another project which is having the lattice sdk so this is another project i will just copy the sdk and paste it here there's nothing else to change in here just save it now go to the android app build.gradle and here you have to change the compiled sdk to 31 and also the targeted sdk 231 and down here you also have to copy them one by one and check for the latest version now copy this one get the lattice and paste it so now we're done with this one just save it and come down to build.gradle of project level and do some changes first thing is you have to update the kotlin version which i'll take it from here then change this build version and also search for this one if there is any update and now we are good you also have to come to this gradle and gradle wrapper.properties and upgrade this one so i will copy this one as well from here save it and one last thing you have to come to the android manifest and convert your project to android x compatibility you have this one already so we can only change this one so let me copy this from the other project as well you have to come and copy this name from here and that's it now we can go to the pub spec yaml save everything so now we have to convert our project to null safety i will do that very quick okay our homepage is now nullsafe we also have to go to our otp page and make the same changes there's also some update here in pinput we can import that again and let's come down here and see what other changes are here we can make this pin put and now instead of this field count i believe it is lint and instead of text style we have the pen theme so we will set the default pen theme and in here let's go and see what are the changes in the pen put i can simply copy this design from here and delete the old one now i can copy the default pen theme and paste it here and remove these ones which are not available anymore and you can also design your submitted field selected field and following field one by one by doing the pin theme as you can see we have got the error focus disabled following submitted theme you can design them one by one like this you can set the weight the height the text style decoration margin padding and everything but for now we will get the same design for all of them so by default if you don't set the submitted selected following all those stuff it will take the default theme for all of them and also here on submit and this one should be null safe instead of this showing snack bar we have another way this is the old method and down here we also have to make these ones null safe to make it work and it seems that everything is just fine now to test our application i also have to add the google dash services.json from our firebase let me see if i have the firebase still so luckily i have the firebase for this project till now i can simply come to the project settings and down here i can download the google.services.json and i can drag this one directly and paste it into our application and i guess i have to go and add some testing phone number if there isn't one i can go to the authentication sign-in method phone number is enabled be sure to enable this one and come down here to phone numbers for testing you can add some phone number so we already have this phone number for testing with the verification of zeros let's go ahead and test our application whether it runs now or not okay so we have got some errors here and it seems that it says that minimum sdk should be 19 and also it's pointing to firebase analytics dot kotlin let's go to the build.gradle and see i think there is some changes to this thing let me check the firebase so we are in phone art let's go to the documentation of android configuration and down here we have to implement this one and also let me add this firebase art kotlin instead of this one and we don't have anything so let me save this and run again here if there is the error still alright guys so the app is finally running let's check the app and see if it really works or not let's provide the phone number very quick and click next okay everything is working but this otp is not visible let me change the color here and we have to restart now let's type the phone number again press next and in here let me type the otp that we have given in the test phone number and it should login as so we have successfully converted our two years ago code into the latest flatter version which is 3.0.5 and it is still working so thank you guys for watching if you liked the video don't forget to subscribe and like and i will see you in the next video

Channel: Lazy TechNo

Views: 11,371

Keywords: flutter 3 phone auth, flutter 3 auth, flutter phone authentication, flutter phone authentication firebase, flutter phone auth, flutter phone number verification, flutter phone auth firebase, flutter phone verification firebase, flutter firebase phone number authentication, phone number authentication firebase flutter, firebase phone auth flutter, flutter firebase phone auth tutorial, firebase phone auth flutter github, flutter phone auth github, flutter phone auth ui

Id: Xe30neH4ppE

Length: 7min 21sec (441 seconds)

Published: Mon Jul 25 2022