Chat App in Flutter and Firebase | Tutorial for Beginners to Advance | Android & iOS (Latest)

[Music] hello everyone and welcome to the master class of flutter and firewall so in today's video we will be creating a group based application in flutter and firebase so here on my screen you can see we have this ios simulator and also our web app running and also on the right hand side you can see we have firebase project open for us and we have two accounts right now in our database through which we can sign in so let me just use the first account here this will become backslash dot flutter address gmail.com let's say i enter wrong password so it will show me the password is invalid so if i enter the email again and log in with the correct password then we should be redirected to the home screen one two three four five six and now if i click on sign in we should be redirected to our home screen and here you can see we are on our home screen and currently we have only joined one group so we are shown with that group it is flutter community and now let me just log into the other account which is this shivan shadow gmail.com on my flutter web version so if you can see we have a don't have an account section if i click on register we can also register our account but we will not be doing that you can just click on login and here if i write shivan gmail.com password can be one two three four five six if i click on sign in then we should be shown to our home screen and yeah currently in this particular account uh in this account shivans jumanji gmail.com we don't have any group so that this is the reason it is showing me you don't have any group tap on the add icon to create a group you can either create a group so if we click on this icon we will be shown with a pop-up to create a group let's say i write this as react community and i click on create and this will go and create the particular group for me and if i click on this group right now there are no messages if i click on group info you can see we have the admin as shivan singh which is the current account which has been logged in the members are this now let me just go and search for this react group in other account which is our backslash flutter account if i search for this react community and if i click on search we should be shown with this particular group and administering if i click on join successfully join the group and as i join the group inside this group information also you can see a new member had been added now let's say i write hello backslash [Applause] click on send the message has been received and here if i write this hello shivanj so this is also working fine now we can go to our home screen so now let's say we go to this react community group in both of our account if i click on this group info if i exit this group then our data from that group has been removed and right now you can see the current member in this react community is only backslash flutter this is everything that we'll be building in this tutorial if you really want to know how to do email password authentication how to do credit operations on a database how to work with stream builders how to handle different errors of firebase and also at last using shared preferences then this is the right video for you so without any further ado let's get started okay so before we start creating a flutter project and get into coding i really want to tell you something most of you are requesting for instagram clone video and flutter and firebase so if you guys help me reach 5000 subscribers currently i am on somewhat 4100 so if you guys help me reach 5000 subscribers then i will be posting the instagram clone in flutter and firebase with the provider state management on youtube soon so now we will open up a terminal and here we will be redirecting to the directory where i usually create all my flutter projects for youtube so i i'll write cd documents and then i will write this command flutter create chat app firebase and i'll just wait for this to finish and by that time i just wanted to show you something i have attached all the screenshot for the design of this particular project so if you see this is our login screen then we have our registration screen then we have our home screen where we will be showing all the groups that are registered with this particular account then we will be also having this drawer menu which can be opened from this button and we will display the profile page which is like this then this is the chat screen then we have the group information screen where we have list of members and a button here for exiting the group and this is the pop-up menu for creating a group and then we have the search option here so these are all the screen shots attached in one big file so i will just open this on some other desktop screens and i can go to this screen and now let me go to the particular project that has been created by flutter so i will write cd chat app firebase and i will open this in my visual studio code perfect now what we can do is we can close our terminal and here on my project you can see we have few folders which are of no use to us so we'll be deleting all of them like this mac os folder and we have this windows folder and also this linux folder so we have deleted all of these folders now before we start adding firebase to our project i really wanted to showcase you some of the extension which are very helpful obviously we will have this flutter extension and alongside this flutter extension you will get this dart extension also added and the important extension that i really want to show you is this prospect assist so what this extension will do is it will give you the ability to add all of the packages from this visual studio code window only so i guess everything is done here so if you go to a main dot dot file now it's time to add firebase to our project so for writing purpose i will open up my chrome browser and here i can keep it like this and if i write firebase we can go to this firebase console you can directly go to consoles.firebase.google.com if i click on create a new project here i will write the name of the project as chat app letter and click on continue for this practical project we don't need any google analytics so we'll be disabling google analytics here and click on create project so by the time it is creating a project for us what we can do is we have the main dot dot file layer and also our perfect ml file we will be adding all the packages here so i guess okay the project has been created successfully if i click on continue now inside a firebase console we will be enabling our authentication section which will be used for email and password authentication and other than the authentication system will be also enabling our cloud file store which will be our database so here you can see we have this get started by adding firebase to your application so if you click on this build folder here we have this authentication tab we can just enable this get started i'll just wait for this and now it is asking me to select a particular provider through which i am going to provide the sign in to a user so for this tutorial we are proceeding with email and password authentication in future if we continue to work on this chat application we will be enabling google and facebook also but as of this tutorial we will have email and password so the authentication tab has been done now if you see this firestore database so firestore database is the cloud database that is offered by google currently we are in the spark plan so we don't need to worry much about how much data we can write in this particular cloud file store so now our application backend is powered through this cloud file store so we can just click on create database and we will start this in a production mode and we will select the us central as a default location which is already offered by the google and then it will take a little bit of time to start this so before that let me just create a to-do here so this will track all of the things that we'll be doing this is txt okay so the to-do will be adding firebase to android then to ios then to web so i guess first of all we will be doing all of these things we we'll reload the page okay your database is ready to go just add data but before doing anything one important thing that we have to do here is we will click on this rules tab and here modify some of the rules that comes pre-installed by firebase so here if you will see we have this allow read comma write if false either you can change this to true so it will be somewhat like if true but then this is not a secure way of handling your database so the best practice that is generally considered or that the suggested by google is to write this command request dot auth is not equals to none what this line particularly means is we are only allowing read and write functionality to the user who have already signed in using the authentication using the authentication provider of firebase so if someone has access to a database without the authentication on our firebase they will not be able to read or write the documents here so now we got authentication and firestore database setup now if you click on this project overview right now we don't have any application added so we will be proceeding with that thing first of all we can click on this android now for adding the android to your firebase project that there are few requirements first of all they are asking for the package name then this sha signature so the way you can get your package name is and remember all of the shortcuts or the keys that i am pressing is displayed here so you can just see what i just entered i can just close this and now for searching anything you can just write command np or rather controller p in windows and here i will search for this android manifest file and do check this android app source and a main folder so you can either go from this section also and now we have the package name so we will copy the package name and paste it here and as the nickname is concerned so we will write chat apps firebase and now one of the important thing is generation of fha signature so if you are expert in generation of this ssh signature then you can directly uh click on this link authenticating your client this is the page offered by google in which they have documented all the code for setting up the ssj signature but this is for someone who is already inside this development thing but if you are totally new then i will definitely suggest you to watch this video which is displayed on the right side of your screen for sha signature in which i have covered the generation step for our windows platform and also for our mac os platform and that tutorial is designed for complete beginners so you can just see there so now what we can do is i will open up my terminal and i will go to this android folder of mine and here i will write this command key tool list key store the keystone name is debug.keystore and click on enter now this will ask for the password for the keystroke i will write android and then we can copy the sha-1 signature and paste it here and i click on register application so now we got the application register the next step it is showing us to download the configuration file so we can just click on the download google services.json button and after we click on that button it will download a file to our pc and we just need to drag it to this app folder and remember to remove any of the items which are after this services line so this will become somewhat like google services.json if you are not able to do it in our visual studio code you can just click on this reveal in finder and then go to this app folder and you can directly rename from here so we got this google services.json file added now the other thing is we click on this next button now this is asking us to add these lines inside our build.gradle file so there are two types of build.gradle file first of all we will have a project level build.gradle and then an app level build.gradle so the app level will be placed inside this app folder and the project level will be inside this android folder so first of all we will go and configure our project level so we will go to this build.gradle and if i see okay this is the project level we'll copy this class path paste it here and i'll close that if you go to the app level inside a wrap level we have to add these two line apply plugging but if you will see this com.android.application is already present so we don't need to add that we just need to apply add this line google services line we'll paste it here and the last thing is this implementation part so we'll paste that too if i click on save everything has been added to work inside this android section but i really want you to add these things also inside your app level build.gradle so the first thing will be to change the minimum ldk version to let's say 21 and we can enable the multi-tech support perfect we can just close this and now if i click on next and click on continue to console we got the application added here now it is also asking for xbj 256 signature so if you open up your terminal here you can see we already have this sha-256 signature so we can just copy and paste it here right click on save and now we can just exit this terminal window and we got the application added so the android part has been successfully done now it's the time for ios part so for adding the ios application what we can do is we will just click on add app we'll click on ios now to get this bundle id what we will be doing is we will open up our xcode i'll just wait for my xcode to open we can just close this tab also so we got our xcode open here and now here you can see we have three options either we can create a new export project but we don't need to do that we already have a project created through flutter command we'll just open a project and now we have to open that particular project so it was inside my document folder and then if you see this chat app firebase okay and inside this we have our ios folder we can click on open and now xcode has opened up project for us if you click on this runner here we have the bundle identifier and we can just paste it here we will write this as chat app ios we don't have any app store id this is totally optional also this is also optional but i prefer naming the application okay we'll just wait for this to finish so now we got the application added now it's time to download the google services info dot pls file here we just need to drag it inside this runner folder and do remember to check all of these items copy item we have needed create folder references and add to target and click now if you click on finish so we got the file here we can just either show in finder and from here you can just rename this remove any of the items that are after the info line you can also rename from here too perfect you can just close your xcode window from here you can click on next next next and continue to console see we got ios app done we got the android app done now it's time to add the web application so if you click on add app and here you have the option to add the web application so i will just write the name of this as chat app web then click on register app we got the application register and now it is showing me to add the firebase sdk so we have all of these value but before adding these values i want to tell you something important so we can just close everything from here and we can get back to your visual studio code and right now inside our main dot dot file so inside our main.dat file we will delete everything that is present here code it according to our need so we'll write import material dot dart and here we can write void main and then this will be a run app and we have to create a stateless widget for the run app thing so this will become my app and here inside our run app we will like my app and now we got the stateless widget created so we can just return a material app here now the important part is to add all the firebase packages so what you can do is if you are on a mac you just need to press command shift p and if you are on a windows you just need to press ctrl shift p to open the command palette and here if you write pubspec assist the extension that we edit there are two options for that add or update dependencies or add or update developer dependencies so we will just create click on add or update dependencies and here the packages that we want are firebase auth firebase core then we have our cloud firestore and at last we will be also using our shared preferences for storing the login state of user so now if i click on enter this will go to the pub.dev website and search for all these packages and fetch all the current latest version and add them to my perspective ml files here you can see we have the cloud file store the firebase auth the firebase score and the shared preferences successfully added to our project now the important thing is we have to wait for firebase to initialize inside our application so this will become somewhat like first of all we will initialize all the widgets so through this line we got all of the widgets initialized now it's time to await for firebase but this await will only work with async so we will write async here and this awaits firebase dot initialize app and in this way the firebase will be successfully initialized to our android and ios platforms but remember we also have our web platform too so the issue is let me go to my to-do file if we write files if we write this for if we write firebase dot initialize app then this will only work for platform like android and ios but we also need the web version also so for running it inside our web application we have to write this app initialize and then we have to provide some options these options will be firebase options inside a firebase option we can provide values like api key the messaging sender id which you can see if you go to this project section if you click on this chat web app we have the api key the auth domain the project id the messaging center id so we have to add all of these options here so we can just do this if you click on this initialize app here you can see we have this option so let me write the options here and write this firebase options then we can provide api key app id messaging sender id and all of those values but the issue is if you write this firebase dot initialize with an option parameter then this will only work in web version and not work in our android and ios so to fix that what we have is if you import this package import foundation you don't need to add any package that is discount by default inside of flutter libraries you come here and write if k is web so this is a condition that will check the current platform in which the application has been run so if the current platform is a web application so then we will run the initialization for web else we will run the initialization for our android from ios so for our web version we have this thing we'll paste it here and for our android and ios we will write await firebase dot initialize application and that's it so now it is asking for the api key the app id the messaging sender id and the project id so we either you can directly paste it here but i will suggest you to use the best practices that are available in the community so here if we write shared and if you write constants dot dot and we can create a new class this will become constant and here if you write static let's static string app id then other things that we will be needing here is if you write this split right the other thing will be app id api key messaging sender id in the project id so we can write static string api key then we have this messaging sender id and at last we have our project id and to get all of these values you need to open your chrome browser if you are on the project overview you can just go and click this settings button and here inside the project settings you have already added the web application so you can get these values here you can just copy the api key paste inside our api key then we have the app id and we can paste it here and then we have the messaging sender id you can paste it here that and at last we have a project id we'll copy this and paste it here so now these values are completed so we'll close the constant dot dot file and here inside the main.file we will write constant so this will import the constant file and here we will write api key this will become app id and let's say messaging sender id and this will become constant.project id so this way we have the firebase initialize for our web application for our ios application and also for our android application so now what we can do is we will run this inside our simulator so i will just go in here and write this start ios simulator and we have our iphone 11 pro max so we can just close it like this you can just shift it here okay so now we got a simulator here one more important thing is if you are running this in your simulator then you have to do one more necessary step you just open up your terminal and here inside this chat app firebase you just need to go to this ios folder and inside your ios folder if you see the files we have a pod file so we just open the port file and here inside a quad file as we have added the cloud file store the firebase or the firebase core inside our perspective file so we would have to edit the spot file to change the minimum sdk minimum ios version to 12 and now we have to proceed with the port install but if you are on a mac m1 then you have to run this command arch x86 64 pod and this will be for install but this is only for the m1 users so if you are not on an m1 you can just simply go to this folder then ios folder and here you just write pod install after you have changed the minimum version so as we are on our m1 macbook air so we will write pod install and then this will proceed with installing all the pod files so these spot files are fetched from your perspective file i mean the the reference for those are fetched from your perspective file so we'll just wait for this generating ports project and we got all the port files added now we can just exit close the terminal and here if you see this parts we have all the firebase added the firebase our firebase core then we have firebase firestore which are which is our database and that's it so if you close this and then at last you just need to run without debugging select dart and flutter and just wait for this to run on your ios simulator if you're running this for the first time it will take a little bit of time somewhat like four to five minutes because our cloud file store has 5000 lines of code so for the first part for the first time it will take a little bit of time but this condition is only for your is simulator if you're running on your android device then it not it won't take that long so we'll just wait for this to run and after that i will be back soon okay so now you will see we got application started and it took a good amount of time for me to start this and now if you go to our main.file here we have this return material app app and here if we first of all disable this banner debug banner okay and now we have to define our home so for our home section here first of all let me structure all the folders that we will be having inside this project so there will be a folder which will be with the name helper with this helper we will be managing our shared preferences then we will have another folder which will be services folder inside the services folder we will have our auth service and our database service so with that service what we'll be doing is we will be proceeding with sign in with email and password and with the database service we will be making the crude operation or our database other than that we will have our widgets folder in which we will have different widgets and we will have at last our pages folder in which we will have our home page the profile page and everything so now first of all we will go to our pages folder and here i will create the homepage.dart file and i will import material. and create a stateful widget which will be home screen and here inside my home screen i will return or rather not home screen let me just edit this i will write home page because this will match the file name and here i can return a scaffold okay and now inside this home we will write home page so let me open the screenshot that we have here you will see we have the login screen shown to the user who are not signed and the phone screen shown to the user who are already signed in and now the check who is signing into the application and will not sign into the application we will be using the shared preferences now the way shared preferences generally work is first of all when the login will be successful then we will be storing a particular key inside device storage and every time we go and open the application we will be checking whether that key exists if that key exists then we will redirect the user to the home page and if that key doesn't exist then we will redirect the user to the login page now if you go to this helpers folder we will be creating a helper dot helper function dot dot file here and we will write class helper functions now we will have two things first of all we will be saving the data to share preferences i'm writing sf and we will have getting the data from sf and other than saving and getting data which will be saving are the keys so we can create a key this will be this will be string we can write this as user logged in key so this will be logged in key then we will have another key which will be user name key this will be user name key and at last we will have our user email key so this will be user email key so now these are the three keys with with which we will be operating with our shared preferences either we will be saving them or either we will be retrieving the modified value of these keys value modified value of these keys so first of all if you go to your main.dart file remember we created this as a stateless widget but the problem is if we keep this in a stateless if we keep this as the stateless widget we will not be able to use our init state next state is a function that will be loaded when every time the particular class is called or every time this particular widget is called so that function is not available in the stateless widget so just click on this button and convert to stateful widget and now as we have converted this to stateful widget here you can see if we write init state so we are shown with the init state function and now what we want is as soon as this main.file is loaded we want to call our function which will be getting the user logged in status so whether user has been successfully logged in or not that particular status can be fetched from here so we can create a function here this will be get user logged in status this will be an async because we will be calling our helper function the one that we created okay so we will write await helper functions but we don't have any function inside this helper class for getting the login status so we can just go in here and getting the data from sf so we can create a new function here this will be first of all a future function with a boolean value boolean can be not null also where we will write get user logged in status and this will be an async because we are calling our shared preferences so we like share preferences sf await share preferences dot get instance and now we will return sf dot get boolean value this boolean value means if the particular key exists inside our shared preferences then we will return true and if that particular key doesn't it does not exist inside our shared preferences then we will return false so the key is this logged in key so we write user logged in key and perfect and now to check that we will write helper function dot get login status and then we will take that value take that value and check whether that value is not null if that value is not null that means the particular value will be either true or false then we can assign that value to our boolean value which will be is signed in this will be false and here we can write is signed in is equal to value and now if you go in here inside our home here we light is signed in if the particular user is signed in then we will be showing the home page else we will be showing the login page but we don't have the login page as of now so we'll go and create a new file this will be login page dot dot or rather we can create a new folder inside this auth folder we will place all of the files which will be login sign up and all of these so this will become login page dot and here what we can do is we let import material dot dot and then a stateful widget which will be login page and then we can return scaffold and check this we will write a center tab text os center text as login page we'll close this scaffold here and inside this home page we will also do the same thing we will do a center check whether this center text will be home page and now we just need to import this you can add a const value here const value here too and if i click on save and rather reload the application we are shown to our logins page and now as we are on site our login page here you can see the shared preference logic is successfully working so we will be working on shared preferences more as we move forward in this video but right now we just need to design a login page first so we'll go in here we'll open this thing and what we can do is we will get a login page here let's say take a screenshot for this and i'll open that screenshot side by side to this we can minimize this folder this is the screenshot i guess okay and now let's start coding this so we can just return a scaffold click on save and now inside a scaffold the thing that we can do is we will write this will be inside the body tag and for that form we have to assign the form key so we can create we write final form key then this will be a global key with a type form state and we can assign this key this will become form key and the children can be our column and for that column we will have main x's alignment at center and also our cross axis alignment as center and we can assign the child as let's say groupie so right now we have shown the groupie here so what you can do is we will wrap this with a widget this will become padding and for our padding we can write can provide a symmetric padding here this will become symmetric so f for our horizontal is concerned we will assign a value let's say 20 and for a vertical let's say 80 now let's assign some style to this so this will be font size can be 40 font weight can be bold perfect now we can provide a site box of 10 height 10. and this padding can also be wrapped in a single child scroll view what the single child scroll we view will do is it will create a scroll bar if the screen is overflown in any of the devices and here we can assign a const value this can also be const and now we can have another text which will be login now to see what they are talking and we can provide some style as let's say font size can be 15 and a font weight can be 400 and we can assign our image here so this will become image dot asset now for image part we just need to first of all go to the project that i already have so these are all the images i will just link them in the description also if you open this particular chat app folder so for opening that you can just go and click reveal in finder and now we are inside this chat app folder we will paste the reset folder and also add this inside the project so for adding that we can just go to our prospect ml file and uncomment these things and here this will become somewhat like assets you can click on save i guess you have to provide a comma here and now frs name is concerned so we will let assets and let me check the name this will be login.png so we'll write login.png if i click on save we got the image added here successfully now we got somewhat of the design created so we have the groupie and login now to see what they are talking then we have the image added here now the next thing is to add this text field here so for adding the text field what you can do is we'll write text form field and now for a text form field let's say we will write decoration then for our decoration we'll be creating a new widget here so we can just remove this i will click on save for now you can see we have the form field here but i'll not be using this because i would have to design this thing i'll go to a widget folder and here i will write widgets dot dot and here inside our widget folder we will write cons value of text input decoration this will become input declaration and this will only work if we import material so now it is not showing me any error we write a label style so this will be text style and we can assign the color as colors dot black and now we have to assign the border so there are three types of border in which in this we will have a enabled border with when a particular user clicks on this particular text form field then that border has the property that is enabled property which means the particular field is enabled and if let's say we just reload this and right now there are nothing is clicked on this so this will be our focus border and if we do any error then we will also have our error border so let me first of all put this focus border this will become outline input border and inside our outline input border we will have border side will become border side dot and we will assign the color let's say i'll just copy the color from my folder this will become color and which can be two perfect and one more thing let me go to my constant file okay and here inside our content file we can just also mention our primary color so this will become final primary color we can place this value here for this color thing we have to import material dot dot and now we can provide a const value here and right now the primary color will be somewhat uh like a blue color if you see this let's say i am here inside my login page and here if i write the app bar so that bar will be with the blue background because the primary color is a blue so we can go to a main.file and here we will write theme and this will become theme data and we will change the primary color so this primary color will be constant dot primary color and we can also provide a scaffold background color and call our background color as keen dot primary color we will be shown with the orange button here orange background so we can just close this and now let's say i will be back to my widgets folder inside my widgets folder we got the focus porter done so now let me see whether this is working fine or not so i'll go to my login page and here inside my decoration i will write text input decoration i click on save we have the focus border copy paste it three times so this will become enabled border and this will become error border click on save so we got the border here now for our enabled border we will be doing this color okay i guess i would have told you some wrong information let me just see this thing also the focus border okay so the border to display when the input decorator has the focus and is not showing any error and what about this enabled order okay so when this border is enabled let me just see how this will change if you write colors dot red and click on save or rather colors.blue okay so the color has been changed this is because currently i have clicked on this button and it is in the focus mode if i reload then i will be shown with this orange here if you change this value to red or rather let's say purple so this is the enabled border with which means if the border is not clicked the by default border will be this enable border if you click this then it will change to blue if you got any error then it will change to red so this was some of the basic information that i wanted to tell we can just undo everything perfect we'll go to our login page and here inside a text input declaration what we can do is we'll write this copy with so we can add some more values the more values can be somewhat like here will be labeled text this will be email then we will also have a prefix icon this will be email and click on save right now the color is black let me just change the color perfect okay so i mentioned this as prefix this will become prefix icon so now this is okay label text is this email i can decrease the font weight so this will become let's say style or the other font weight this will be font weight let's say 500 this is too much so you can do 400 this is also too much so 300 yeah 300 is okay so we got the email field here we can just copy and paste this here this will become password prefix icon can be locked and now we need to provide a little bit of size box height here so this will become let's say 15 we got the height here added and after that i will have to go in here and write this as string email so this will be an empty string and as far as password is concerned so this will be an empty password let me show you why i'm doing this so if you go to a text form field the one with for our email and here if you write on changed we can take the value which will be called when the unchanged value is done and set the state for our email we will go and write this email is equal to value if i click on save and you can also print the email here so that we can see it inside our debug console hopefully if i write this okay so right now if you see i write s and uh debug console has printed as if you go and write this shivan saying i did so every time i am changing the state of this particular text form field the new value has been assigned to our email variable so we can just delete everything from here and then the particular email will be a empty one so we can do the same thing for our password field also we'll place this here and this will become password is equal to value we can remove these things and now for a password what we want is we want the text to not be displayed to the user while the password is being entered so we can change this value as true so if you enter anything these value will be changed to obscure text and now one more important thing is we need to check the validation so we need to check whether the particular user who is entering the email is our right email or not so for checking that we can do a validator will take the value that has been entered by the user and then we can do regular expression so for the source i will be copy pasting this source let's say so this is from the you can get the expression from my github repo you can just copy this i'll just remove this from here and you can paste it here and we will like have match and what we have to check is the value then we can return a null if the value has a match or else we will return please enter a valid email and we can do colon here okay so this will be like this you can just copy this command or rather the expression from my github repo i'll be i'll be linking my github repo in the description so no need to worry about that and inside the validation for a password we don't need to check the validation with a regular expression we can just check the validation here such as so we'll come out of this unchanged unchanged block we'll take the value and now the thing that we have to check for our password is we have to see if value if the value that has been entered as length less than 6 then we will write password must be at least 6 character or else we will just return null as the same thing that we did above for email okay just reload and now what this validation will be here is let's say i create a function this will be login and here if i write if form key the form that we have not current state dot validate so we will check the current state of the form okay now if we create a button here after this text form field let me write elevated button on press can be the login function that we just created and this child can be test if i click on save i click on this so here you can see we are shown with the validation check here please enter a valid email and password must be at least 6 characters so if i enter abcdef if i enter this particular string the expression will check that this is not a valid email and as far as as far as password is concerned if you enter one two three four five six seven it will be only shown with the error in this email if we change this to one two three four password only then it will be also shown with the error here too so you can just remove this move this function also you can just reload so this was for the validation for our form key now what you can see is after the password thing we have our elevated button so first of all we can assign a side box with a height let's say 20 and this can be size box but inside this side box we will have the width as double dot infinity to take the most amount of space that has been available to this and we will give it a check less elevated button and for the child it can be text sign in with a little bit of style let's say style means there can be a color of white and the font size can be 16 i will click on save but this is showing me an error because we have to also pass the on press function here so this will become on press perfect so right now the color is the color for this elevated button is not the orange color that we need so for doing that we can go in here and write style then we write elevated button style from and we can change the primary color as team dot primary color we can click on save and we can also provide an elevation of zero and provide a shape this will be rounded rectangular border and the border radius can be let's say 30 so perfect you got the button here now on press can be our login function so i can just create a dummy login function here so this will be login we'll be coding that thing in a while so we got a button here now we also have this don't have an account section so for that we have to do is we'll go outside this side box we'll create another space let's say 10 and then we can create a text dot rich so what this text dot rich will do is we will have the option to create this particular children text span where we can write don't have an account and also this particular text is span so this means we can create two text span sections or rather the two texts and children inside this one text so this will become text span and here we will write text don't have an account we can provide some styles this can be colors or black and font size can be 14 let's say we will have to do a const value here and now if you create a new children for this text span so these children will be i can copy and paste this here you can create another text expand the text can be register here and we don't have any on press inside this text pen if you click on this we have a recognizer so what will what this recognizer is do it will recognize if there is any on tab for this on tap on this particular text so we'll write recognizer but the way we do here is we like tap gesture recognizer and we'll write on tab then when a particular user has clicked on on tab for this then we will first of all okay this is looking fine i can provide a space here register here and as far as style for this is concerned so we can provide some little bit of styles this will be text style color can be colors dot black and decoration can be text decoration not underline okay now one of the important thing is first of all we'll go to our widgets and instead of again and again writing navigator dot push navigator dot positive placement we can create a particular function here this will be next screen and we will write and this function will take first of all the context and the particular page in which we want to redirect so here we can just write navigator dot push then we write material page route and inside our builder we will take the constant context that has been passed here and we will return the particular page so this was for the push we can also do for the push replacement so we'll write next screen replace here we will here in place of this push we like push replacement so this is done here now once the button has been clicked we will write next screen replace or rather we can do next screen context and then the page can be a register screen or rather the register page but we don't have the register page as of now so we'll be creating a new register page so this will be register page dot dot and now here we will write import material dot dot and we can create a stateful widget this will be regis this will be stateful widget register page and then we can return a scaffold let's say body can be center child text register page if you go in here you write register page if you take this simulator here if i click on register here we are shown to our register page we can also go back from there and now the login screen is done we just need to code the login part but we'll be doing that in a while first of all we'll be working with our ui design so we got this you can close this if you go to our preview and open the descent which was this screenshots now we have our register screen so register screen is quite same as the one that is our login screen we just need to add one more field which will be our full name so we can just minimize this and now we'll just go in here first of all go to register page and we can just copy everything inside this so that will be written scaffold we have copied that now if you go to a register page we'll paste it here and i guess we have to create a form key first so this will be final form key global key form state done and the other thing is text input declaration so we will import our widgets and as far as our string email this will be our full name so we can just write this full name now let me see what issues we are having so this will become register and we can create a dummy function here this will become register tab guest gesture recognizer so we can import our gestures library now if i reload so we can see let me just bring back the screenshots where we have to change this create your account now to chat and explore so we'll write this as create your account now to chat and explore let me check my simulator create your account now to chat and explore and we will change this to register dot png and now as far as text form field is concerned we'll copy this above this text form field we'll paste this one more time and we can provide our site box here so this size box will have somewhat height of let's say 15 which which we already provided there now if i click on reload so it is showing me as an email field here only we'll write this as full name i can prefix icon can be account or this can be let me check prefix icon will be person perfect so we have the full name email and password let me just double check everything so we have the groupie here then we have to create your account now then we have register.png full name person and this can be full name and for a validation what we can do here is we only need to check whether the name is not empty so we'll do take the value if value is not empty then we will return null else we will return your or rather this can be name cannot be empty perfect now this is email is okay email the validation the password and this button here we can write register this will become register okay and here we can do this already have an account we can move this as login now okay and inside this register page we can provide login page perfect so now the login and register page are done it's time to code up the authentication providers here so we can just go to uh services and here we will write auth service dot dot and now inside our services first of all we'll be doing is like class or service and we will call us firebase auth and create the instance for that so this will be firebase.instance and now we will have a login function then we will have a register function and we will also have our sign out function but as inside our database we don't have any user as such so first of all we will be going to a register screen and registering the user so for that we will be coding up our register function so this will be registered user with email and password and the thing that we'll be needing is first of all the full name and then we'll also need the email and then the password this can be an async function and now we will first of all try and on firebase or exception this is generally what we are suggested to do is with a try we are provide suggested to do a catch function with a catch method so this is like this but for the firebase in order to catch all the errors given by the firebase what we do is we will write here firebase authexception this is a class for handling all the errors and it will be on firebase or exception cache the firebase error so here we can write e and inside our try block the thing that we have to try is we will first of all wait for the firebase to regist or rather create user with email and password and now we need to assign this value to our user class and for this we would have to write here user okay and if this user is not null then we will return true and also before returning true we have to call our database service to update the user data now let me just open one more file and here if you will see in my desktop i have this screenshot somewhere i guess okay and i have the screenshot here this firebase structure so for our user database the thing that we'll be storing is we will be storing the email address of the user the full name which will be generated from this full name field then this is a list which will contain all the groups in which the user has is active and then the profile pic for this tutorial will not be proceeding with uploading and retrieving profile pic in future if you continue the development of this chat application then we will definitely work with that so this is the structure for our user now let me first of all go in here and inside our services folder we will create another service this will be database service dot dot and this will become database service and this database service the parameter that it will take is the user id so this will become database service this will be user id and as we are not imposing our any restriction on providing this value so we will also do a null check here and now the function that we are using in our database service for creating the user data base will be let me write first of all updating the user data so this will become future update user data we will be getting the full name of user and also the email of user and here we have to create the reference for our collections so generally let me show the structure of firebase so if you see this firestore database the structure that we'll be following is we will have a collection which will be our users collection and inside this collection we will have a document id this document id after let's say we sign in or or rather in our case we have the registration so after we register the user then the firebase will give us a unique user id for that particular account and then we can use that particular user id as the document id so right now if i click on auto id so this created a document id and for the fields the fields that we were discussing earlier were if you see this so we have the email field so we can write this email this will be hello or the gmail.com this is just the structure that i wanted to tell you and this can be another field will be full name hello world then we have another field which will be our group field which will be a list so this can be an array right now the integer value will be let's say the same user id and i can do some more text okay and profile pic and if i just click on save then this will create a collection users inside that particular collection of users we have a new document id and inside the document id currently we have only this group you will see the groups that we are having now the structure for a user collection in regard of groups will be let's say i this particular user shivan address gmail.com joins a group with the name yeah boy okay this is the funny name and inside this particular group the group name we have the group id so in the users collection where we have this groups list which means anytime you want to know the particular user is registered in how many groups we will be calling this group list or the array and getting the value and let's say this this value is a combination of group id with uh underscore and the group name so this is the structure for this now what we can do is first of all delete this user's collection and we need to create a reference for our user collection and the group's collection so we can do is final collection reference this will be user collection here we will write firebase file store this firebase file store is the cloud file store so if you write firebase files to dot instance and then go to this particular collection if this collection exists then we will be going to this collection if this collection don't exist then the firebase file store will automatically create the collection for us this is the collection that we just created users and then we will have another collection which will be storing the values for our groups so we can just copy this thing and paste it again and here can be group collection and this will be groups and now once we have to update the user data so what we will be doing is we'll return a wait then the user collection and we will get the document id document id will be user id this user id will be passed when we have when we will be authenticating with the firebase so here if you see this after we got this new user is not null so if you see if we write user dot uid then the user id will be generated from there so we'll just pass that user id to our database provider let me just code this database for provider first and here we can set the values and the value will be first of all we will have our full name which will be the full name email which will be email then we will have groups which will be an empty array for now and we will have a profile pic which will also be empty and also if we want we can assign the user id also here so this will become user id and then what we have to do is now inside this auth service we will call our database services and we will assign the user id as user dot uid and then we will update the user data the full name will be this full name and the email can be this okay we will just first of all we will wait for this and then only we will return the true here we can print e and also return e from here if we have any errors so let's say for checking this e part what we will be doing here is inside my debug console first of all if i go in here and we will go to a register screen and code our register function first so if you see this we'll close this and inside here we will first of all assign the async here and if form key dot current state dot validate we will set the state as is loading so this will become true and we have to create this boolean value so this will be somewhat here bool is loading is equal to false and now inside this scaffold what we'll be doing is the body can be a single child scroll view only after the loading has been done so we will write is loading so if the particular thing is loading then we will return center child circular progress indicator with a color of theme dot primary color and else we will return our single child scroll view simple and now we will set the status is loading is equal to true and after that what we will be doing is we will await for auth service but we don't have a service here so we will also register our service this will be somewhat like our service or service or service and now you go to the register function and here you write auth service dot we already have the function register user with email and password will provide all the values so these are values which are mentioned here and then what we have to do is then we will take the particular value this will be either true or will be the error message so now let me just first of all if the value is true then we can do function here which will be saving the shared preference state explicitly causing an error here and the way we can do is let me just go to this authentication provider and i will disable this email and password so that whenever so that if we click on register then we will be redirected with the error so if this is not true then we can set the state as is loading is equal to false and now let me just go to this section and here if i write shivanj singh shivan chat.gmail.com password can be one two three four five six if i click on register then we have an error here which is the given sign in provider is disabled for the firebase project enable it in the firebase console so this means the error handling is working properly now inside our service if you go in here and here we are returning first of all we are printing the e value which is this now what we need is either we can get this error code which will be this e dot code and we can show this to the user in our snack bar but we don't want to show the code but rather if we write this as e dot message and if you remove this and then what we can do is here we can show a snack bar but we don't have any snack bar created right now so we'll go to our widgets.dart file and here inside of widget.file we will do void show snack bar and this will first of all take the context then this will also take the color and other than that we will also have our message and we can do scaffold messenger dot of context show snack bar and then we'll have a snack bar content will be message color will be color or rather this is background color if i save this the content will not be like this this will be like message then we can provide a style here which will be font size of 14 let's say and provide a const value here and now once we got the background done the other thing will be first of all we can define the duration this will be let's say for two seconds and action can be snag bar action with a label okay on press can be nothing and the text color can be colored white perfect so we created a snack bar here so we write show snack bar and the context can be context other than the context we have the message so we will be printing the value here and the other thing was colors dot red because this is an error so if you go in here again if you write shivan singh rewind gmail.com one two three four five six seven eight if you click on register material color is not a sub type of okay i guess there are some issues okay so we have the color in second place and i'm assigning this here so this will be an error so if you see first of all we have the context then color then the message so this will be like this and this will be value if i click and do our hot reload here but go in here let's see watch gmail.com123456 if i click on register the given segment provider is disabled for the firebase project so the snag bar is working properly properly if i click on save and now if i go to my firebase file store database and if we do shivaj saying shivanj gmail.com and set the password let's say one two three four if i enter one two three four it will ask me to enter within minimum six characters so if i write five six also then it will go and do a register for me and i guess we will have the data inserted to our database let me check okay so we have the user's collection here then we have the email the full name group is empty profile pic then we also have the user id so but we don't want our log this button to keep on loading and we will be doing that part here inside this first of all we will be saving the shared preference and then we will also disable the is loading boolean value so what we can do is we will delete this user's collection and click on delete we will hot reload the application and now so this means the error handling is working properly and we have the loading also now we need to disable this is loading to its original state which will be true so what we can do here is first of all we have to save all the data to our shared preferences now for the shared preferences we have to get back to our helper function and here first the place where we'll be where we will be saving all the data we will write the functions as this will become future boolean function which will be user logged in status or rather we can do save user logged in status and we can get the boolean value is user logged in this will be an async and here we can do share preference says sf is equal to await share preferences get instance perfect and now we can return sf dot set boolean value the key will be the is user logged in and the value will be rather we will have to provide the key which is a user login key and the value will be this value which will be passed into this function which is our is user logged in and done now we can just copy paste this for our email and also for a name key we'll do this do this here this will become save user name sf this will be shared preferences save user email sf we will get this as a string value this will be username this will be user email and now this is okay this is okay and here we have to set a string not a boolean value this will be set a string and instead of this user login key we will write user name key and inside this will be user email key and the value is this username and here the value will be our user email so now we can call all of these function inside our register page here we will write await helper functions i guess the way it is not working here so i would have to assign an async here then this will be await helper functions dot save user login status this will be true and we can just do await helper functions save user let me do this save user email this will be email and then alpha functions dot save user name this will be user name which is our full name okay now once saving all of this value is done then we can do next screen replace to our homepage and done so now let me tell you what we have done till now here you can see right now there are no data inside our firestore database and if you click on this register here we will be registering a user and after registering the user we will be saving the particular shared preference value inside our device and then redirecting the user to our home screen and once we do the hot restart which means if i after closing the application the user opens the app again then the user should not be shown with this login or register screen but rather he or she should be shown with the home screen now let's see whether that function is working or not we will be resting a new user first of all inside this authentication tab let's see okay we have this thing we'll delete this account and now we will write shivan gmail.com and here password can be one two three four five six if i click on register you will see a new collection would be added here if i reload and we are redirected to the home page and also inside here a new collection has been added users then at particular document id the document id will be the user id which is automatically generated by the firebase itself and then we are also saving that particular user id to our database we have the groups which is an empty list the profile pic the full name and the email so this user thing is working you see this authentication part perfect and now the important thing is remember the part where we coded this main. so this is signed in value is now a true so we will be shown to our home page let's see whether this is working or not i will have my simulator here if i click on how to restart the application okay so this is not working let's see why is this not working okay so i guess even just after going through the code i have seen one thing which is i am not assigned a set state here so this is the set state value if i reload okay so now the home page is visible let's double check this so if you go to our home page instead of doing the center child if we write elevated button and this will have a child with a text log out we have to check whether the shared preference is working properly or not so other than that we will have on press now we have to create a sign out function so we will go to our service this is our our service i remember this sign out place where we have mentioned it for sign up so here we will create a function which will be trying out and then first of all we will do a try and we can do a catch here we will return null if there are any issues other than that inside a try block what we will be doing is we will await for helper functions to save the user login status to false now the user is not logged in and we can also copy paste this again here we will save the user email to let's say an empty string and we will also do it here and instead of this user email we will have a new user name and at last we will wait for file base auth to sign out so if you would have written this sign out the sign out will be done but the important thing is to change the value or to remove the value which are already saved in your application shared preference you have to call all of these values too so now if you just save this and go to your or service first of all we have to initialize our service this will be our service this will be our service and if you do do this here we can write our service dot sign out and if i click on save and now if i click on log out we are not redirected anywhere okay because we have not called our next screen but if we reload we should be shown to our login screen because the shared reference value have been removed have been removed and we have also signed out from the application so let me just reload and yeah we are on our login screen so now we can just code our login part also we have not coded the login part so we will go to login screen or rather we can copy some value from our register page and copy all of this paste it here i'll be modifying some values here so this is okay is loading because we have not created any value here this will be bool is loading this will be false and now if this is for if this is true then we'll be showing a center loading button center child can be circular progress indicator with the color theme dot off primary color and this will be like this one more bracket is needed perfect you can assign a comma here to do the indentation part because there are some issues okay so these are the issues the loading is done till that part and i guess i would have to call the all service also or service or service and this is showing in error because this will be an async now we need to instead of this registered user with email and password we have to create another function so we can go to our service and we can create a new function this will be login we copy this paste it here and now this is okay we will just need to write sign in with email and password we don't need to pass the full value here we just need to pass the email and password and if user is not null then we will return true because we don't need to save any value to our database because the values are already saved and this will be login with user name and password and i guess login is done we'll go to a login screen and here we will like login with email and password we don't need to call this here then we'll take the value if the value is true then we have to do one more thing this is okay the next screen replace is okay the error handling is also okay so now what we have to do is we will be creating a function inside our database service in which we will be taking the email address that has been provided in the field and searching that email address inside the database to match any of the value and then taking the snapshot of that thing and getting the values so inside let's say i get the value here shivan shadow.gmail.com then i will take the snapshot of this particular document snapshot means that we will get all of these values like email and password email full name group profile pic in the user id so here we'll go to our database services and here the place where we have this updating the user data or rather we can do this saving the user data saving user data we will also update this here saving user data and other than that we will write getting user data this will be getting user data the value that we have to provide is an email for the particular user and now this is a query the query means we will be querying a little search result inside our database so we'll use a query snapshot and this will become user collection remember this user collection that we created inside this only we have to search so we will do where this will be email is equals to this particular email and then we can get the snapshot and here we will return that particular snapshot and now if you come to our login screen what we'll be doing is we will just wait for our database services you can either provide the user id so for user id you can write firebase or dot instance dot current user dot uid and then we will write getting user data and for getting user data we have to provide the value of email and done but the issue is where are we saving that value so here if you see this getting user data will return a snapshot so we will write query snapshot and this will be snapchat if i click on save now we'll be saving the values to our shared preferences because the user is click on the login button now what we did is we made a query inside our data to search the email now we got the email we got the snapshot now from that particular snapshot we will extract few information which will be the name because we are saving the name of the user insider share preferences will extract the email of the user then at last we will be saving the boolean value of login status to true so here we will write a weight or rather we can just do is we will go to our register page and copy all of this paste it here we will import our helper functions this will be this then set the login status to true email can be emailed because we already have the email and other than that the last thing is the username for getting the username we will do snapshot dot docs dot dots and get the zero value because this will be a list and we have to get the initial value and then from that list we will get the full name remember to take this particular format in mind while writing the code because this is the this is the way we have mentioned in our database so it will be stored and fetched in that particular way only so now i guess everything should work so if you go to this login page here if you enter an email which is not present inside our database let's say user added gmail.com we know that this email has not been present so if i click on sign in there is no user record corresponding to this identifier let's say we have the email which is shivan charity gmail.com if i enter a wrong password one two three four five six seven eight nine zero let's say if i sign in the password is invalid or the user does not have a password so what we can do is we will enter the right password this is one two three four five six if i click on sign in and now we are here on site in our home screen let's see whether our is signed in state is working or not if i click on reload we are here inside our home screen only if i click on logout if i reload then we are here inside our login so the login and register part is working properly and now it can just log in and we will start coding our home screen so this will be six now schwarz123456 on sign in here inside our home screen so we will write home screen or rather the home page and now let me quickly open the home screen layout you can close this thing we have this screen done this screen done we have the home screen here so here you can see we have an app bar here with our drawer menu and also a action button or rather the icon button inside this app bar so what we can do is let me just open the same letter we will delete this body tag and we let abba this will become fba center title can be true the title will be text and this will be let's say group okay open my simulator groups we can provide some style lights which will be texture styles font size can be 27 and the font weight can be font weight dot bold 27 if i click on save we got the groups here we can change the background color this will be theme dot primary color and we can provide a const value here and now there is a little bit of drop shadow i will try the elevation to be zero and now other than that we should write an action which will be icon button on press will be next screen and the screen will be of such a screen so we can create a search page dot dot will import material dot dot and we can create a stateful widget which will be search page and i will return a scaffold with the body center child text search page close the scaffold and the icon can be icon icons dot search and i guess i will have to do this const value which will become search page perfect if i click on this we are here inside our search page we can go back here also and now the icon button is done the groups is done the next thing is we have to provide the drawer menu here so this will be drawer and the child will be a list view with a padding let's say edge insect symmetric and vertical padding of 50. i click on save we got a new drawer menu here okay then we can have some children's which will be icon icons dot account circle size can be 150 and four and the color can be color dot gray let's say 700 click on save we got our icon added here then we can provide a size box with a height 15 and then we can get a particular username here we don't have the username here so how you can get the username is we will create some values which will be string username and we'll be getting this value from our shared preference we will also write string email and then what we can do here is when the initialize or rather the init state is called we will be getting user data and we can create a function here getting user data this will be an async function and we can await for helper functions to get a particular value so right now we only have this get user login status so the last two function that we have to create is for getting the username and share username and also the email so this will be get user email from sf and this will be get user name from sf this is okay get bool and the value will be user name key or whether this is for email so user email key and this will be user name key click on save here we will write get user email from shared preference then take the value and set a state and assign the email to this value other than this we will again do this await function here get user name from shared reference then take the value and then do a set state okay this will be value okay so the error is a value of type bool okay if you go to your helper function here you have to change these values to string and i forgot to tell this get a string okay this will be get string we click on save now this should work and we got the username is equals to value this will be empty okay and now if you go to this and get the username rather if i reload now i get the username here then we can do a text align text align dot center and provide some style which will be a bold style so this can be font weight dot bold perfect i can just provide a const value here other than that we will provide a site box with the height 30 then we can provide a divider and then we need to create some list style the list tile will be like if you click on on tap so the first one will be r groups which is if you see the screenshot okay so here the first list style will be groups which is by default the same screen in which we are currently second screen will be profile page and the third one will be all about so let's see if you open the simulator for the first one we don't need to do an ontap selected color will be dot primary color this is the selected color means is the particular profile button or the particular group button is click then we will be showing this color on in there selected will be true we want this to be the selected one content padding can be a symmetric padding of horizontal 20 vertical can be five then we will provide a leading text as or the leading button as icons.group and the title can be with the style colors are black you can just copy this list tile and paste it one two three times you can provide a comma here and this can be we don't want this to be as the selected one we don't want this to also we do we have the selected one and the icon can be exit to app okay this will be logout ontap can be an async function in which you will call our our service so we have to call okay i already mentioned our service here so this will be our service dot sign out and when completed when this thing is completed then we will do next screen replace which will be our login screen perfect as far as our profile is concerned we will be redirecting to our profile page we don't have any profile page as such so we'll create a new page this will be material dot dot and we will have a profile page then we can return a scaffold with the body enter site text this will be profile page and now inside this profile page we can do let's say next screen replace this will be profile page we can click on save so if you see if you go in this here here in the profile page okay so now we cannot go back from here either we can do next screen that you can save and reload if you go in here we can go back okay and for log out we are also able to log out from here what we can do here insert in this they will do is we will return a show dialog function which will take the context and then return an alert dialog content can be a text logout let me just first of all login and now if you click on this logout we are shown with this thing so we can do is let me see what values are there and this content can be are you sure you want to log out and the title can be logout i save this click this okay now we can provide some action buttons here which will be first of all and icon button what this icon button will do is on navigator dot pop and this will be context and other than that we can have a icon this will be icon icons dot cancel button with a color color dot red you can provide a cost value here okay and we can copy and paste this again and this will be with the green button and exit to app if i click on save or rather this will not be agreed to app this will be done we can dismiss this i guess this will be here we want a pop-up to not be dismissable so if we click anywhere outside this pop-up we are not closing this now only we can close this if we click on cut button and for our this thing what we can do is we will do await next this will be all service but here we have to write async dot find out and then we have to do one more thing which will be navigator dot off context and remove or rather this push and remove until this will be material paged out and this will be context route will be login page and we can do this as false perfect now if you click on this then we are logged out here we can log in again two three four five six if i click on sign in so we are inside our home screen we have this drawer also now we have to code our profile page so we will go to a profile page and here inside a profile page as we did for the home page we will be calling our app bar setting the background color to a bar let me go to my profile page okay the background color is this so this will be theme dot of context primary color and elevation can be zero title can be let's say profile with a little bit of style this can be text style we will have a color this will be color dot white then we'll have a font size 27 and a font weight can be bold it will be on grade dot bold you got a profile thing here now for the drawer part we can just copy and paste the same thing that we have inside our home screen but we'll be doing some of the changes here so let me just first of all copy this and i guess till here paste it here save this now it is showing me an error for auth service so we will write our service undone and if we see this username so we are not showing the username right now what we can do is we will take the username as the parameter while we call this profile page and the other parameter will be this name uh this email this will be in required parameters and this will become username click on save so here what we have to do is we will write this as widget dot username and this will be a login page and we have to do one more thing it will be we will replace this on tap from this profile section because now we want this on our group and we will do this as home page and this can be selected as true we'll remove this from here selected color will be this perfect just reload okay the reload is not working i guess we would have to see something if we reload and here inside our home page we don't need to do a push there or rather the next screen this will be next screen replaced so that we can show the drawer to us okay the next screen replace will be i guess here so this will be next screen replace because that was related to the search part and we have to provide the username so username will be username email can be email we can click on save and now if i go to this profile page we are shown with this thing i don't know why let me just reload if i go in here okay so now we are shown with this perfect if i click on these groups right now i'm in group if i click on this profile we are here in the profile page if we click on this logout let's see okay this is working so inside our profile page in the body section what we'll be doing is we'll go in here light body this will be a container with a padding of symmetric symmetric padding of horizontal let's say 40 and vertical we can assign some big padding size like 170 child can be column main access alignment can be start and then we will have icons dot account circle and size can be those 200 size can be 200 and then we will have the color as color dot gray 700 in this section we will not be coding up the in this particular video will not be coding up with the firebase image upload we will be taking that for some other part do let me know if you really want to do that thing also and we'll have a site box then we can create a row because if you see the design where is our profile page okay so we have this we have the row for full name so this will be main access dot space between the child can be full name with the style font size 17 and we can do the same for our this will be let's say widget dot username will replace this font value here you can click on save if you see your simulator right now we have this then after this row we will be doing a divider with the height 20 and then doing the same row part here once more so we'll copy and paste this here this will become email and we get the email here okay so i guess we are not able to fetch the email from this i would have to see that thing so if you see the profile page is okay if you go to our home page you're not able to fetch the email why this so let me just see the email is empty okay the place where we were saving the email is this login page so save user email so this is a save user email okay so the user email is not saved here because the we are assigning the same value here so this will be user email and now i guess i would have to log out first and then log in again one two three four five six i click on sign in we are signed in successfully if i click on profile now the email has been saved here so the profile page is done the logout page is done now the thing that we have to do is we have to code up our home screen go to our home page for our home page we will be first of all if you see we got the app button we got a drawer menu done now it's time to create the body tab so our body so our body will be group list this is a function that will create so we can write group list here and other than that there will be a floating action button so this floating action button will be floating action button on press can be let's say a pop-up dialog because if you see the design we are showing a pop-up for creating a group so this will be pop-up dialog with the context so i can create this here pop-up dialog build context context if i click on save i open up my simulator we are showing this here we can provide an elevation to be zero background color can be theme dot of context primary color and the child can be icons dot add with a color color dot white and a size let's say study okay so this is here we are not seeing any pop-up right now and we have the group list so the important thing is to code up our group list for coding up a group list the way we are doing is let me first of all show the structure for our groups let me just open this firebase file store structure here if you see the structure for a group the thing that we have is first of all in when we will be creating a group we will have an admin who is the current user will this will have our admin which will take the name of the admin then we have the group icon we will not be doing the group icon part we are just saving everything for the future we are coding up the basic functionality right now so then we will have a group id then we have a group name then we can get the members we will get the user id of each member we will get the user id of each member then after that user id we will get a name and in between we will have an underscore then we can get a recent message listing message and recent message time so i guess if you go and to this group list we will be returning a stream builder and this stream builder will get a stream and that stream will be the group so first of all if you write this here there will be a stream and this will be our group and we want to initialize this group with a with a list of snapshots so getting the list of snapshots in our stream so for that we will first of all go to our database service file okay this is database service file and we have to create a function to get user groups so for getting the user group first of all let me close this for getting the user group we will write get user group and this will be an async function and then we will return user collection dot doc the user id and then written all the snapshots so first of all we will call our this will be an await database services the user id can be firebase auth dot instance dot current user dot user id or this will be user id and then we can what we have to do is get user groups then take all those values of snapshot and set state with our groups can be snapshot perfect and here inside a stream builder we will write stream as groups and then the important part is our build method so inside of build method we will have a context and a snapshot but we will specify the type for this so this will be in async snapshot and then i guess i would have to write this correctly this will be async snapshot and here we need to return async snapshot and before returning anything we would have to make some checks so the checks can be let's say if snapshot has data then we will be executing this part else else we will show return center widget which will be circular progress indicator color can be let's say theme dot of context or primary color okay i cannot assign a const value here so if snapshot has data then we will be executing that part if the data is being fetched or if the data is not present then we will be showing a circular indicator in between so after we see that the snapshot has data then we have to check some more values like snapshot dot data with the data we will check the particular group so if you see the this thing you will see whether they inside this particular array of user whether there are any groups present or not so if this will be if the length is not equal to 0 if the group or rather first of all we will check if the groups is not equal to 0 and also then we can execute that code else we will write return no group widget and we would have to create this widget so this will be like no group widget inside this i will have a container with a padding of horizontal 25 let's say child can be column main axis can be center and a cross axis can be also center then we will have a child our child can be first of all an icon this will be icons dot add circle color can be color dot gray 700 size can be 75 so if you see in here first of all i would have to do some more things here i guess just okay if snapshot.group is not equal to null and also a snapshot dot data group dot length is not equal to zero else we will return no group widget and if this is not equal to zero then we can return let's say a text hello okay i can click on this this thing right now it is doing a reload for me rather if i do the hot restart for my application field does not exist within document snapshot okay this is because right now if you see the user's collection we have the groups thing here this will be groups if i go back in here if i reload so we have no data so that's the reason we are showing with this no group widget let me just customize this no group widget first and then we can code up the other part and here we will have a side box of height 20 because here if you see when we have a i guess that screenshot is not present when we don't have any groups so we can write text like you have not joined any groups tap on the add icon to create a group or also search from top search button you can customize the code customize this according to your need and now i guess we got this thing done we can provide a text alignment this can be center yeah and if we click on this button we should be showing we should be shown with a pop-up to create a new group but right now we don't have anything so we can just wrap this with a widget gesture detector and on tap can be the one that we created pop-up dialog okay this is done and right now we are only returning hello if the group exists inside the user collection to check that what we have to do is let me first of all go with creating a new group so that's the important part first of all that's the important part first so in here what we will be doing is we will write show dialog context is okay we will take that text and build alert dialog perfect title can be let's say data group with a text alignment of left if you click on this create a group okay we can also create this as barrier dismissable as false okay i cannot dismiss this so i would have to just reload this i guess yeah content can be column and inside our column we will have some children's like first of all here also we will do the is loading thing that means whenever we click on create a group then the time it is used while creating the group we will be showing a circular progress indicator in place of that text text field so this will be bool is loading is equal to false we'll go in here and we will do is loading if this is equal to true then what we can do is we'll be showing a center side of circular progress indicator with a color steam dot of context primary color and else what we can do is we'll be showing our text field so let's see right now we are shown with the text field because the value is not true right now but this is a issue here we are showing the column in the whole screen so to remove that we can do main exercise and then we will write min this means we will decrease the value here so if we reload perfect now for a text field what we'll be doing is we can do decoration this will be input decoration we will have enable border outline input border border site can be color will be our primary color and border radius will be let's say 30 so this is for the enabled i guess i would have to make this true so that i can close this okay this 30s are quite big 20 is okay this is for the enabled border now we can have this for the error model and also for the focus border error border then the focus order and for the error water we will change the color as color dot red this will become const value here perfect and now for the text field if we have this unchanged we will take the value and we will set this value to equal to the group name field as we did for our login page so we will take that value we'll do a set state and we will do group name is equal to value then at last we can just provide some little bit of style which will be colors or black if i click this okay now we got a text field done at last what we have to do is to provide the action button which will be let's say an elevated button on press will be null for now and the child can be this will be a cancel first of all and style for this can be let's say style elevated button dot style from primary will be text of context dot primary color okay this will be like this just copy this and paste it here this will be create and now if you see you can assign this here as navigator dot pop context or rather this will be navigator dot off context dot pop and we can just make this as false now we have the button here so we can close from that button okay okay cancel perfect so we just need to create the function for when the group has been pressed successfully so for doing that what we can do is we will put that thing here only we'll write async but before we code anything let me go to my database service and if you see the structure we have to create this structure first so we can write this will be creating a group so this will be create group now the thing that we'll be needing for creating the group is first of all the username we will need the username to update the members like if you see this inside this member we are needing the username and then also the user id so this will be id also and other than that we will have the group name this will be an async function this is an important function so do focus here if i can increase the font so now inside a create group function what we'll be doing is first of all we will getting the reference for that particular document that we want to create so this will be like this and we will await and call our group collection this group collection is the one that we created here and now we will just add and add some values here so first of all we will get the group name this group name will be this perfect now we can grab get the group icon we will be just creating an empty string here we don't need that and then we can get the admin the admin will be our username you can either directly provide the username like i create a group my name is swan singh so if i create a group the admin will be swan singh but with my same name there can be a lot of people so that way we can distinguish between them is we will be creating a string which will have let's say the id the user id that has been generated by the firebase itself and then the username so this way we can get the admin name and right now there are no members so we'll create an empty string okay then we'll have a group id we also don't have the group id right now because when this command when please try to understand when this command will be executed only then the particular id for this document reference will be generated right now we don't know the id right now we are not at all aware of what the id will be generated by firebase for that particular group so we cannot assign the group id here but after we complete this thing then here is outside the function we will do again await function and call the reference and get the id so you'll just see that right now the recent message can be null recent message sender can also be null we are not worried about that do let me know if you really want the next tutorial inside this thing also and now we got the group created so the group was created here what we will be doing is first of all we will be getting the document reference so we getting the document reference and we will update some value for updating some value what will be updating is we will update the members so right now the members will be right now for members to work we will be creating an array so for creating an array we have this field value dot array union and for union of array we will give a new string this will be user id or i guess this will be in this format user id underscore then we will have username i guess this will work or directly if we can have this okay so this is not working that way this will work now this means here inside the member we are first of all getting the user id of that particular user and we are signing in underscore and then we are assigning the name of that particular user so and the group id can be group id because recently we have done we have assigned no group id but after we executed this command we will get a particular document id so we can get the id for that document and then so this will update the members the member will be only the one member which who created a group so that's the thing other than that we have to also go to our user collection this user collection and update the value of that group so inside this user correction initially we have the empty array but we want to update that array with the group name with the group id underscore in the group name so what you can do here is we will first of all get the reference so here also we will get user document reference and we will wait for user collection the way we did user collection dot dock and we'll get the particular user collection from the document id i guess we can remove this and now we can return a user document reference dot update and we will do the same thing that we did this will be groups we'll create an array but inside this array we will be storing the value of our group or rather the group id can be fetched from this group i guess what we can do here is we will write group document reference i'll just copy paste it here dot id and then we can do an underscore and write the next value as group name perfect and click on save so now when we execute this command this create group will execute and now we just need to call this so you can go to our create function here rather this create button when we click on this create button then we have to do that so if we have to check something if the group name is not empty if right now if i do a create button then we will be not we don't want the firebase to go and create a group with this empty string we have to first of all check this if this is not empty then we will set is loading is equal to true okay and then what we can do is we will do a database service user id so for getting the user id what we can do is we'll write firebase auth dot instance dot current user dot user or rather the uid i entered user here and then we can create a group now the parameter that it is asking is the username so we already have that then it is asking for the user id we already have that and then it is asking for the group name so if i go in here this will be this firebase auth dot instance not current user dot uid group name will be this if i click on this and when this is completed then we can change is loading to false again and to our navigator dot of context and a pop and show sniper we will do a color as screen and message can be group created successfully click on save i'll just describe the screen size okay now if you see a simulator and also i'll open the firebase here so currently we don't have any group if i click on this and here if i write flutter community then do watch what will happen here group created successfully and we get a hello here and also on the side screen you can see inside our firebase screen you can see we have a group id underscore the group name but we are not shown with the group collection because we would have to reload this and we have a selection here with the name groups and inside this we will have a document id which will be the group id also and we currently have the user id underscore the name admin is user id underscore the name user is this we have the list and also inside a group we have the list that means the logic is working fine but i was not shown with the loading button okay because this created a group so instantly that login button was not working i don't know why okay instead i can do is this is not saving the state for me so we can do is we will return a stateful builder here which with with which we can do this builder context comma state and we can take this here we will write return and after this alert dialog perfect if i click on save go in here okay so that showed that definitely shown the circular progress indicator and then created the group you see the user we have a lot of groups here so we can just remove this donate this here and now let me first of all go to the place where i have my group list so this is the group list the place where we were printing hello and here we have to print a group tile this group tile will contain a logo and inside that logo will fetch the first letter and display it in a upper case manner so we can also see this is also working here we can do is we will write list view this will be builder and for the item count we get this as groups dot length item builder will be context comma index and then we can return if you return hello then we should see hello printed let's say how many times i am not saving the screen right now so the answer would be 4 so let's see whether we are able to print this 4 times if i click on save 1 2 3 4. so this means this is working now we will create another group tile widget group tile dot art import material or whether this will be import material import material dot dot and here we can create a new widget this will be group tile and the values that it will take are first of all a string value of username then we will also need value like group id this can be like this and at last we will need the value which is our group name and we can write required this dot group id required this dot group name required this dot username i can click on save and inside this we can write return first of all we will return the scaffold we or rather not as careful because we want this to be printed every time uh entry is made here so this can be let's say a container with a color colors dot green if i save this and here if i return this group tile group id can be the for getting the group id if you see the database right now this user have the all of the groups and for this group we have the name after the underscore and the group name of before before the underscore so we can create two function here so this not a function we can do some string manipulation here so this will be get id and we have to pass a string here so we just need to return for the for getting the id we have to return substring and then the index of and we will search for this underscore so we can get the id from there and f for our get name is concerned there is a little bit of twist with this so we will write this as substring this will be i guess plus one okay so now we get the name from this the a name from this the id from this we will check whether that is correct or not so the group id can be the group id will be get id snapshot dot groups and index and for the group name is concerned we will let get name snapshot.data groups and this will be indexed and the username is concerned snapshot dot data will write full name and we can close this you open this thing here we are not shown with anything so we can just return a list style and the title can be widget dot group id this will be inside our text and this subtitle can be text and widget dot group name click on save so now you can see the string manipulation is working fine here inside this first of all let me show you the database this particular user this particular shivancing use account have a list of groups which are 0 1 2 3 and if you see the simulator we are fetching all of this group in this particular integer value so vo with this flutter community 1 this instant 2 with this eer and then reer whatever the name is now we are fetching all of these value and the but the thing is while we were fetching they are not fetched directly inside this format so we have to convert it inside that format for getting the id we just look for this parameter or rather this underscore and we substring from there and for getting the name we just took the anything that is after this underscore so this is the way you can do that and now we print pass all those value to this list style and display them there but one more thing what if you want to let me see here okay what if you want to showcase the group which has been joined afterwards you want to display the most recent added group at the top of this so the most recent group was this r e r e r e so we want this to be on the top so we can just do is we will just close this we can go to our home page and the place where we were displaying our okay the group list and now we can create a integer value this will be reverse index and what we'll be doing here is we will write snapshot.data groups and we will get the length of this minus the index minus 1 so this will be okay i guess this is after this what this will do is let me just uh if i open up something or rather here only let's say the length right now is 0 1 okay the length is 4 so we get the length 4 minus the current index which is our 0 and then minus 1 so this will do the current index as 3 okay and the value we have at 3 is 0 1 2 and 3 so this will do a reverse for this list so if you write this reverse index here okay reverse index you can see we have the most recent group on top and then all of these values so this was the way you can do that now we'll just design our group tile here let me just open this here we can just do this like this will open up my simulator now i would have to design my group tile so we can do is let me just return a container with the padding this will be symmetric padding vertical can be 10 horizontal can be five child will be a list style with a leading icon as circle f star and a radius of 30 background color can be theme dot of context dot primary color and the child will be widget dot group name dot sub string 0 comma 1 2 has to get the first alphabet and then we will do the upper case and text align can be center and we can provide a little bit of style here so color will be color dot white and font weight can be font weight dot so this will be cost here so we got this value here or rather if you do this as 600 this is also okay let's say 400 400 is also okay 500 let me stick with 500 for this now we got a child here for the circle f star the leading one we can get a title like widget dot group name with a style font weight bolt so we got all of the group name here and the subtitle can be text join the conversation as this will be widget dot username with a little bit of a stylus in this i will give the font size as f13 click on save okay we got all the groups here and now this was done for the home screen all we need to do is let me just go to my what we have that okay group type and in this container we can do uh trap with a gesture detector and on tap can be we have to go to next screen which will be a chat page we don't have the chat page right now so if you open this and go to this and write chat page dot dot import material dot dot do a stateful widget chat page and we can return a scaffold this chat page will contain few values like which will be first of all the group id second can be group name and also the current username we can do required this notebook name required this thought group id required this dot username okay now if i close this we have to provide some of the value there so group name we can do this i would have to import this and now it will ask for value group id can be widget dot group id group name can be widget dot group name and then we have the username widget dot username i can click on save now let's see whether chat page is working or not so what i can do is in the body tag we will be printing the current name of group what this means is if i click on this group on the chat screen in the center we will be shown with the flutter community okay i can go back instant okay eer rer okay this is working let me create another group react community i click on create group created successfully okay we have this react community and we can see all of the data is added here in the real time and now it's time to code our chat up chat page so i will open this here and also we will open the simulator here so we got all of these things done here right now we don't have anything in our search page but we will do that in a while so if you come here to our chat page so let me just go in here and we will design some of the things first and then we will code the logic behind that so for design part we will do an app bar and this app bar will have a center title group elevation 0 the title will be widget dot group name and let's say background color can be theme dot off context dot primary color and then we will have if i click on save react community okay then we can provide an icon button here which will redirect us to the group info page so this will be group info dot dot material dot dot this will become a stateful widget and i will write the name as group info and we can return a scaffold so this will do a next screen group info icon can be i can i can start info okay let's first of all go with this group information only we will fetch the group name with the group admin and also the group value so inside the group info first of all we will get some values like the group id we will also get some values like the group name and we can get the value as admin name this will be admin name comma required this dot group name and required this dot group id you can click on save and i guess i would have to provide all the values here so first of all okay this will be group id will be widget dot group id group name can be widget dot group name and the last thing that we have is our admin name so this will be admin and we don't have anything as such regarding this admin so what we can do here is like admin as a empty string here and when this screen is loaded this means the chat page is loaded we can call a function get chat and admin and we can create a function get chat and admin for getting the chat we will be creating a stream so this can be a stream of type query snapshot and this will be chat and next thing can be we will go to a database services and here we have to create two methods the first one will be getting the chat now for getting the chat we can create a function get chat then we have to assign the group id and then we will go to our group collection or rather return our group collection with a document of this id group id and inside the group id we will be creating another collection here you can see this group this group here boy have this another collection which will be the name messages and inside that messages we will create automatic document id inside each document id we will have message sender in a time so we can go to this group id and then we will create another collection which will be messages and we can just order them by time and then get the snapshots so this getchat function is here and other than the get chat function we can also create a function to get group admin so for getting the group admin this will be a future function and we need to provide the group id first to which we can find the group admin so this will be document reference this will be group collection dot document group id and after we got the reference we can fetch the document snapshot so this will be document snapshot d dot or rather await d dot get then we can return the admin s document snapshot admin now inside this get chat and admin function of our chat page we will call our database service and we can get the chat the group id will be widget dot group id and then we will take all of those values and set the state as chat will be equal to value other than that we can again call this database service and then get group admin which will be from the group id then take that value [Applause] and assign that particular value to our admin value this admin and now if you go to this group information and here if you print admin center child text budget group admin this will be admin name if you see our simulator if we reload for the react community the administration added is only so this will be if i click on this react community right now we don't have any chat messages as we have not coded that part if you click on this group information we are shown with the admin as the user id of shivan singh underscored the name so we can also do a string manipulation here in this screen also so i guess first of all let's code this group information only if you see the screenshot for the group information we have okay the abba with a back button and a group information title then we have this container in which we will have the group icon in future and the group name in the admin then we have the members so if you go in here if we can find some way to keep this screen also i guess okay so i can open my simulator okay i guess this will work now we can create first of all the app bar which will be center title true elevation 0 background color can be theme dot of context or primary color and we have the title this as group info and now action button can be an icon button through this button we will be removing or rather toggling the joining and closing of that group but we can do that in while we will be coding the search page so right now we can just have this as icons dot exit to app okay so this will exit the group okay we don't have any thing on on press for this and now for getting the members this is an important part here inside this also we will get an init state in which we will get the members for that group and we can create a function get members this will be an async function in which we will go to our database services and to get the members get group members if you see we don't have created any function as such we have the get chat get group admin and we have create group get user groups getting user data saving okay so we don't have any functions such as get member so we let get member async rather not get this will be great group members [Applause] will get group id async and we can just return group collection dot document will be group id and a snapshot or rather if you see i guess i would i have already written this somewhere user collection okay so we were getting the user groups here we are not getting anywhere the members i can just save this and if i write database service user id will be firebase or dot instant dot current user id that user id then get members widget dot group id and then take that value and set the state as members is equal to value we have not created any values here or rather the stream so this will be stream members perfect and here we can create a container with the padding let's say as insects of symmetric padding horizontal can be 20 vertical can be 20 as well you can create a child this will be a column with a children of container 20 and the decoration can be box decoration border radius can be 30 and the color can be primary color with some opacity let's say 0.2 okay so we are showing this this is a little bit done for this let me just create a child okay so this child will be inside this column which will be row we want this as start children can be first of all circle f star radius 30 background color can be theme dot of context from a primary color and then we will have a child which will be text widget dot group name dot sub string to uppercase and style can be text style with the font weight let's say 500 okay we also have to assign the color the group name is react community so it is showing me r here and other than the circle f star we can create a site box with a width of 20 and then we will create a column with our cross axis alignment as start and the children can be this will be group here we will have the group name style can be font rate if i click on save other than this we can have another site box five and then a text which will be admin this will be widget dot admin name okay so we are getting this error because we would have to do the string manipulation here also so let's uh this will be get name and string of resource string value can be r and here i will do return r dot sub string substring r dot index off and search for this pattern and do a plus one here i guess i would have to close it here perfect but we would have to call this we'll write get name function and then we got the name here and at last we would have to do a stream builder so after a container we will write member list and we can create a member list here which will be returning a stream builder i get this issuing error because of this rather stream builder will have a stream of members builder can be context comma async snapshot the one that we did earlier if snapshot has data then we'll do this else and we will return a center widget of circular progress indicator with the color primary color okay if snapshot has data and we will check whether the snapshot dot data members first of all is not equal to null if this is not equal to null then we will do that else we will return a center with the child of text no members and we can just do this and after that we will also check whether snapshot.data members dot length is not equal to 0 else we will return this thing again and here what we can do is we will return a list view dot builder with an item count of snapshot dot data members dot length item builder will be context from index we can provide shrink wrap to be true and at last we will go to container or rather we will just return a container with a padding let's say edge insect dot symmetric horizontal can be five vertical can be ten child can be listile with a leading icon a circle f star and inside the circle f star we can get the radius as 30 background color can be theme dot of context dot primary color let's see if we reload go to this react community we are shown with this thing here but we want the child to be a text inside this text we can get the name snapshot.data members and we can get the first index and then inside this we can do substring 0 comma 1 and 2 uppercase and style can be text style with the color can be color dot white and the font size can be 15 point weight can be bold perfect we are showing this s here because the user that is only the member here is the shivan singh here and then we can create a title this title will be let's say text we can get the name which will be snapshot.data members and the current index we got the name here and we can get the subtitle which will be getting the id here so for getting the id we can just go to my chat page whether or not on the chat page that is the home page for getting the id we can just copy this thing paste it below this where we have that and we can do here is write get id snapshot.data members this will be indexed and now we got this thing here let's see whether this is working if we add another member so for checking that i will open up my item i will go to this whole particular project this will be documents and then we have our chat app firebase and i will run this in my chrome this way we will also check a new user if they sign in and join the group and other than that we can also check whether our web application is working or not so we will write this chrome okay this is okay and just wait for chrome to open and now we got a chrome browser open if you just minimize this if you register a new account here let's say i write backslash flutter backslash not flutter at the gmail.com you can also send your queries here inside there i enter the password one two three four five six and i click on register i should be though i should be created with a new group or another the new account right now this account has no group so that's the reason it is showing me this if i search for okay i cannot search right now so i'll have to implement that thing also but okay the web version is working so i guess i would have to first of all take my simulator here and we will this thing is working which is our group information now we have to enable or rather we have to provide the functionality of making the user join a particular group so how you can do that is if you first of all this group information is done you can just remove this now the important thing is the procedure of joining any group so you can just go to the search page and here we have to code a bit good amount of code so first of all if you open your search bar here and inside this we will go and create our app bar which will happen let's say elevation zero background color can be color dot background color can be theme of context dot primary color and the title can be search with a few styles let's say font size can be 27 font weight can be bold and color can be colored white will go to our body tag and here create a new column this will be children container let me show the design first if you see where this okay so we have to create this screen so for doing that create a container color can be theme.of context dot primary color if you open up your simulator if you save this or rather save this right now we are not shown anything if you do a padding as insects horizontal and a symmetric padding with a horizontal value as 15 and a vertical can be 10 okay we are getting a little bit there we can create a row here with our children expanded and expanded we'll have our text field with the controller let's say this will be search controller we don't have this so we have to create this this will be text editing controller and we have the size controller done we can provide some style as the text will be of white colors if i save this text will be of white color perfect border we don't need this border so what we can do is we will go in here and do the decoration this will be box decoration and hint text can be so i mentioned this as a box decoration this will not be the box decoration this will be input decoration and inside our input decoration what we will have is first of all we can do input border as none now there will be no button here this line there and we can provide the hint style as color dot white and pond5 can be 16 and we have have provided a hint style but we have not provided the hint text so this will be search groups okay this will be search groups if i reload we are here in our home screen react community rer so that is working if you click on this yard community if you click on this group info that is also working now we just need to click on our search button and we will have a button if you see we have the search button so what we can do is we will write a container after this expanded view so this will be here and inside this container the width can be 40 height can be 40 and decoration can be we can just take the color which is our primary color and provide a little bit of opacity rather the change opacity of that to one let's see how that looks okay it is not showing me anything because i think i would have to first of all do a border radius of 40 and the child will be our icon so this will be icons dot search let's see okay so we are showing the icon here or if we see or rather if we do this can become colors.white yeah that is okay and here inside this icon this will be color dot white perfect and inside this container we can wrap this with a gesture detector and on press can or rather just on tap can be this can be initiate search method and we can call this here initiate search method perfect and after this container if the following thing is loading so for loading thing also we have to create this if this is loading then we will show center circular progress indicator with a color primary color okay this is not the const value here else we will display the group list so how you can generate that group list is we will first of all create a function here perfect the metric group isn't defined okay so this will be group list we are showing showing our null value here because we have no value in that group list so first of all we have to initiate the search and as soon as the search is initiated we will do first of all in uh we'll check whether the search controller dot text is not empty if that is not empty then we will do uh is loading to be true and then we can avoid database service and here we have to create a function in which we can search a particular user by their name or here we can search the group by their name so this will be database service here we will write search this will become search by name we can take the group name and then we will return group collection dot then we can return where group name is equal to group name this is same as we did for our email when you are logging into the user here you can see and then we can get all those values and and here if you see will search by name this will become search controller dot text and then take all those snapshots and set state set state will do is first of all we have to create this query snapshot this will be search snapshot and we have to create another value whether a particular user has searched so this will be has user search so this will become false and here inside our initiate search what we'll be doing is first of all assigning the value of search snapshot to the particular snapshot and then changing the is loading to be false and as user searched is equal to true so initiate search is done till that part and now we can return as user search if user has searched then we will do list view dot builder else we can just written a container and inside the list view dot builder what we will be doing is first of all we will do a shrink wrap and then we can do a item count which will be search snapshot dot docs dot length so this will be the length for our document and then we can written an item builder with a context comma index and in there we can return the group type so we would have to create that function group tile so let me write widget group tile and it will take values such as the username the group id the group name and also the admin i guess i would have to written something let's say i written hello here and this group tile will contain value which is first of all the username which is my username the way we can fetch a username is we will first of all create a value [Applause] and inside our init function we'll create a function get current user id and name so for getting the current user id and name i would have to create an async function here and i will await get user name from shared preferences then set the state and i can do string okay the username is already done so i will write this value this can be an empty value so that's the reason it is asking me to provide an exclamation mark there and as far as our user id is concerned so we can create an instant of user here and we will take this user and get the current user and as far as this username is concerned and we are passing the username then we can go to our search snapshot dot docs we can take the index and here i can pass the group id then we can copy paste the same thing then we other thing that we need is a group name and at last we need to admin so this will be admin so now the errors are solved but i guess we are not shown anything if i search for react community click on search we are shown with this as hello this means there are there is one group that with this name if we search for react only there is no group with this name so we are shown with nothing so now that is i guess working this means a little bit a little bit of things are working the search app bar is done we have the search in center then we have this this text field also done and i guess the logic behind implementing the search functionality is also working if you see this toggle button this means that if the user is joined in the database and if the user is already present in the group then this will show as a joined button here and if the user is not present in the database then we will be showing an option to join the particular group so how you can check that is if you go to our database service here we would have to create a new function which will return a boolean value what this boolean function will do is it will take the particular user value and check whether that user value is available in the group if that value is available in the group then it will return a true if that value is not available in the group then it will return a false now let's see how we can do that is first of all this will be a future value which will return a boolean value that is true or false so if user joined so we have to first of all check whether the user has been joined or not so this will be the name of the function now for checking that we will need some values like the group name this will also need a group id and we will also need a good username so like i will tell you where we will be needing all those values so this will be an asic function now we can create a reference first to locate the user document this will be user collection dot document and we can get the user id we'll passing the user id inside this database service when we'll be calling this is user joined so you know no need not to worry about that and then we can get the snapshot for that this will be a bit user document reference not yet so now we got first of all we located a particular document then we got the snapshot from that and now let me just create and now let me just wait for user document snapshot or rather this is with the name document snapshot and here we have to check the groups so this will be of type like i guess this is of type list so we can write dynamic and this will be groups groups so this is okay now we will check whether if groups dot contains if this group contain first of all the group id so this will be group id underscore the group name if this exists then what we can do is we will return a true else we will return false okay so this will be written false and now before we call this group tile i mean let's say you search for a particular query then we called a group tile this means if you search for this react community you call this group tile in which you just printed a hello but before printing in hello we will need a function to check whether user already exists in group okay for checking that value we can create join value or rather this will be joined or not and then we can take the username the group id the group name and the admin name and we can create a function joined or not and we will have our username then we'll have the group id then we will have the group name then we'll have the admin and here what we have to do is first of all we will call our function that we just created so this will be database service dot but instead inside this database service we have to also assign the uid so this will be user.uid which we created above here you can see user dot uid you can remove this and now is user joined so the group name will be the group name this will be group name the group id and the username and then we can take that value and set the state as is joined to be the particular value so this joint is not created yet so what we can do is first of all we can create a joint and now if join has been successfully set here so here we can do is we will return list tile content padding let me just do it here symmetric horizontal can be 10 vertical can be five child can be rather we don't have any child in this we have a circle abstar with the radius 30 background color will be as usual our primary color then we will have the child which will be our group name dot sub string 0 comma 1 then to this 2p and uppercase style can be let's say color can be colors dot white let's see whether that will work okay so react community is showing here this is a thing that i really like love about stream builder the data is loaded so instantly that you enjoy working with it so we can assign a subtitle here this will be admin and to get the admin we will get this admin but right now the admin is shown with this long string that means we have to do a string manipulation again we can go to our chat info where we did the string manipulation or rather this was the grouping i'm writing this as the chat info you can take all these values here paste it here and for getting the admin what you can do is you will get get name and this will be admin let's see okay the administrating this is a subtitle but we need the title so for title this will be group name and the style can be font weight can be bold perfect another bold is not looking that good so we will do 600 yeah that is okay admin is advancing the react community and now we will have a trailing button so this will be an ink well button and on tap can be an async function and other than that we will have a child so the child will be is user joined that means if the user is successfully joined to the group then we will show one container in which we will have a value such as the user is joined then we will show the joined button so declaration can be box decoration border radius dot circular 10 color can be colors that black and border can be border dot all with the colors white and a width let's say one i save this right now it is showing me error because the trailing is not happening here we can provide a padding and now that will work i guess a symmetric padding of horizontal 20 vertical can be 10 and the child will be this will be joined style can be text style and color can be color dot wide so you can do the same thing for this also this will become box decoration border radius can be border radius dot circular and color can be our thin color and vertical 10 child will be join button with a text style of white so there is an issue here i guess we should have been shown with the joined button with a black icon let me just see whether this is working or not but click on this okay so this is working if i see some other group that instant group this is joined okay let's see about the flutter community this is also joined and let's see if i go in here first of all let me reload this i think i would have to rerun this it can be joined now in our google chrome because that backslash dot flutter account is not inside that group if you see this okay i would have to log in so this will come back slash dot flutter at the regiomal.com four five six click on sign in we are on our home screen we don't have any groups do this flutter community i click on search okay so right now it is showing me a join button for this flutter community if i search flutter community okay so this is showing me a button to join now but the thing is if you see the on tap for that button is currently not active which means even if i click this join now button nothing will happen so we would have to code that thing now [Music] and that's the important thing for this so i guess before that i wanted to go to our database and we have to create a function this will be a very important function which will be toggling the group join or exit okay so for creating this we will first of all write future toggle group join and here we will need the group id we will also need our username and we will also need our group name we will write this group name now first of all we need to create document reference so for creating the document reference so this will be user document reference user collection dot doc dot id then we will have document reference group document reference group collection and now we will be checking the group value inside the user so for checking that we will be need to there will be a need to fetch the snapshot and the snapshot can be only fetched from the snapshot thing so we'll write snapshot document snapshot we will wait for snapshot from user document reference and this will become get and we will check the value which we already checked here if you see list dynamic group await document snapshot then the group and now if group contains r or rather if user has r group then remove them or also in other parts rejoin reun or rather rejoin them what this means is we will check if group groups dot contains this will be the group id and then a group name if this group exists then what we can do is we will do user document reference dot update and here the thing that we have to update is groups field value dot array remove and this will be like this here we will have group id and then the group name and we will also do the same for our group document reference i remove then the user id and the user name if this is contained if the group contained that values else we will have to copy this paste it again this will be arrow union array union and this will be arrow you add a union also now we can go back here to the inkwell tab and here if you click on await on tab then we will wait for database service the user id will be user or duid then we will do a toggling group information all of this is same and then if if joined if the user is joined then we can change the state to so let's say the account that i am currently in is already joined that group and if i click this join again then we will be toggling the join button that means we will be removing our account from that group so this that's the reason we will be changing the value from true to false because now the new value will be the user has been removed from that group so we can just show a snack bar color sort red and successfully join the group and else set state is joined is equal to is joined it will show a snap bar colors dot red message can be left the group then the group name and here what we can do is we'll change this to green and after showing the snack bar we can do a future dot delay of let's say 2 second after that two seconds we will do a next screen replace or rather the next or rather the next screen and that will be our chat page in which we will get the group id this will be group id the group name the username and at last you can just save this this will not be a const value here and perfect so this was everything for the search screen let's see whether this is working or not if you just reload this i think this is causing issue we'll just run the chrome browser again in backslash dot splitter i thread gmail.com123456 you can click on sign in now we are inside this if you go to search option and search for flutter community and click on search if you are not joined then you will be shown with the option to join now to click on join now then you will be seen that this button has been changed to join and you are redirected here and even if you see this router community the data has not been updated let's see why is this so if you see this user we are showing this the flutter community but we are not shown the value here if you just reload this and see why is this causing the issue you're not getting the members here over the members for this if you see this flutter community tab okay i guess we are doing something wrong here so if you go to our database services instead of adding the value to our group members this has created a new group okay the reason is if you see database services here we have the groups then for the field where we will be doing for the user we have the value inside our groups so we were doing here but for our groups collection we have the values inside our members so that's the reason it was causing error members if you click on save and i guess the issue is you would have to delete this collection or rather we have to delete everything and do it one more time delete everything and also in our authentication tab we can delete these two accounts and if you open your simulator you will not be shown with any value you can just sign out now you can click on register and register a new app or rather register a new account one two three four five six you can click on register this will create the values for you here you can see the user tab has been created we got all of these value right now there are no groups so let's say i create a new group which will be flutter community and click on create group created successfully okay right now we the group is this if you reload the member is this the group section okay now if you just restart this chrome browser also and we will create a new account there with the backslash flutter and then we'll join this group and see whether that join process is working or not the join or rather exiting the group will is working or not so we got this open now we can register a new account this will be backslash flutter backslash.gmail.com one two three four five six if i click on register it opens i also see this once we join the group a new member should be added here let's see i write flutter community click on search we got a new group here okay the backslash letter has been added successfully and if you see the members we are switching the two members here and also inside the home screen we get this flutter community group in this account let's say i this black slash flutter creates a new group this will be react js react developers i click on create i go to my simulator and here i write react developer i click on search we got the group here if i click on join the group has been joined and we also go there let's say the user is already joined and what will happen if we delete the values or rather if we unjoin the group so the value has been deleted left the group react developers and also inside the groups if you see the member react developer earlier there was this c1 shivan okay the value has been added the value has been removed so the joining and closing process is working fine the only thing i guess that we have to do is to prepare the chat functionality and rest everything is working fine so we just need to code our chat page and everything will be good to go but if you see this and here is the option to exit the group but if you click nothing will happen so we can quote that thing also this will be chat page if you see the chat page group info inside the group info we have this app in our app bar this icon button so what this will do is it will just copy the same thing that is inside our drawer so if you go in our profile page and just copy everything this from here and paste it here this will be exit i surely want to exit the group okay and then we will have first of all this and other thing will be on press can be user id can be firebase or dot instance dot current user dot id group join group id will be group join username will be and the group name will be group name for getting the username let me just first of all go in here for getting the username we would have to do the string manipulation so we will write get name and this will be widget dot admin name i can click on save and when this is completed and what we can do is we will do a next screen replace and we can redirect our user to the home page so let's see whether this is working or not right now i have this account so honestly if i click on this if i save this i will remove from that database and i am redirected to my home screen and inside our home screen you can see i have not joined any group because i exited the group that i myself created and now i am shown with no groups here if i search for that react community group or rather what's the name of that group let me see okay the name is flutter community if i click on search i can join this group successfully joined and here i have all the members this is also working if you come to a home screen now the only thing that you have to do is the chat functionality chat page is the last thing that we'll be coding up in this video because this is already a lengthy video but i guess the further implementation to this chat application can be done in future so we will do there you can create a stack this will be children first of all we will have our chat messages here so we will like chat messages and this will become messages function if you see other than this we can create a container with an alignment of bottom center with the width of the screen size or rather the screen width the amount of width that has been present in the device it will take the amount of that amount of it and we can do a container padding can be let's say horizontal uh padding can be a symmetric padding with a horizontal 20 vertical can also be 20. or rather we can do 18 i've seen the way this look so i will just do that child can be row with the expanded text form field and the text form field will have a controller which will be a message controller so we will go here we will write text editing controller this will be our message controller perfect here we will write message controller and then define some styles such as text style color will be white let me see why is this causing the issue we have to also provide the width here so this can be we will have a decoration with a hint text of send a message hint style 16 and a border can be input border dot none now other than that after our expanded we can create a site box i guess if we un if we comment this thing then we are shown with this so here we can write site box with the width of 12 we can do a container which will be of height 50 with 50 and decoration can be box decoration with the color theme dot of context dot primary color and border radius can be 20 and the child can be our icon so the icon will be the send icon so this will be icon dot i guess send color can be color dot white if you see this okay border radius no don't look that good so 50 is okay if you change it to 40 also rather let's say 30 also the 30 is the rounded button here so we got that thing done and on tab will be for that button will be inside this gesture detector on tap send message and then we will also create a function send message perfect so now the thing that we have to do is first of all we have to fetch all the chat messages so for fetching all the chat messages we will do a stream builder and inside this stream builder we will get the stream as chats builder can be our context comma async snapshot which will be snapshot okay this will be a same snapshot and if this snapshot has data then we will return a list view dot builder else we will return a container and the item count can be snapshot dot data dot docs dot length and item builder will be context on my index and at last we will be creating a final file which will be if you go in here this will be message tile dot dot we will import material dot dot here we will write message tile and what we can do here is we will return a container this message style will take some value which we have to provide so first of all we will be getting we will be doing a final string message other than the message we will also get the sender and final boolean value which will be sent by me okay now we can do require this dot message required this dot sender required this dot sent by me right click on save now inside this item builder we will return our message tile which will take few values like the message the message will be snapshot.data dot docs index thought message i think i've already shown you the message format so this will be the message sender in a time so if you go in here message then the sender will be snapshot dot data docs then we'll get the current index and this will be sender and at now the boolean value so send by me will be somewhat like widget dot username is equal equal to snapshot dot data dot dots index and then sender if this will be true then we will be passing the value as true so this is the thing which will be returned when we have the message but what if we don't have any message then that will return a container which you can see right now we only are returning the container so inside this if inside the send message what we'll be doing is if message controller dot text is not empty then we will be creating a map of string from a dynamic of chat message map which will contain a message which will be message controller.text and then we will have the sender which will be widget.username and at last we will have the time which will be datetime.now millisecond since apos and then we can call our database service to send this message but right now we don't have any function inside our database for sending the message so we'll go to database service and we will i guess we will create a last function which will be send message so we will write send message for the send message we will have the group id then we will get the map which will contain the message model so this is chat message data will be an async function so we can go to our group collection and get the particular group inside that we will get a messages section and then we will add our chat message data also we will update the group as the recent message can be chat message data and the message and other than that resent message sender can be sender and recent message time can be chat message time and then this will be two string if you see this we have mentioned this everywhere so recent message sender also i guess this is causing an issue we will just double check whether you have all the values in the right format recent message sender recent message time so everything is done i guess if you just double check this now if you go to this place where we have the thing so this send message will take two values which will be first of all the group id so this will be group id and this will be chat message map and done then we can set them then we can just empty the search editing controller or rather this message controller i am mentioning search editing control and now i guess this should do the work for us let's see the database right now if i enter hello world this is first message if i click on send right now this will not show me inside this collection because inside our message tile which is this we don't have anything as such but if you see the database if we reload inside a database we have updated the recent messages hello world this is first message the recent message center is chancing decent message time as this and inside this group collection flutter community we have this message collection already added which will have a document id and inside the document id we will have a message the sender and the time so this means everything is working here from the backend part we just need to design the message tile first to see whether everything to see how it is looking so we can written a container inside that container what we will doing is first of all we will return the child of column with a cross access alignment of start and the children can be first of all the text which will be sender dot so we cannot just fetch the sender here if you write widget dot sender we will do an upper case so this means this is showing the shivan thing to me and other than that we can text align this in center and we can provide some styles such as font size can be 13 font weight can be bold okay now before that i guess let me first of all create this side box with a height of 8 and the text can be message which will be widget dot message and the text align can be text center and the font size can be 16. okay hello this is the first message now the thing is we have to do some design part here so we can provide a background color here first of all if you do this decoration box decoration if you see the color if this is sent by me which will be widget dot sent by me then the color will be primary color else this will be color.gray 700 let's say okay so this is sent by me that's the reason it is showing me color sort primary color and border radius can be this will be top left radius dot circle 20 top right can be the same thing then we have the top or rather the bottom left which is also with this i can place the const value here this will be if this is sent by me else this will be somewhat like the top left is okay top right is okay this will become bottom right click on save okay i guess i would have to provide some padding so this will be as insect only top 17 bottom 17 left 20 and right 20 and the margin can be if this is sent by me then we will provide margin from left to be 30 else margin from right to be 30 okay above this container we can wrap this inside one more container which will provide some padding which will be like as insects dot only top can be four bottom can be four left will be if this is send by me and it will be 0 else 24 and right can be if this is sent by me this will be 24 is to 0 you can play around these values according to your choice and find the best match and if i save this okay this is looking a bit better if i do the alignment if this is sent by me and the alignment would be center right else alignment would be center left perfect and what we can do here is inside this place where we did the upper case you can do this as color.white and letter spacing can be minus 0.2 okay let's say five yeah this is looking nice we can also change the color here as color dot white now let me just first of all open up my terminal and run the chrome browser again and let's see whether this is working or not right now we have the message from this sender shivan singh if we send a message in this flutter community from backslash flutter that means the chat application is working fine because we have already made a lot of progress in this let me just log in to the backslash flutter added gmail.com123456 if i click on sign in let me check whether this slutter community already have okay so this already have the account here we are showing with this message hello this is john singh hello shivaj there is backslash if i send this okay we are getting the value here hey okay what's up we are getting all those value we can do this and everything is totally perfect here so that's it for this tutorial if you really watched till now then that means already made a lot of progress and learned so many new things in flutter and firebase master class so thanks for watching have a great day you

Channel: Backslash Flutter

Views: 195,319

Keywords: chat app in flutter and firebase, flutter chat app, chat app in flutter, flutter chat app with firebase, flutter chat app firestore, flutter real time chat, flutter firebase tutorial, chat app, group flutter chat, flutter chat app with firebase 2022, chat app flutter firebase, flutter tutorial for beginners, flutter latest tutorial, backslash flutter tutorial, flutter 2022, chat app complete with group functionality, chat in flutter, firebase chat app

Id: Qwk5oIAkgnY

Length: 237min 22sec (14242 seconds)

Published: Tue Jul 26 2022