Firebase Authentication for Flutter | Firebase Dependencies, UI Design | Flutter Firebase 2023 [#2]

hi and welcome to the second part of flutter Firebase Series in the previous video we learned how to set up Firebase for flutter connecting Android iOS and the web today we will check the next step and dive into adding Firebase dependencies designing the UI and preparing our app for authentication let's get started before we begin designing the user interface let's make sure our flutter project is properly configured with the necessary Firebase dependencies these dependencies provide the essential tools for integrating Firebase service into our app here are the Firebase dependencies we will be adding open the browser and search for the pub.dev hit enter and here in the first link click on the pub.div now this is the package repositories for DOT and flutter called the pub.diff search for the cloud firestore this dependency allow us to integrate Cloud firestore Firebase powerful nosql document database into our app with Cloud file store we can store and synchronize data in real time making it a perfect fit for creating Dynamic and responsive apps so just copy it from here and open your IDE open the pubspec.eml file and paste it right here now move back to the browser and search for the Firebase auth the Firebase art dependency provide the necessary libraries for implementing user authentication in our app with Firebase authentication we can easily handle user registration login and Logo using different authentication methods such as email password phone number and social media logins so just copy it from here and paste it right in the pubspec.gml file now the third dependency is the Firebase storage this dependency enables integration with Firebase cloud storage a scalable and secure solution for storing use user generated content Firebase cloud storage makes it easy to manage and retrieve user uploaded files in our app so copy it from here and paste it right in the pubspec.tml file now click on the pub get to get all the dependencies we added in the pubspect.uml file there we go the dependencies are successfully got it now that we have our Firebase dependencies in place let's turn our attention to designing the user interface for our app but before we design the user interface let's create a project structure in the lib directory we'll create a new directory called features and in the features directory we will add the user art this directory will have all the features that user is related to so in the user here it will come the presentation and in the presentation we will make another directory Pages now in the features we will create another directory which will be the app and this app directory will contain the directory splash screen and that's it we will add the directories step by step as we go further in this series now the application will have a splash screen as well as the login and assigner page so let's create a space screen first and display screen directory we'll create a dart file and we'll name it to splice screen here it will have a stateful widget and we will name it splash screen import the necessary libraries material.org and that's it now in the build we will return a scaf fold and here in the body of its we will return the center widget and in its child it will have a text which will say welcome to flutter Firebase and we will add some styling to it style it accepts text style and its color will be let's say colors.blue and its font weight will be old so that's it put comma and press Ctrl alt L it will format the code for us now as the application runs we want to delay our display screen for just 3 seconds we will add the future dot delete function in our init state so let's add it in its state and here we will do the future dot delayed and it accept duration so we will add the duration and duration will be in seconds three seconds let's say put a semicolon here and right after here now after the three second delay we want to navigate ourselves into the login page so for that we will use this functionality and we will use the Navigator dot push and remove until context and it will be material page route Builder accept the context and we'll use the high order function and it will navigate us to the login page now just put a semicolon here now we use the push and remove until here just because we don't want to navigate the user back to this black screen it will show Once the application runs so we didn't create the login page it's time to create the login page here as display sticking work is done go to the pages and create a new dart file here and login page that's it now the login page will be a stateless widget login page and import the material.dot and go to display screen again and import the login page here now instead of calling the login page directory here in the material page that route we will create a final field and its type will be widget and we'll name it to child and after calling it we will edit in the Constructor now we will remove the login here from here and call the widget.child and use the assertion operator to remove this error now that's it just remove the unnecessary import from here go back to the login page and now it's time to design our login page and it will return a scaffold and in the app bar it accepts the app bar and its title will be let's say login now in the body of the Escape fold we will return the column and in its children all the widgets will come lay down so it will have a login text and two text field and a login button let's make them so first it will have a text and it will be login let's add some styling to it style it accept the text style and its font size will be 17 and fund rate will be bold now it's time to run our application to see the live changes in our app for that go to the main.dart and here remove the scaffold from the home and call the splash secret here now as you can see it accepts the widget child we created here in display screen so child and accept a widget which will be login page so that's it just run your application in the desired emulator I'm using the Jenny motion so let's run it now as you can see we got error in the Gradle it is because the Firebase art requires a higher Android SDK version whenever you add some dependencies in your pubspec.gml some of them requires a higher SDK version and the default SDK version is 19 so we have to change it go to the Android directory and open the app and build.gradle so scroll a bit down and here you will see the minimum SDK version just remove and write the 21 that's it now it's time to run our application again and I hope this time it will give no exceptions as you can see the application is successfully run and we can see the changes right in the emulator so let me resize the emulator with the with the IDE so we can see clearly the changes we made in our application and also resize the Android Studio let's increase the font size of this login change it from 17 to 27 let's say and press Ctrl s and there we go now to place the login text in the center right here we will do right in the column the main axis alignment will be Center and we will wrap the column with the center widget and there we go we got the login in the center right here now after the login text we will use the size box to apply some size and it will be 13. the semicolon right here and press Ctrl alt L and it will reformat the code for us now it's time to create the two text field forms right below the login text now for that we will create a widget directory right in the presentation here a new directory and its name will be widgets in the widget directory we will make a DOT file and its name will be form container Widget the form container widget is at State full widget and it has some final Fields like the text editing controller the key and the Boolean is password field and by using the is password field we will check the either the field is email or is password and a string hint text label text helper text on Save validator on field submitted and the input type after this we add the all the parameters in the Constructor and here's the bull of secure text which is by default true and in the build it returns a simple container with the width of double dot infinity and its decoration is box decoration its color is colors.grade dot with opacity 35 and Border radius is circular 10 and in the container style it contains the text field right here now the properties of text form Fields contains all the parameters that we passed here above the controllers contain the widget.controllers and keyboard type which is that input type key is the field key and the obsequel text as we are checking here if widget. is password field equal to true so the obsecure text will be true otherwise we will show false and it also contain a suffix icon which is the icons dot visibility and we are checking here with the help of secure text in the on Tab we are doing sits that if it is true make it false if it's false make it true and in the child we are checking if the widget that is password field equally equal to True when the password field is true so we will show the icons dot visibility off and if it falls so we will show the icon.visibility and in the last we apply some colors and checking the colors with the help of secure text so now it's time to go to the login page and call the form container widget right here except the first edition and now here we will add one by one the property right here first of all we will accept the hint text and it will be email and right after this is password field is false and that's it and after the email we will apply some size box with the height of 10 and just copy the form container widget from here and paste it right below the size box change the email to password and is password field will be true now how to reload the application and to see the changes right in the emulator as you can see we got two text field right here one is email and the second is password now it's time to apply some padding horizontally so we will wrap the column with the padding widget and it accept padding and it will be Edge in six dot all not all but it will be symmetric and horizontally we will give 15. how to reload the application so we can see the changes in the emulator there we go we got the horizontally padding so now let's add a login button and first size box and height will be 30 and a container with its width will be double dot infinity and its height will be 50 and in the decoration it accepts the Box decoration border radius will be border radius start circular and it will be 10 and for sure its color will be blue colors dot blue that's it now in the child of the container there will be a text and it will be login the text widget have the property of style and it accepts the text style and its color will be colors.white and it's fun to where it will be bold now how to learn the application and there we go we got the button right here but as you can see the login is not in the center of this container so for this we will wrap this text widget with the center and hot reload the application there we go we got the login right in the center now let's change the height of the button to fortified because it's looking a little bit weird now it's looking good so there we go our login page is successfully designed now it's time to add a new page in the Pages directory which will be our sign up page and we will not repeat ourselves and will waste our time writing the whole code again so we will simply go to the login page and copy the all code from the login page and paste it right in the sign up page and now it's time to modify the code according to design a page change the name to sign a page and in the title of the app bar it will not be login but sign up and also here the text will be sign up and the sign up page will contain the username email and password so we will replace this email field twice if you are using the Android Studio just press the Ctrl D so it will replace all the selected code now press Ctrl alt L and reformat the code and change the email to username now scroll a bit down and also change the button text to sign up press Ctrl s and how to load the application now also our signup page is successfully created okay we will do one thing here in the login page grab this container widget with the widget and it will be gesture detector the gesture detector provide us different types of functionality on Tab we have here drag start Behavior exclude and blah blah blah so we will use the ontap functionality when we press on the login so it navigate us to the home page on Tab and we will use the Navigator dot push context will be context and material page route and it accept again the context and we will use the high order function and it will be home page we don't have the home page yet so let's create the home page right in the Pages directory a new dart file and home page the home page will have a stateless widgets and its name will be home page import the material dot dot and replace the const place Total with the scaffold and it will have app bar and its title will be text home page and in the body it will have a center widget and in the child of the center widget it will have a text and welcome to home so that's it go to the login page again import the home page now one thing is after display screen we are navigated to the login but how we will navigate to the sign up page for that below the container button widget there will be a row and its main axis alignment will be centered and its children it will have two texts one don't have an account and the second is the sign up and here we wrap the sign up with the gesture detector and in the on Tab we are using the navigator.push material page route and sign up page let's import the sign up page here there we go now let's run this here we go we got don't have an account sign up text now let's add some height from the above size box and its height will be 20. but comma here and Ctrl s how to load the application there we go now when the user press on the sign up it will navigate us to the sign up page there we go we are here now same for the sign up page copy this row and size block from here and paste it in the sign up page same as below the sign up button and replace the don't you have an account with already have an account and replace the sign up text with the login and also replace the sign up page with the login page page there we go now how to learn the application to see the changes in our emulator and we got the text right here when you press on the login it will navigate us to the login page and when we again press on the sign up it will navigate us to the signup page there we go but one thing we are having this Arrow back button when we press on this it will navigate us back to the login and again we are pressing 2D so it's like a stack of pages and we don't want it just replace this Navigator dot push with the Navigator dot push and remove until there we go and also in the sign up page replace it with navigator.hush and replace the sign up with the login page now that's it our design is ready now let's check it from the beginning Also let's remove the debug Banner from the top right corner go to the main dot dot and in the material app there is a property of debug show check Banner set it to false now let's run our application from the beginning there we go we have a splash screen for 3 seconds and now we are navigated to the login page so when we click on the sign up it is navigating us to the sign up page and also when we again click on the login page at Navigator login so with our Firebase dependencies added and UI design we have made significant progress in the next video we will dive into implementing authentication and connecting it to Firebase but first let's quickly recap what we have covered today we added the necessary Firebase dependencies to our flutter project setting the foundation for Firebase integration we designed the user interface for our application containing the splice screen login page and the sign up page congratulations on completing this part of our flutter Firebase series by adding Firebase dependencies and designing a stunning UI we have set the stage for implementing authentication in our app in the upcoming video we will explore how to integrate Firebase authentication and create a seamless authentication flow stay tuned thank you for joining us today if you found this video helpful don't forget to like And subscribe to our Channel channel for more flutter Firebase tutorial remember to follow us on social media for additional updates and content until then Happy coding

Channel: CodingxTalk

Views: 6,442

Keywords: how to add firebase authentication flutter, firebase sign up flutter, authentication with firebase flutter, login with firebase flutter, flutter register and login firebase, firebase authentication flutter android, adding firebase dependencies, firebase environment variables, adding firebase to flutter, responsive login page flutter, make login page in flutter, create login page in flutter, login pages in flutter, flutter splash screen and login ui design, signuppage, flutter, fireba

Id: uOTaHoB-YmA

Length: 18min 9sec (1089 seconds)

Published: Wed Jul 12 2023