Building a Contact App with Flutter and Firebase: Step-by-Step Tutorial

hello everyone welcome back to another long video tutorial in this video we are going to be building a contacts app in flutter using Firebase first we are going to use Firebase Authentication for sign up and login using normal email and password and we are also going to add Google Authentication and after that we are going to be using Firebase firestore to create read update and delete all our contacts and then we are going to perform search inside all our contacts that we have and after that finally we'll be adding a call functionality to call the contact directly from our app so let's start our journey first we are going to visit console Dot firebase.google.com and from there we are going to create our new project the name of our project will be contacts app accept Firebase turns click on continue for now we don't need Google analytics for that reason let us disable it create new project it will take some time to create our project within that time we can create our filter app simply open your command prompt and visit the location where we are going to create the floater app use flutter create command and the admin contacts app and create it it will create a demo project for us and now our contacts app is also ready click on continue simply go to the folder the contacts app that you have created now here we get the option of for floater selected now for the first step we need to have Firebase CLI installed to install Firebase CLI we can either install the Standalone Library or the npm version so simply run this command npm install minus G Firebase tools it will install Firebase globally so after installing we need to call Firebase login and here it's asking for some permissions so if you want to give some reporting details to five ways then click on yes otherwise click on no and from here we need to select our Google account where we have created our this project so select account click on allow and now it's showing 5B CLI login successfully now here also we are logged in and this is our email now we have completed this first step we already have flutter SDK installed in our system and we have also create our flutter project for this you need to Simply run this command inside this folder copy it and paste it will activate Pluto CL IP now it's showing a lot of CLI activated so just copy this command again and paste it this time it will add all the necessary package and plugins now we need to select our platform for now let's make it Android only work till it registered the Firebase project now our project has been registered click on next now our next step is to call this line of code where we are going to initialize our Firebase app so let us open this file inside our vs code you will find a Firebase options dot dot file that Pluto 5B CLI has already written for us when we are registering the app so what we are going to do inside our main function we are going to change it as async and then we are going to call widgets letter binding dot ensure initialized it will initialize all the widgets and after that we need to call our Firebase dot initialize app function so simply paste it for this we need the Firebase code package open the terminal in vs code and install Firebase code from power.dev Pluto Pub and Firebase port now we have installed Firebase code we need to Simply import it and the default Firebase option function is written Inside by this options.dot file just import it and then inside Android app build or Gradle we need to change the minimum SDK version to 21. and we need to also test our app whether it's running or not if the app is running successfully then it means that we have initialized Firebase correctly so just run the app and check our demo app is running successfully it means we have initialized Firebase correctly and we are good to go here we are creating a new folder of views first we are creating our login page dot that file it will be your stateful widget first we'll have a scaffoldio and side body let us have a column and children's will first have a text of login then we'll have a sized box of height 10 there will have a text form field now just remove the demo home page that we get the title will be contacts app and also the seat color we are changing it to colors.orange dot shape 800. let's not use home instead of home we'll use routes okay for now our root route let it be the login page first let us complete our login page it will not be my widget it will be as login page and now let's call login page here now let's watch restart the so this is how our login page looks like let's modify it make it more better let us install Google fonts Pluto or add Google fonts shh and here inside our main dot dot will use texting as Google fonts Let It Be soda texting now increase the text size of this Google fonts Dot Torah and font size will be 40 and point weight will be W 700 now let's stop the app and run it again from scratch let's modify the text field simply add a size box and in decoration we'll have input declaration and Border will be outline border just reduce the size inside the width we are going to use media queries foreign of the world available so let it make it 90 percent okay so in this line we just told get the size of width and only use 90 percent of the width much done sure we need to have a label as text widget email now we are done just add another size box here of height 90 now let us create another size box of height 10 copy this size box again and paste it this time the label will be password now two text form fields are created now we need to have a button so for that first create a sized box of height 10 and then we are going to create an elevated button for on Quest we are not having anything for now and the text will be login make the elevated button more bigger for that let's also use size box here change the width of the text form field foreign let's change the height to somewhat like 65 save it now it's looking quite better also increase the text of this login button use textile and font size will be 16. now we need to have another button so simply add a size box of height 10 again this time first we need to create a new folder here it will be images folder we need to drag and drop our Google images inside the image folder and after that we'll create a size box again it will have the same heighten width of others and then here will have an outline button child will be row it will have a children's first will be image dot asset the part of the image it was Images slash google.png and then we'll have a size box of width 10. then we'll have a text as continue with Google style will be textile font size will be 16. now before running the app we need to go inside perfect.tml here in our assets we need to mention our images folder that we have created all images inside our images fondos just save it it will run public then come back here on press is required function for now let's give it a void function and save it so the logo is not looking quite great so what we can do we can adjust the height and weight now it's okay let's change the main axis alignment of flow to main axis alignment Dot Center so add one more button before add one size box of height 10 it will also be a row it will have a text don't have an account question mark and then it will have a text button of text sign up also make it Center so use main axis alignment to main access alignment Dot Center now everything is ready now our login UI is ready let's add some text editing controllers first one will be our email controller second one will be our password controller and we need to link this controllers with our text form fields first will be our email controller a second will be our password controller now we are getting some bottom overflow to fix it we can wrap the column inside single child scroll View now let's also change the password to opsecure foreign let's copy the full login page and inside views create one more it will be our sign up page dot dot paste it and here instead of login page it will be signed a page most of the things will be similar but instead of login it will be sign up and continue with Google will be continued Google and here we'll have foreign for the home page let's create a simple home page just have a scaffold and it will have an ABBA title will be text contacts okay so now we have created our three pages we have only added our root routers login page let's also add some other routes like home will be our home page and sign up will be our sign up page and login will also be our login page now let's just navigate the user to the sign up page when they press don't have an account sign up button using Navi Gator dot push named we will send them to the sign up route and inside our assignment we forgot to change the title to sign up and when they Press login they are going to be navigated back to the login page use Navigator dot pop context now both the uis are now built now let's write the functions that will create new accounts in Firebase and also we are going to use them to login let us add Firebase or dependencies to our app clutter pump and Firebase Dot we are also going to be using Google sign in for that we need to add Google sign-in package so simply call flutter pervad Google sign in now we have installed these two packages now let's write the logic to create a new account now we have build a UI for login and sign up let us write the logic to create a new account using email signup using email password and also login using email password so for that create a new folder it won't be a controllers here we are going to create a new file it will be odd service dot dot create a class or service first we'll write a function to create a new account using email password logic create new account using enable password method it will be your future function because it's going to take some time to complete the function call so let's name the script account with email you will expect email password make it async and then first we are going to use try catch to handle any errors will await Firebase dot dot instance Dot create user with email and password your email will be our email and password will be our password and after we have created our account we can change it to return type to something like something string and return the string as account created that is used on Firebase or exception catch errors and will return e Dot message dot to string so we'll get the message about the error that we are getting now we have returned a function for creating a new account let's write the function to login and private email password method it will also be a future function let's also have a return type of string because we can return the string after our function gets completed so make it login with email will also pass email and then password make it async and then we'll use try catch to handle any errors they are first like our previous one we'll use Firebase auth dot instance Dot Login or it was sign in with email password same email will be our email password will be our password and here we can return us login successful and on Firebase auth exception we can catch it and in that case we can return e Dot message like the error message convert it to string and return so this was the logic tool login into our Firebase account now we need to add two more Logics the first logic will be to log out the user make it as future this time we don't need to return anything so for that let's just simply create a function log out make it insane we don't need anything so just use Firebase Port dot instance Dot sign out so this will sign out the user and one more thing we need to check whether the user is signed in or not so for that we'll create another function and this time we'll return true or false is logged in make it async and create a new variable user it will be Firebase part dot instance dot current user it means that we will check Firebase and find if current user exists or not if current user exists then we are going to return true and if current user does not exist we are going to return false so here we are going to Simply check if current user is not null it means the user exists then we are going to return true it's just checking so if it's not null it will simply return true we don't need to add another logic and if it's null it will return false so now we have written all the now we have written all the logic that we are going to be needing we don't need Firebase 4 so we can remove it now let's just add functionality to our login and sign up page first we are going to work on our sign up page first so if we press the sign up button we want to be adding some validations so that user doesn't gives empty spaces as input so let's add some sample value simple validations for that first what we are going to do we are going to create a new variable it will be our phone key it will be of global state it will be of global key and it will have a return type of form state now since these are text form field then we can easily add some validations first inside the column we apply to the form and since its form we need to add a form key so our key will be our phone key that we recently created and inside the text from things we need to add some validations simple validations like if value that we are getting is empty means user had not entered anything then we are going to write as email cannot be empty yes we are going to do nothing so simply return now we need to add a null check here okay okay now this was for the password so will not add this for email will not add this for password just we're going to add this here and for password we will check the value should be greater than 8. so our value dot length is less than 8 then we are going to return password should have at least eight characters otherwise we are going to return null now we need to link this with our sign up button so for that when we press the sign up we are going to call check if our form key dot current state dot validate we need to add an object here now if the user tries to press sign up without filling this Fields then they are going to get this error so the height is getting changed we cannot have constant Heights here so let's just do one thing remove this hide properties from the sized box of that contains text form field now it's okay we are getting the error as email cannot be empty and password should have at least eight characters now we have linked password controller and text controllers after we have done our checking we are going to create our account so for that we are going to call odd service dot create account with email password create account with email here our email will be email controller dot text and password will be our password controller to text inside our create account with email function we are returning either create account or the error message so we'll get the error message if we have successfully created the account otherwise will get the error message so let's use then and if our value is equal equal to the value that we are returning it was account created then it means that we are successfully creating our account we can return a snack bar snack bar will have a text that will show account created else what we are going to do we are also going to show a snack bar but this time will show the value that we are getting and the color of the snack bar we are going to change the background color to color store color start red Dot shade 400 and text will have a textile of colors.white so now let's restart and try to create an account so now let's come to Firebase console again here we need to go to the belt and click here for Authentication you click on get started what about this project we are going to be needing email password so click on enable the passwordless sign in we are not going to do that and also we are going to add Google sign in so for that reason also add Google so we don't need to we don't need to download the configuration file plotto has already done that for this project we are going to use this to sign in providers now let's try to create a new account in our signup page thank you let's sign up we are getting this messages account created let's check inside our Authentication users you can see that our account has been created and this is the date when our account code created today and we are also getting the user ID for the user now create account is working perfectly fine we are having no problem create account is working fine we are having no problem now we after we show the snack bar as account created we are going to navigate the user to the home page so use Navigator dot push named we are going to push them to our home page now let's try to create another account so it's showing us account created and this is the contacts page this was the contacts page it means the home page now what we can do here instead of Navigator dot push name we can use Navigator dot push the replacement name it will not redirect to the signup page again after we have created our account now inside our home page will have a driver happens to be on this side and then child will have a list View list we will have children's first children will be our drawer header so let us add a column for now and let's just test the drawer so this is how the joy looks like this part is drawer header and this is to below part of that here we are going to Simply add a circular Avatar and here we are going to shoot our main email of the user and column first we are going to have a circular Avatar Circle Avatar child will be a text like the first connector of the image so how are we going to get the first character of our email so suppose the first capital female S2 now how we are going to get the first character of the image so it's simple we don't need shared preferences for this we can simply call Firebase alt dot instance dot current user and then from there we can get the email and let's convert it to string first and then extract the last or less extract the first character now let's see let's also so change it to uppercase now it's okay let's increase the radius somewhat 30 okay now it's okay after the circular order we can add a sized box of height 10 and then we can add the image so we can simply call this it will give us the email now we are also getting the email let's add the main axis of lemon to main axis alignment dot end and cross axis 11 to cross axis 11 dot star now it says more better now here we are going to add our logout button so after our Drive whether we are going to add a list type so the title will be text logout let's also add a button in our meeting so now let's add the logout functionality to this darker button we have already created the logout function we need to Simply call logout and it will log out the user so on tap let's call odd service Dot logout and then we can simply navigate the user I will use push replacement me and we'll navigate the user to the login page and here we can also show a snack bar like so now let's try to log out from here so it shows logout and we are now logged out here we can create a check user page that will check whether the user has with the Firebase on dot instance as a current user or not let us create a stateful widget it will be check through sir here we are going to be returning circular progress indicator and inside our init state foreign function that will either return true or false if it's true then user is already logged in and if it's false then we are going to ask the user to log them first here let's use odd service dot is logged in then we are going to be getting a value either true or false so if the value is true then we are going to navigate the user to the home page directly we'll use push replacement name here because we don't need to come back to this check user page again and else what we are going to do we are going to we are going to navigate them to the login page let's act this inside our home main.dot file inside our root type inside our root directory first will be checking the user and then we'll perform the necessary step so let's try to restart the app now so it's taking us to the login page now let's try to create another account let's try to sign up here we are getting as account created and all the smarts are also working let's try to restart our app now let's see what happens now you can see after restarting the amp we are getting redirected to the homepage directly instead of our login page or signup page now let us just log out now add functionality to this login page it will be similar to our sign up page like first we are going to create a form sheet final key it will be a global key and it will have a return type of form state and inside the column we are going to wrap it with form and for form we are going to add a t it will be our Pharmacy and when the user press the login button we are going to validate all the forms formkey dot friend State DOT validate add the null check currently we have no we don't have any validators so simply copy them from our signup page now let's try to login but before that we have removed the height of the size box for both the texture so just remove them now let's save it now let's try to login we'll get this error now let's login now let's add login functionality simply we need to call the hot service Dot Login with email password so for email it will be email controller.txt password will be our password controller.txt now after we are done like our previous one we can simply check this if and else statement just copy them and paste it foreign and when we are logging it when we are logged in we'll be getting a value that we are returning so for this now the value will not be account created it will be the value like login successful so if our value is logged in successful then we are going to show login successful otherwise we are going to show the error so let's try to create the wrong let's try to create a wrong email and wrong password let's try to log into a correct email but a wrong password for this let us copy this mail and give it a wrong password and try to add some wrong password so here we are getting the errorless password is invalid or user does not have a password so now we are able to handle the error let's try to log in with our correct password now now let's try to log in with the correct password Here we are getting as login successful and it's also show and it's also showing the email of the user now that's great now let's work on the continue with Google function so adding Google authentication we need to add our shr1k so simply come to project overview and here click on settings project settings and from your we need to add a fingerprint of our shs certificate so we need to add our show one fingerprint so let me show you how you can add sha one fingerprint simply go to your local index and then users your users folder when you you will find dot Android folder and here you will find dot Android folder and if you cannot see this folder make sure that hidden files are checked in so here you will find one Android folder click here and here you will get one ADB key so first then we need to open commands prompt from this folder here first if we have this ADB key in most of the cases you are going to have the ADB key so for that you are going to run this command key tool Dash list Dash V Dash key store debug.esto Alias Android device key so simply copy and each Discord here it is going to ask for the password and for the default password is Android and here it will show the sh01 and sha256 key and in some cases if you don't have this ADB key what you can do you can use this command I'll be linking this in the description to create a new key but it should be done inside this folder and after that you are going to use this command and then add the password as Android it will show the new message one key and then it will show the new one fingerprint so from here simply copy the sha1 fingerprint don't copy the Extra Spaces copy come inside your project overview project settings and give add a fingerprint paste it and save it it will add the fingerprint now we are good to go now here we need to First write a logic for Google sign in we have already imported to dependencies for Google sign in now it's time to write the logic it will be for both for login with Google it will also be a future function it will be continue with Google here we don't need anytime here we are not expecting anything inside try catch we are going to do four things inside this function first we are going to create a variable it will have a return type of Google sign in account it will be nullable Google user will await and then use Google sign in Dot sign in next we'll use final Google sign in signing Authentication G ought it will be a width Google user dot Authentication so it will authenticate the user and the final one will be to obtain our new credential thank you final grids so it will be Google or provider Dot credentials here we need to specify access token it will be inside our Google geot that we have created dot access token and then we also need an ID token it will also be inside GR Dot ID token you don't need to memorize all the steps but you can simply copy them and paste them inside your code now after that when we are obtaining the credential we are going to sign in with the credentials so a weight Firebase or dot instance DOT sign in with credential and inside potential will add grids the credential that we are obtaining and inside catch simply we can add on Firebase spot exception catch a we can return e Dot message dot to string let's also make it as written type of string and here after we are signed in using credential we can return Google login successful now inside our login page we are going to link this click on service dot continue with Google and then we will get a value return we'll get if the value is Google login successful it means everything is correct we can move to the next step like this one simply copy and paste else it will be like this one simply copy and paste it instead of login successful we can show Google login successful now now let's try to login with Google click on continue with Google so it will ask you to select the email so choose the email and now you can see Google login successful now if you check here it's showing the email and it's also showing the first letter of the email so now we have successfully completed our Google login and sign up but we have completely done with our authentication path and for our sign up continue with Google button will also do the similar tasks so just copy all this and we need to paste this inside inside here now let's work on adding new data to our Firebase using firestore so we need to have this cloud firestore simply use flutter from add cloud firestore and it will install Cloud firestore dependency inside our app inside our home page we are going to be creating a floating action button for now on press 2 are going to do nothing but it will have a childless icon iPhone store contacts and you can have an icon off person and and yo let's write the logic inside our controllers we are going to be creating a folder current service says dot dot here we are going to create a class services code service and before starting first we need to get the user so let's create a variable user that will have a return type of Firebase user Firebase auth Dot instance dot instance dot current user so if it exists so for that reason we are using nullable now first logic we are going to add new contacts to file store before that first we need to go to our Firebase console and from there we need to go to our firestore database here we need to create a new ISO database click on create database look let's choose production mode and from here select the nearest location for me it's Mumbai get created till that time let us write the logic future add new contacts it will have a string name spring phone string email here we are going to use try catch and use a width Firebase file store make this async first and then Firebase files to dot instance now what we are going to do here we are going to be creating a collection of users first so here we are going to call collections and first one will be our user and inside users we are going to create a document of user ID of this user that is logged in so first let's add a document ID the document ID will be the user ID of the user so it is an inside user Dot uid and then we are going to create another collection it will be contacts and then we are going to add data here it will be a map of data for now we can create a map like map of spring from a dynamic data so data will be first name let it be the name that we are receiving email the email that you are receiving and phone the phone number that we have received here we are going to add the data and then we are going to return and then catch we are for now let's just print it document added and here we can print e dot to string this was the logic to add the new contact inside of firestore now our firestore database has been created let's start by adding a new contact now in The Floating Action button that we have created will open a new add contact page so let's create a add contact page it will be a simple page that will have a scaffold Abba will be the title text of and contact and let's navigate using Navigator dot push named to the add contacts page and we need to also Define our ad route inside main.doc file now let's check it so it's opening to add contact page here inside body will have a column and children we can copy the text form field that we are using in login and sign up here we are only going to be needing the validation on the name and rest email and phone number are optional so let's first add three text editing controllers first one will be on main controller second one will be our email controller and last one will be our phone controller here first one will be the hentai's name and it will have a control of name controller so second one will be second one we do need a validator and for first one if value is empty then we are going to show enter any name and here we don't need validators and both of them second one will be phone number third one will be email you just modify the controllers and sized box to add some spacing and then we can have a button like this one first will add the size box and then we'll paste our login button on on press will have some different functionality and it will not be login it will be create here we are getting bottom overflow to fix it we need to add head and side single child scroll here we need to also add a form key for some validation it will be Global key and have a return type of form state and inside column we are going to wrap it with form he will be our form key and here first we are going to validate our phone key I'm here first we are going to run all our validations okay let's check it you know it's giving us an early name and all the other fields are optional if user does not want to provide then that's okay now here let's try to create a new contacts by the logic that we have written it was inside current service foreign service dot create add new contacts name will be our name controller.txt phone will be our phone controller of text and email will be our email controller.text now let's check out the work console and From Here let us try to create a new contact let's try to create it here we are getting some document reference exceptions let's try to close it and run the app again let's again try to create another contact we are getting some right field permission denied so one thing I think that we need to change the rules here read and write the set to false so we need to change it we need to check if request it means that will only allow read and write if our request.aut is not is equal to null means user need to sign in otherwise they are not going to write inside database just publish the rules now rules are saved it will take some time to propagate till that time let's try to restart a till that time let's try to create the user once more so now we get as document added so let's go inside our data now we can see here we have the users here we have the user ID and inside we have another collection contact and there we have a document here we are storing the email the name of the user and the phone number of the user so it means that we have complete one functionality of our app like creating a new document like when we are creating it after that we'll be redirecting the user to the previous page we'll just simply use Navigator dot pop and after we are adding now we are adding documents but we also need to show them inside our home page to do that let's write the second logic to read the documents inside our fios2 we documents inside file store it will be a string function and it will have a return Type of Way snapshot let's make as get contacts make it async star because it's a string function here we are going to use Firebase files to dot instance dot collection The Collection was users and after that we have the dock ID similar to this and then we have the collection contacts so just copy it now it is done let's store it inside of our contacts and then we are going to return the contacts so let's use yield contacts foreign snapshots now it's okay now this will be enough to display our data inside our home page so now let's display all the contacts inside our home page here the body of the scaffold will be a stream Builder and it will have a return type of query snapshot here we need the Builder so it will be context it will provide us context and snapshot foreign text something went wrong if snapshot dot connection state snapshot dot connection state is is equal to is equal to connection state DOT waiting then show a text as loading and else we are going to return the data that we have inside our snapshot so simply use return foreign will be snapshot dot data dot Docs we need to add null checks dot map it will provide a document of document snapshot so use document just use map spring comma dynamic data the data that we are going to get it will be as document Dot data I don't know check first I don't know check here and let's return as map spring comma dynamic so the document data that we are getting we are storing that inside the data variable that we are creating and we are changing the form of data to map that will have a string as key value and string as key and dynamic as value and here we are going to return foreign then convert it to list and then to cast so it will just convert it to a list and then it will also cast now Insight list type will have a leading or Circle Avatar child will have be a text data and the attribute towards name now let's try to learn the app we are getting null Check used on null value it means we have something wrong inside our so the thing that we have done wrong is that we have we are using stream Builder but we have not provided the Stream so for that reason we are getting used on null value here the stream will be the string function that we have created it was inside current service Dot get contacts now let's try to restart our app now we can see we are getting some kind of data but but we need to complete the title will be text data at tutor's name here we are using the first character for that reason we are using 0. and the subtitle will be fixed data on gas now it's working now we are also going to be having a trading it will be your icon button icon will be icons icons slash call and on pressed we are going to do nothing for now so now we are successfully able to create and read the data let's try to create one more account also make this column to Center you can see after we are creating the data our document is getting added instantly and it's also displaying us the data so you can see the order is not correct we want the water as alphabetical ascending to descending so we can do that by simply adding order by and it will be named now you can check that the audio is now correct let's try to update the contact first we are going to write another logic update a contact it wouldn't be similar to our add new contact so just copy it and paste it here it will be update contact here we are going to express name form and email and then we will call firestore dot instance and this was the location and instead of add it will be update but before that we need to specify the dock ID so the dock ID is unique for every document we need so we need to also expect a doc ID now we can update the document and here we can display us document updated inside our console now let's add our own tab functionality now we also need to view the contact when you're depress it like it should show the main email and phone number so we are going to use the we are going to create an update contact page that will show that will show the profile and make the user wants to update it will also give a option to update so let's create an update contact page and Europe make it a stateful widget the UI will be similar to our ad contact so just copy it and paste it Geo instead of add contact it will be instead of add contact it will be update contact and here we are going to call service dot update contact here we also need to pass the document ID so let's just expect a document ID when we call the update contact page foreign document ID it will be required so it will use it dot doc ID now on on a functionality we are going to call the update contact page so here on tap we are going to navigate to the update contact page so for that we'll use Navigator Dot push this time we are using material page now because we also need to send data and Doc ID was inside document dot hide now let's try it so it's opening up the update contact page but it's not showing us the contacts for that what we can do we can also pass all this data and make it required like me phone an email make them required and then inside the init state we are going to assign name controller dot text is equal to the value that we are getting and this will be same to the other text form field now it's okay now we need to also pass name so name was inside our data name phone was inside our data phone and even was inside our data email now you can also see the data is also coming now let's try to update so you can see data is also getting updated now we have also completed the update part of our app now let's write the logic to delete a contact from our file store foreign function delete contact zero we need the dock ID make it async use try catch you call Firebase firestore Dot the same thing like this one dot doc ID and then we are going to specify delete it will delete the contact and then we can print inside our console that contact deleted then we can also catch if we have any error we can print the error to string inside our console now let's add the delete button inside our update contact page here inside our update contact this will not be created will be update and after the update contact we are going to have the delete button let's make it as outline button and here we are not going to validate the form we are going to call service dot delete contact document ID was inside widget dot doc ID so now let's try to delete this contact so you see our content is got deleted so this is the way of deleting a single contact so now I hope that all the correct functionalities are clear and now let us add a search box so that we can search the contacts from our firestore database for that we are going to have a search box inside our home dot dot here inside let us have it inside the app bar and inside bottom of the app bar you will have a preferred size will have a preferred size and preferred size will be like size of the year we need to specify the width and height let's give the weather's media query dot of context dot size dot well 80 of the web and height will be let's give it 80. now it also requires a child so for now let's give it a container empty container let's save it now we get the bottom Abba as this much of size I think it will be enough for our search box inside the container inside the container we are going to have a child of size box or let us just copy it from this one here will also have a text editing controller it will be our search controller we don't need any validations here the label will be searched and it should also have an icon prefix icon it will be icon icons dot search and we can also have a suffix icon it will be iPhones Dot close but we don't want to show this close every time so for that we can write a logic for that we can write a logic if our search controller dot text is node empty then we can show this icon button and inside icon we can we will be giving the icon of icons Dot close so here if it's not then we are going to return node so if our search controller.txt is not empty then we are going to show the close button otherwise we are not going to show the close button so let's test it so it's not showing we need to set the state otherwise it will not show inside our text form field on changed value we are going to set state now let's check it yes so now it's working when we are clicking we are getting the close button so on clicking the close button what we are going to do we are going to close the search so we are going to change search controller Dot clear now let's test it so it's just clearing the search let's add a padding of age and sets dot symmetric vertical protein to eat now it's okay now we need to create the search functionality inside our app for that when we type something it should load the data like the search but for that let's just create some dummy contents now you'll find one problem that we are getting that when we press the close button it's closing it's clearing the text but it's not closing the focus that we are having inside to search box so the Google still Focus or change the focus what we can do so it will be search controller it will just change the spelling and we are going to create a focus node Let It Be Focus mode or let me search Focus mode what we are going to do we are going to set the focus node of this text field to search Focus node and while clearing the search controller will also clear will use search Focus mode Dot unfocus now just notice the change now if we type something and if we click on close it will also close the keyboard so now we are done now what we are going to do we are going to add the search Logic so come to code service again here when we are reading all the contacts we are also going to add such for that will be expecting a string out search query let's be required or we don't need it let's make it optional so here we are going to modify the code you will expect some search query and then with the help of that now to add search functionality in our app what we are going to do we are expecting search query that is an optional parameter and we will change this to contacts query and we'll remove this snapshot part and then we are going to add a filter to search here we'll check if the search query that we are sending it's not equal to null and search query is not empty in that case we'll perform this first we are creating a string end the string end will contain our search query that we are sending plus and if you make X unit Escape character uf8ff what it does it basically telling that the string n should contain our search query and then it might contains any character we don't care so it's basically done for searching now um use context query and then it will pass contacts query.where our keywords name and then is greater than or equal to greater than means it's a big match and lesser big match in that case will give us search query and is less than to the search engine that we have freedom let's make it as search and and now our contacts will be contacts query Dot snapshot now what we are doing we are sending a search query it's an optional argument and if it's not null and it's not empty then we are creating a search end that will have the search query plus an escape character and it will search greater than or equal to the search query that we are passing and it will search less to the search query of the search end and then we are returning the query snapshots so let's just modify our home let's modify our home page currently inside stream we are calling this function so we'll not call this function here as instead we'll create a stream it will be a late stream of pretty snapshot and it will be on the score string and in our image state we are going to initialize the string to correct service dot get contacts now it's okay now since we are using stream then we need to dispose all the widgets that we are done on closing so simply call dispose we need to dispose the search Focus node now here we are going to create a search function to perform search but before that let us add some dummy contacts so now it's okay we have added some dummy contacts foreign we have added some dummy contacts what we are going to do we are going to perform search on net inside the search contacts we are simply going to expect search and then we are going to call stream and initialize the string to good service dot get contacts and you will provide search query as search now let's test it so now we are specifying the search and here when we are changing inside and when we are changing some text inside our search box we are going to call this search contacts function and we are going to specify the value and now let's try to test it here we are not getting any result now you can see that if we search anything then we are getting the result so now our search functionality is also working let's also add the function to this button like when we press this it will call the user it will call the contact so for that we need to install URL launcher for that we need to add URL launcher dependency simply use flutter Pub and URL launcher foreign now after we now after we have added URL launcher and we need to set the string here again to cloud service Dot get contacts so now we will find that when we use this and when you press it again we get the file step now one thing you will be noticing that when we search something and when we don't get the result and when we close close it we are not getting or showing any result so that's wrong when we close it it should set the state and show all of our contacts so for that what we can do first we can show we can set the stream controller to cloud service dot the contacts and now if we try to some search something and then we close it then it will show all of our contacts and if we don't have any contacts like a new user will not have any contacts in that case we can show you we are showing a list view Builder so if our snapshot Dot data dot Docs dot length is equal to is equal to 0 it means we don't have any document in that case we can show a text as no contacts found else we are going to show them let's do here we need to add a null chip now let's try to search if we add some random value it will show us no contacts found and if we close it it will show no contacts found so now it's okay if we type some random it will say no contacts from and if we close it so we need to set the state after we are here we need to also set the state now let's try let's add some random value and let's try to close it then we are getting the values so that's all now to add a call feature to all of our contacts what we are going to do after we have installed URL launcher we are going to open window dot file and then site and inside there we are going to write a function to call the contact using URL launcher first we need to write the function that will call so let's add it all user here will expect the string phone number let's make it async and then the string URL will be 10 and the phone number if a week can launch URL here we need to provide the URL it will be inside URI dot pass and we need to provide the URL and then we need to launch URL our URI QR I dot Parts okay we need to specify the URL else like we can draw an error code not launch dollar URL now when we press this call button it should call this call user function and we need to also Supply the phone number so let's add the functionality to the call button so this is the call button currently and on press we are going to call the call user function and here we need to specify our phone number our phone number was inside data oh so now let's try to test it in any of the contacts when President's call Button it will open the dialer and it will give an option to call so that's really great now let's try it again so this way we have just completed our contacts app and all the functionality in now app are working so that's really very good thank you

Channel: Snehasis Ghosh

Views: 670

Keywords: Snehasis Ghosh, flutter, flutter tutorial, flutter firebase tutorial, flutter firebase auth, flutter tutorial for beginners, flutter crash course, firebase, firebase crud, firebase auth, Flutter Contacts App, Firestore Database, Flutter Firebase Tutorial, Flutter App Development Firebase Authentication Tutorial, Flutter and Firebase Project, Google Sign-In Flutter, Contacts App Tutorial Firebase Email/Password Authentication, Firestore CRUD Flutter, Firebase Data Storage

Id: _eVpCZyqjtM

Length: 132min 37sec (7957 seconds)

Published: Tue Sep 05 2023