Flutter Firebase Backend Course for Beginners - Zoom Clone | Video Conferencing App

hey everyone my name is rivan and in this video we are going to build a zoom clone using flutter and firebase for android and ios oh my god so let me show you a quick demo of the app let me login so there's a login functionality powered by firebase auth we'll do the google sign-in i'll click on continue and select an email it'll log me in as you can see so now i have the option to create a new meeting and join a new meeting so let me create a new meeting i click on new meeting and you can see that we are getting connected to the meeting and we are in the meeting just a one click thing it also generates a random id for us as you can see and shows us the time now you have basic all the functionalities that you would see in a zoom clone so you can mute everyone you can share a youtube video you can start a live stream all of that stuff you can see it in the options you also have the option to mute and say something and to switch on the video so let me join in using another device which is the android device i'll click on join meet and let me copy the room id which is 103. zero zero four four nine and as you can see when i'm trying to join in it will ask me if i want to connect my audio or turn off my video all of that are by default to true but i can change any of these settings so you can here you can see i can modify any so let me say let me do not connect to audio and join in now you can see it asks us for our permission i'll click on while using the app only and here you can see my audio is switched on i can do this now this dark mode is there because of my my phone has the dark mode feature on but you get the basic idea now if i say something let's say over here hello hello i hope you can hear the audio i'm not sure if you could your view from the ios device but i made you sound from the android device so you get the idea you have multiple participants you can even chat over here so let's say hey and i'll click over here and join the chat conversation over here you can see here now the rivan contacts is from the email that i've used to register and here if i say hey again hi let's say you can see naman rana which is another email display name that we got from google so this is the app we are going to build another feature that's great over here is if i select to go over here let's say i clicked on the home button here i get the picture in picture enabled and it's very customizable you can play along with everything and we're going to build this app i'll uh we are going to add extra functionalities so i've exited the meeting and if you go in the meeting section you can see the room the name that we joined and the date we joined on you can customize all of that and all of this data is stored in firebase so this is what we're going to build we can even log out and there's full authentication happening so nobody's above that so before continuing the prerequisites for this tutorial is just to have a basic knowledge of flutter firebase and dart no more prerequisites are required we'll build the whole application together just a basic knowledge is enough no need to be an expert in this one last thing our discord server has been set up the link will be mentioned in the description do make sure to join in if you're interested and chat along with the developers it's a pretty cool community with over 40 members as of now so let's start with the app now so now first thing you need to do is create a flutter project but before doing that i want to show you the flutter version we are using so this is a flutter version we are using which is flutter 2.10.2 which is the latest one so now um let's create a flutter project i'll create it in the desktop so i'll use cd desktop to go in the desktop place and now i'll run the command flutter create and i'll name this so since i have zoom clone already created over here i'll say zoom clone tutorial and i'll click on enter this will create a full fully made flutter project with all the necessary boilerplate code now i'll migrate to this project so i'm clicking on tab just to go to the other uh suggestion that it has given me over here and i've click on enter now to favorite uh to open it in my favorite code editor which is vs code i'll just click i'll just type code with a full stop because i'm in the directory in which i want to open the code and i'll click on enter this has opened it in vs code now what i like to do is go to the lib folder and over here and over here i will remove all the boilerplate code not all actually but all the non-necessary stuff and i've added an extension of comment remover which i can access by doing command shift p on mac and over here i can just type remove all comments which will remove all the comments for us and then we can go up again this has removed all the comments from this file not the other file if we go in prospect.aml you can find the file the comments but only from the current file we are in which is a pretty cool extension link will be mentioned in the description below now over here just for testing let me type constant text and let's say hello world and let me open my is simulator which is which can be done using open dash a simulator and i'll click on enter let me also terminate this terminal that i have our iphone has loaded up so now we can run our app you can run the app in two ways which is using flutter run or you can just go over here click on run and run without debugging or run the start debugging any one you prefer i'll go with this and let's wait for our app to launch all right our app has loaded up and now if we go where you can see hello world so now the next thing we need to work on as well having the screen and creating the design of the login screen let's do that so the first thing we need to do is get the colors dot dot file which you can come over here and find the link will be mentioned in the description below all you need to do is copy all of this and add it to the colors dot file so to save the color dot file we are going to save it in a folder called utils which is basically all the utilities we need and over here let's just create a file called colors. and save it over here having that in place we need to even have add a theme to our app and the theme is going to be of the dark theme because that's what uh zoom we are going to create now we can do themedata.dark and let's call it as a function and then we need to copy with all the existing uh properties that themeddata.dark has and we just need to replace the scaffold background color which is essentially the background color if i save this you can see um not yet you can see because i have not added a scaffold and this is a scaffold background color but now if i do background color and let's create a file for that a class so let's create it in the screens folder and let's call it login screen because that's the first screen we are going to work on let me import material dot then i'll create a state less stateful widget let's create that only and let's add a cons to the constructor as well now we need to return a scaffold now doing that much we should be getting our results so if i replace the home with a constant login screen i think everything should work and it does we are getting this background now if i remove this theme actually just this copy with function you will see the difference so the next thing we need to do is create routes for our file so we are going to use named routes for the navigation in our app and we are going to have slash login which is the screen that we created right now and we'll have context and we'll pass in a constant login screen for now let's do this you won't see any changes but now working on the login screen we need to remove this debug banner that we can see so to do that we're going to do debug show check mode banner and set it to false and also change the title or of our application to let's say zoom clone right here you can find it now let's go to the login screen and work on this application on this part of our application so now we need to return a scaffold where there will be a body and we bought we need a column because we need to show an image over here somewhere like this and then a rounded uh button so let's have that so the first thing we need is the children and the children will first be a text that we forgot i forgot to mention which is just this so what we need in our application is basically something like this here we have a text then our image and then a rounded navigation bar something like this so to do that what we're going to do is so in the children we're going to have a constant text of start or join a meeting and then we need to style it and these all styling that i do in my application i um just use uh trial and error methods just to get the output that's pleasing to my eyes so you can do the same it takes time and it's like random values testing and then going forward all right now we have that now it's right at the center right at the top we don't want that so you can either you wrap this column with a safe area widget that will avoid all the notches so it will come down over here but i don't want that either so what i'm going to do is return a column but in the columns main axis alignment property which means that we can set the configuration of how the elements in the column are going to be arranged we can have main access alignment dot center because i want everything to be center aligned and as and when the things get piling up like the image the buttons then as and then we can just go up and up you get the idea right all right so after this we need to add an image now to get the image we need to go to this url i'll mention this in the description below it's available in the source code so what you can do is go to the onboarding.jpg file and well let me click on it and click on download or you can just right click and download to the images so now over here we are going to create a new folder called assets and in that we are going to create images now in this assets folder i like to keep images and fonts but we are not using any external fonts um so i'll just drag it to the images folder here you can see um one second i think we copied it to the wrong file and it should be in this over here awesome so after this is done let me remove this and here we need to add an image asset so we'll have image dot asset and what do we name it assets slash images slash onboarding dot jpg now we know that if we need to use image dot asset we need to mention it in the prospect.aml file as well so let's go to the spec.aml file and i open this dialog box using control and p so you can do the same if you are on vs code and scroll down you can uncomment both these lines and paste whatever you copied over here to your and it should work fine so we have that now it will automatically run flutter pubget and if it's not running then you can open the terminal once again you can go here and type flutter pub get and it will run the same thing for you again if there is any issue it will let you know where you are in the output section right now in the debug console you can see we are getting an error like this so this is because we haven't restarted our application when there is any changes in the prospect.aml file we need to make sure that we re-run our app again and then the changes will come in all right now since that is happening and we have our text and image let's work on the other thing which is a custom button that we want so let's create a widgets folder because well i like to separate it into widgets and now here we can create custom button dot dot let me import material dot first and now we are going to create a stateless widget so let me call stateless widget and i'll name it custom button itself you can name anything but i'm too bad at naming stuff let me return an elevated button here and elevated button has a few required properties which is child and on pressed we have that all right now what do we want the child as now the child will be a simple text that will say whatever the custom button asks us to do so for now let's get it from your final string text and we need to require this text so we will have required this dot text and here we can pass in the text and the style which will be a normal textile of font size 17 all right now even i'll save this and add a custom button over here now it requires a text for now as i'm saying for now so let's say login and i don't think we have imported the custom button so let's import this i i brought this option menu by clicking command and full stop and then importing this library which comes right at the top all right for now so let's save this and here you can see the login button and this both of them showing up pretty beautifully so that means our work is being done but now you can see that there's a difference i want this thing of start or joiner meeting to be a little bit more up and this to be a little bit more down of the image now you can see that the image is in the center so like we want both of them to go up and down so what we can do is wrap this image with the padding widget and instead of doing all eight which we save and we can see that there's not much big of a deal over here what we can do is symmetrical and we can do vertical because we don't need to go in the left and right direction we just want to go up and down so that's what vertical allows us to do instead of writing only top eight and bottom eight we'll do vertical eight and eight is pretty small a value so let me do 28 and it's still not looking good so let's do 38 now it feels a pretty good you can do even more if you like but let's just stop at 38. i feel that if it's a small value you can use the normal values otherwise you'll have to use media queries just to make it responsive but let's let's uh not go over there now the next thing we want to do is after this elevator button and we have a child now we need to style our button so the first thing we need to do is give it a color and we don't want this color right so what we can do is replace this color and to replace this color we are going to use a style property which is in the elevated button and we can use elevated button dot style from and over here we can pass in the primary color and the primary color is going to be the button color which is mentioned in the colors dot dot file if you go in the utils package here you can see it's a different type of blue but it's still a blue but it's the color i've extracted from the zoom app so we can use that and here you can see it's looking good enough now let's uh increase its width and make it a bit rounded so let me have a minimum size first and we'll have a constant size which we'll have double dot infinity which is the maximum space available and 50 which is the height of our application if you hover over this you can see a width and a height property this is the width which is all the available space and the 50 value which is the height here you can see that it came like this now we don't want it like this right because we need to curve it from here and from here we don't want it to take so much space so what we can do is wrap this elevated widget button with a padding other approach you could take by the way would be to minus something from here but let's just use padding and then we can have edge inserts dot all 18 whereas that would be a pretty good padding and here you can see the button went a bit more down and now it's looking good now let's just round it because that's what the zoom application has as well so now over here in our style we'll have a shape property and the shape property is going to be rounded rectangle border as the name suggests we want it to be a rectangle we don't want it to be a perfect circle if it would be a circle it would be something like this let me draw it out something like this and we don't want that right we want our application to look something like this that's why we are going to use rounded rectangle border and here we're going to have a border radius which will be border radius dot circular 30 and a side because we want uh let's if we save this much you can see our app showing up but if you just examine it properly you can see that there's a bit of blue border color that we can see now that blue background color is because of the default theme of our application like the default blue color that we replaced with and to replace that blue color with the button color that we have in our colors.dart file we'll use a side property which is constant border side and it will be a button color this will add our custom border color and now this looks good all right now we need to do something of about the on press property so we need to get the on press property which we'll do from constructor as well final and this won't be a string right because it's a function so we are going to do either you can do this which is function and it's called on press now you cannot pass in this because it's just storing the address of the function and we don't want that we want to call it so that's why we are passing this else you can use final void callback on pressed and require it from the constructor here we can pass the on pressed property as well and now it's working so now let's go over here and click and have an on press property as well um we're not getting the autocorrect option not sure why now that error came in because i typed in a full stop instead of a comma over here so nah yeah now in our login screen what do we do when we click on the google sign-in and by the way we just need to replace this with google sign in instead of login but you can keep login or sign in because that's what uh zoom has because it just has a sign in or a sign up button but we are not adding that we just adding google sign in right so now we need to connect to the so whenever we click on this button we need to add a google authentication and to do that we're going to use firebase so let's configure that so now for the google sign in we are going to require a few plugins and we need to that to connect to the firebase authentication or firebase in general so i'll mention all of these packages in the description below you can check them out and read the readme which is prefer uh preferred method uh you should always go through it so now you can see that these packages are published three days ago and are maintained by google itself so it's pretty safe to use them all right now let's add them and to add them i'm going to press command shift p again because i have a pub spec assist named um vs code extension or package so i have to add them and if i type something over here or some package it will add that to the prospect.aml file by getting the latest version from the net and then well just adding it to the perfect.yaml file and including that in our project so i can type cloud underscore firestore to add the firestore plugin in our spec.yaml file then we can have firebase core then we can have firebase auth and the last plugin we need is google sign in this will allow us to do google sign in authentication with firebase so yeah now having that in place we need to go to the firebase console even this link will be mentioned in the description and click on add project now here you can have uh any project name i'll now type in zoom clone tutorial because again i've created this project over here and i'm going to disable the analytics but you can do you can enable it i mean it's up to you if you're a business then analytics is a great thing for your application now in the meantime that's happening let's make sure all of our stuff is happening and here we are getting an error because it doesn't know what this is so to fix that what we can do is go to the login screen again and here we can run flutter pub get actually pub get not whatever this i've typed now you can see that the error has gone away so we can go back and here you see no authentic like no error for firebase auth web all right so now our project is also ready for zoom clone tutorial let's click on continue and here let's go to the authentication tab click on get started and here when this loads up you can see additional providers like you can have so many uh sign in base for your application you can have any of them and we are going to have google but that's the only one we are going to do if you want um sign in with email and password or anything like that i mentioned that in our in one of my in my multiple videos of mine where we create tik tok or instagram so you can check that out now over here we have enabled google sign in but before that we also need to enable google like firebase firestore because we need to save the user data to our firestore as well and here we're going to select southeast asia because i'm in southeast asia and click on enable which it will do for us now let's get started with the on pressed functionality for our google sign in and to do that we are going to have a lib folder and and in the lib folder we are going to have a directory where we call resources because as and when our app grows bigger uh it will be hard to maintain all the logic stuff with the ui files that we have and here we're going to create auth methods dot dot so suppose you want to increase the app like make it a full production ready app you can just clone this repository afterwards or just follow along with this architecture because that's the one i prefer here we are going to initialize firebase auth and we are going to call firebase auth dot instance just to get the instance of the auth variable and here let's create a function for sign in with google let's create it as an asynchronous function and since it's an async let's try and catch it so that if there's any exception we get to know and we can resolve them basically handle all the exceptions and now we have added google sign into our pubspec.yaml file so here let's create a google user and well let's sign them in so we can have final google sign in account which can be null google user is equal to await google sign in dot sign in so we signed in the user and here we are now getting final google sign in authentication google auth which is equal to await and we'll take this google user variable and check for authentication so like authentication not check for it but just get the google sign in authentication type for it now we will get the credential of the user which will be google auth provider dot credential not like this dot credential and here we are going to provide the access token which we will get from google auth here access token and we need to get an id token which will be which we'll get from google auth dot id token now all of this code is mentioned on the read me section of flutter fire which is the official flutter and firebase or documentation you can copy them from there or you can just follow along typing if you like to type then we need to create a user credential where our firebase auth package comes in so we lab user credential equal to await underscore all the which is the variable that we created here dot sign in with credential and we'll pass in the credential that we had here now we are perfectly signed in and i mean it will even reflect in the authentication tab of our application all right now that means uh after doing this much all our data is going to be stored in firebase authentication but i want to even add the data to our firestore right because i want the data to be stretched shared in our database just to for my knowledge that how many users are there and also to store extra data like we're going to store the user's meetings right like whatever meetings he has attended so we're going to store that as well so we need to keep track of our users in firestore database all right so now what we need to do is here we can have a user variable which will be user credential dot user and now we can check let me put equal to now we can check if user is not equal to null that means there is a user and the sign in has happened perfectly fine we can have if user is not equal to null and if the user credential dot additional user info dot is new user meaning that the user has created his application just right now then we need to add the data to the firebase right else otherwise the data is there in the firebase already all right if you don't get it i'll explain it in a bit of time again but let me just type this code out and now we need to store to the firebase to store to the firebase i'm going to initialize a firestore variable as well which will be firebase firestore firestore which is equal to firebase firestore dot instance and here we'll take the firestore instance and do firebase firestore dot collection users which is our collection name dot document user dot uid dot set and with this set method we are going to add data to our application i mean to our firestore dashboard as we can see right now what do we what all do we need to store well first of all we can get the username or display name whatever you call it and that will be user dot display name then we can have the uid which is user.uid as you have used over here then we can have a profile photo now if you want to store any additional details it you can do so as well so we'll have photo url and yeah this is all the stuff that we need to store now explaining this if condition to you again basically your you can check you can see that the user is nullable so user credential.user can be null so here we are checking if the user is not null that means all is going well then we need to check if the user credential dot additional user info with this we get all the necessary info of the user like any additional info we need like profile provider id username anything like that you can use so here we have is new user meaning if the user has been created just right now then we can check with his new user and now uh if it's new user then we need to store to the firebase if it's not a free uh new user meaning the user has already signed up before that means he's logging in then we don't need to well store to the database right because we have already stored it by send one more request to our database and here since this is going to be an asynchronous process here you can see future void we can just do await but it won't matter because the return type is void and it doesn't return anything at the end of the day all right so after this all our application part is done but i want to make a few more changes like i want to mention the type of our function which will be future and if we didn't return anything it would be void but we are going to return a boolean value and here we are going to have a boolean res equal to false value meaning that there is a result like what is the outcome of this function and when will the result be true whenever the user is not equal to null right which is here not over here make sure to not put it in the nested if condition because here we are checking if it's a new user and then only we're doing but if it's not a you new user if it's a user logging in then also our result is going to be true that means the authentication process has been completed and here the result is going to be false but that's our initial value as well so if we don't change it it's not a big deal else we can change as well no problem and now we are getting this error message and we don't want to print this error message so what we're going to do is have a build context and let's show a snack bar now to show a snack bar we will be showing snack bars multiple times in our application like whenever we'll be using an asynchronous process just to give a good user experience that if you have any error we're going to send it back to you all right so what i'm going to do is go to the youtubes folder and here create a utils.dart file where you're going to have a show snag bar function and here we are going to return a build context like we are going to receive build context because snag displaying snag bar requires context and then we are also going to have a text here we are going to return a scaffold messenger dot of context dot show snack bar and this will be snack bar and we want the text as text now the positive point of using this function is whenever we use this show snag bar whenever in our entire application or you clone this repo and then you try to modify it according to your needs then all you need to do is to or to display a customized snack bar is just change the properties of this snack bar yours like suppose you want elevation you want to change the background color or you can do it with this single function and it will affect your entire app and that's a pretty good thing right and now you want to not show the snack bar so what you can do i mean show the snack bar sorry so and what do you want to show in the text message so it will be e and now e won't give us the proper object right like it's returning an object and if we do dot two string it will convert the object to a string but it won't be a really good uh error message so what we can do is use on firebase or exception which will catch all the firebase auth exceptions that can happen if we don't put that we put this only then it will not it will catch any exception that occurs including firebase or exception but if we do on firebase auth exception it will only catch the firebase auth exception and if we put that in our e you can see that it's a firebase auth exception right so it will give us additional properties that we can use with some something like e dot message and this will just show the message of the firebase auth exception object if you don't understand this well just try to make an error in your google sign-in and you'll see the error that's showing up now we need to return the res as well because it's of the type future boolean and you can see all our errors have gone away so now let's take this and go to the login screen here let's initialize our function called final auth methods i'm going to mark this as private in case you know all methods just goes in some other way like just for safety it won't go outside of this because we are in the class login screen state and this login screen state is a private class itself but just for safety purposes let's do this now let's do odd methods so now we'll go over here we'll make this function asynchronous as well and here we'll have boolean press equal to auth methods dot sign in with google and we'll pass in the context which we receive from the build context here now if the res is correct so that means we got the variable so if the google authentication was successful what do we need to do well we need to go to the home screen right so what we can do is in our screens we can create home screens here we are going to import material package and we are going to call it uh state full widget because we are going to need that we won't be needing stateless widget because we are going to call set state in our home screen i have built the application beforehand so i know about it now we can again go to the main.dart file and register a route which will be slash home screen and we'll have context that just displays a constant home screen here if the res is equal to true so we can use navigator dot push named because you have named constructors and here we are going to pass in slash home actually home sounds better not home screen for a user as well so let's do that now let's see what error we're getting we're not getting any error awesome so now since we added extra packages of firebase auth and everything let's restart our app and run without debugging and let's wait for our application to load up and actually before running there are a few things we need to run and we even got this error which will resolve so actually i just realized that we didn't add any app to our uh to our firebase right we need to connect this app to our firebase console so we can click on apple and let's get the app bundle id first of all to get the app bundle id just go to the ios click right click and click on open in xcode this will open it in xcode which is like the uh where you do ios development so from here we're going to get the bundle id and ios apps will just run on uh just run on mac or mac os it will not work on windows unless you have a virtual machine running or something some configuration like that it's not going to run and you won't be able to uh set it up correctly so i won't recommend it and you and i would recommend you skipping to the android part because that's the only thing you can do on uh windows all right now let's have zoom clone android as the app nickname and click on register app now we need to download the google service info.plist and it has downloaded for us let's click on next next we don't need to follow all of this because that's for initialization in ios development using swift or objective c which are the programming languages for ios development and we continue to the console and actually it wasn't android it was ios and we didn't name it properly make sure to rename it properly but i'm not going to do that now let's go to our downloads and from here let's select this and pass it to our runner make sure that you have ticked this this and this and click on finish now let's close our x code and now we need to make some more configurations so just to run it on ios we need to add some more conditions like we need to go to the pod file here we need to uncomment this line and put in ios platform ios 10 because that's how the process goes because firebase requires a minimum port level version of 10. now we can run um let's say cd ios just to go to the ios directory and here we will run pod install and it will install all the necessary dependencies all right having that in place we also need to make a configuration for google sign in sr app will clash if you go over here you can see that in the google sign-in package we need an ios integration we need to make some more steps just to get the ios integration running and you can see it requires ios 9.0 or higher so make sure to do that and now we have completed step two three one two three and four and even five actually even six sorry for that but um we have completed all the six steps so we just need to take the seventh step which is just copy all of this and go to ios runner in four dot plus so again i'll press command p and go to info.plist here at the bottom after this all the keys i will put this key i'll cop i'll take this much select this much and go over here now as you can see to do replace this value so we need to replace the reverse client id with this string so let's just remove this and go to our google services info.plist file and here we need the reversed client id which is this part here so we can copy this much go back to over here and here we're going to replace the string which is this part this is my plist file so that it works right all right now we can go back to our home screen like the root project and now let's try to run our application on our ios i've clicked on run without debugging and let's see what happens our app has finally loaded up so if you come over here you can see that an exception was thrown auth methods was called now the main error is this no firebase app default has been created so we need to run the firebase initialize app and that's why we are getting this red screen so we can go to the main.dart file make this function asynchronous and call await firebase dot let me import the firebase core package and call initialize app we get this firebase uh dot initialize app from the firebase core method now we have done this but we also need to ensure that the widgets have loaded up and then our firebase initialize app is running so we can do widgets flutter binding dot ensure initialized all right if you hover over this you'll get more info on what this is all right all right so now if we restart our app everything should work fine and now we are able to see our app running properly now if i click on google sign in you can see it's working it's not crashing our app as of now we click on continue we select our email and we are not getting any error messages and we are also on the home screen because our home screen doesn't have any scaffolding yet all right now if we go back to our console and go to the authentication tab here you can see position emailer and now if i go to the firestore database here we have user's collection with the uid and well we have our data stored over here which is pretty cool now let's configure this for android so for the android part we need to well go back to the google sign-in plugin just to ensure that there is any extra configuration required well we need to register our application we will get a google services.json file and then uh we have done all the stuff required so we can go back to our project overview click on add app click on android and we need to get a package name you can get it by going to build.gradle not the this one but the build.gradle which is the android slash app one like which is in the app directory and if you scroll down you can see com.example.zoom clone tutorial which has my application id i'll save it over here we'll call it zoom clone tutorial and we also need to get a sha1 key so so we also need to get a sha-1 key and that is because it is required for google sign-in or phone number sign-in we need it for google sign-in or phone number now to get the sha-1 key go to your terminal and print this line i mean i'll mention this line in the description below make sure to use this line and click on enter you'll get your sha 1 key now i have this sha1 key what i'm going to do is copy this and paste it over here i'll click on register app i'll download the google services.json file i'll click on next and we need to follow these methods so first of all i need to go to my build.gradle which is in the project and copy this line i've clicked over here and copied it i'll go to the build.gradle android here and paste it over here now i need to go to our project app directory and build.gradle so i can go to this android app and click over here now let's copy this line and we need to scroll up paste it below apply plugin code in android or over here as well anywhere but it should be somewhere here or just over a year both of these stuff work now we can go back over here actually we need to make more configurations in our build.gradle android app file so here we need to set the minimum sdk version to 19 and we need to enable multi-decks so we'll do multi-decks enabled and set it to true right and then we can go to the login screen clear this off and let's get our pixel 5 emulator up and running which has this part let's get this aside now i'll go i'll select the pixel 5 from your which is this device and then click on run without debugging again and let's wait for this app to load up and as you can see we've got an error over here now this error is because well first of all let's just complete this we left it midway and now we need to go to our finder in the downloads we downloaded the google services file but we didn't paste it in our android folder right now these are the mistakes even i make like after making a lot of projects in firebase so it's okay to have these kind of forgetting issues in your app as well now let's rename this to googleservices.json file and not dash to and now let's run our app again and hopefully we have not missed anything this time and as you can see our app has loaded up and it's ready so now if i click on google sign in here you signed in as possession emailer because that's a email i've used in our app in my application as well and now if i go i mean we are on the home screen already because that's our that's what our home screen looks like so now the only issue i have with the app right now is if i restart the app you can see if i restart the app we are again on the login screen and we don't want that we need to process our state so to process our state we are going to the main.dart file and let me close the terminal for now and in the home screen in the home property we need to get a stream builder now what is the stream builder right so this stream builder will build the widgets according to the stream and what is the stream going to check well it's going to check the auth methods like has the auth changed or not so that's what we're going to do so just to separate the ui from our logic we are going back to our auth methods and here we are going to create a getup for our user so stream user get auth changed and here we are going to access the underscore auth and check if the auth state changes or not so like auth dot auth changes or state changes right we use this function auth dot or state changes and now if we go back here in our main dot dot file and in the stream we are going to return auth methods dot auth changes or auth changed anything would work whatever you name it and now we're going to pass in a builder now this builder we're going to get a context and a snapshot containing all the details of the user right because that's what we have passed to a stream an odd state changes this will return a user with a question mark like if it's nullable or not right now over here in this with this snapshot we are going to access all the data that we got through the stream so why are we using stream right so whenever the user or state changes so suppose the users or state changes suppose the user is logged in so to display the changes in real time we are going to use stream builder here we are going to do a snapshot dot connection state is equal to connection state dot waiting then we we're going to return a constant center child circular progress indicator because the connection state is waiting right i mean we haven't got in our stream builders data yet right now if snapshot dot has data not over here i'm sorry you have to go outside this if function if snapshot dot has data then you want to return a home screen so you can do return constant home screen and after that we're going to return a constant login screen now what does this mean your we ah so snapshot can be of two types right i mean connect it can actually be of four types as you can see over here connection state dot active done none waiting so here we are basically checking if the snapshots connection state is waiting that means we haven't gotten the snapshot yet so it's waiting so we are going to return a circular progress indicator now if the snapshot has data and that means that means it has brought some data for us that means that the user has logged in so we're sending it back to the home screen and if it doesn't have data if the connection state is not waiting then we're going to return a login screen because it doesn't have any data right now if we restart our app go back we are on the home screen and we are not getting any error as such but you get the idea right we are on the home screen that means our state has been persisted now the next thing we need to work on is well showing a bottom navigation bar uh top bar where we'll show the list of icons and then the body just saying click a button or anything like that let's do that all right so let's just close all the save files and now let's go to our home screen convert this container to a scaffold whether you don't want to show a black screen that looks very ugly right so now let's have a bottom navigation bar and now the bottom navigation bar has to show well a few things so now it requires a few required arguments that we're going to fill in let's add items because that's the only argument we need but like which is the required field but we need more arguments so let's add our items and these are going to be a constant because we just need a simple bottom navigation bar item and this bottom navigation bar item will have an icon of icons dot comment underscore bank which will be for meet and chart so like that's what it will say that's all yeah and now we can copy this we need to have at least two bottom navigation bar items at least that's why we're getting this error but we're going to have five the second one will say meeting meetings and now icons dot lock clock then this will have contacts like person underscore outline which will stand for contacts and then finally we need a setting so we'll have settings underscore outline which will be set things all right now if you go back you can see that our footer has come over here but it's looking really bad so let's give it a color we'll have a color which will be background color and we want it to be footer color not cutter footer color from our colors. file and here you can see our photo showing up now we don't want it to be a bottom navigation bar item we want it to show up for bottom navigation bar not for an item for the whole bar itself that's the footer color now let's restart the app and now we it still needs certain changes so we need a selected item color and the selected item color is going to be colors dot white so whatever we select suppose this is the icon that's selected for now it's going to be well you know white color then we need an unselected item color which will be colors.gray as you can see they brighten it up a bit now we need an on tap and the on tap is going to be a function that we'll create called on page changed we'll take this on page changed function put it here and we are going to have on-page change now what is the on-page change going to do well we need to have a global variable called in page is equal to 0 which is a selected item that we have like the selected item index so to say and now whenever there is an on page changed it will get an end page from the constructor aware so like if i go where here you can see it returns an integer and then an ontap so here we are going to get in the constructor end page and now we are going to set state and set the global variable page to the local variable page like the global argument like the parameter that we have and now just to reflect the changes like if we save anything it won't do anything because we haven't set the selected item index so that's like selected not selected i think it's called current index so the current index is going to be the page so let me have page right and now if i do this you can see our navigation bar item showing up but now as you can see we don't want this kind of bottom navigation bar right i mean if you want you can just keep this it looks good but we don't want this kind of bar we want a static bar which is like the zoom bar so what we're going to do is set the type to bottom navigation bar type dot fixed and now it has become a normal one and now it has also gained its color which looks so good right awesome so now you can see that this icon here doesn't look well i mean you can see that the text of this icon is pretty small and when we do this it's font size increases you get the point so what i'm trying to say is whenever we select on the item you can see its font size increases so we need to make sure that the selected font size and the unselected font size are of the same size so if we do selected i font size and hover over this you can see that its default is 14 you can see over here so what we need to do is change unselected font size to 14 as well i think it's this way yeah and now if we make any changes you can see both are the same size throughout that pretty good all right so the next thing we want is well just to display a list of you know first an app bar which says the meet and chat or meeting or whatever we want and then a row of icons which will say you know about the create meeting join meeting so you're at the top you're going to have an app bar first of all the app bar will say well elevation will be 0 because it provides an unnecessary elevation all the time the title is going to be a constant text which says meet and chat for ios is going to show up in the center right and for i for android it will show up over here so we can explicitly mention center title as true and then finally a background color which will be a background color right because we want both of these to merge up now if i remove the elevation from here you can see a bit of a shadow right and we don't want that i want we want both of these to merge up pretty quickly and that's why we set elevation to zero awesome so after this we need a body and in the body we are going to have well a list of icons let me just draw it out for you so we have a row here and in that row we are going to have an icon here an icon here an icon here and a fourth icon here somewhere and then we have this much space just to show whatever extra information we want to show but we are not going to show anything uh ridiculous as such you know so let's go back here and then we'll have a column and the column is going to be children now the children will have a row because well we have as i said we have a column then we have a row of i all the icons and then we have all the unnecessary space so the row will have a children and the children will have the same kind of buttons or icons we can say so we're going to create a new widget so that we can reuse it and we'll call it home meeting button dot dot if you find a more specific variable name just keep that i'm very bad at you know finding a variable name and then a stateless widget called home meeting button then we can have a gesture detector because you're not actually going to create a button we're going to make something look like a button because we won't we don't want actually so many options we'll have on tap and we laugh on pressed which we'll get from the constructor here so let's get that final void callback on pressed and let's require it from the constructor on press all right now in the child we want a column and this column is going to have children again now why is this a column right i mean there is this then a column i mean one like this then like this then like this and then like this so an icon on the top then a text something like that just to explain it to you in a better manner the icon is going to be a column which is somewhat like this then it will have an icon inside of it and then a text like this so that's what we are going to create so in the children we are going to have a container not just an icon because we want to have a background color and some properties like that so we'll have a decoration because we have a background color to show up and now the color is going to be a button color then a border radius will be the border radius dot circular 16 then box shadow of a list of box shadow but it requires a list of box shadow that's why we're passing in uh just as we just want to have a single box shadow then a blur radius of 10 then a color of colors dot black dot with opacity 0.06 and then an offset of const offset of 0 comma 4 all of these values are not i mean i've just you know tried and tested and got in all of this now if we go back we're not seeing any changes because we have not initialized home meeting button so let's do that let's go over here and have an home meeting button we need an on pressed and we have nothing for now awesome you're not seeing anything because you have not set a width and a height to our container or a column so let's pass in a width and the width is going to be 60 height the height is also going to be a 60 because we want it as a square and here you can see a container showing up brilliant now we need a child because we need to display an icon inside of this and the icon is going to be whatever icon the user passes the color will be colors.white no matter what and the size is going to be 30. now we can go back to the top get the icon data which is icon and require it as well required this dot icon now if we go back to the home screen we'll fix this error later but you get the point right we just want to display an icon inside of this now after this container we need to leave some space so we'll have constant sized box and we need a height of 10. and then we need a text of text which we'll get from constructor again and the style is going to be a constant text style color being colors dot gray now we can take this text go to the top final string text and then we are going to require this required this dot text now i think all of our home meeting button options are done so let's have them so we left text and for the home meeting first meeting button we are going to have a text that says new meeting and then an icon and the icon is going to be icons dot video cam and let's save this much just to see what we've gotten looks pretty good now we can have this paste it down and we'll have join meeting and we'll have add box rounded again we can copy this paste it down and we'll have icons dot calendar today last time we are going to copy this and actually we have not edited this so we need this for scheduling a meet which we are not going to have in our application and then a shared screen text so we'll have share screen and for that let's just show an arrow upward around it awesome so let's save this and you can see that it's showing up but it's not good as of now so what we need to do is go to the row and have main access alignment as main access alignment dot space evenly so that it spaces out everything properly and well we have everything properly shown whereas insane right now after this let's go down if you want to show anything down as specific you can do that i mean i'm not going to do that right you can do that because that would be pretty interesting what you would do then we can have expanded a child which will be a center child text saying create or join meetings with just a click i'm not sure i'm making so many spelling mistakes all right let's put commas just so i can format the document all right so we have done this and now create a join meeting with just a click let's just style it so that it doesn't look such and now we'll have a font to wait and the font weight will be font weight dot bold we still need to increase its font so we'll just keep it somewhere like 18 and yeah looks good so now we need to work on the new meeting or the join meeting option so whenever we click on one of these we get redirected to another screen and well let's have the join meeting option for us let's do that so this is the plugin we are going to use to have meetings in our application and with this we are going to power all the meetings that are going to take place in our application so as you can see it's just the jitsi meet 4.0.0 version that i'm using right now it will get updated uh i feel and then we can copy this and go to our post by camel or just go to the pub spec assist to add jet see me to our application so let's go to our pub spec camel and here let's pass in jet seamate version 4.0.0 all right it's running flutter pub get for us let's stop the app execution because we don't want it to run and in the meantime let's look at this so jetseameet is an open source webrtc javascript application that uses jitsi web video bridge to provide high quality secure and scalable video conferences i'll mention the disadvantages of using jetseamate later on in the video at the end of the video but for now let's look at how we can set it up it also has its own advantages like it's pretty easy to use and all of that stuff so yeah for the configuration in ios well those who are again reminding those who are not uh using ios like mac os they cannot configure for ios it won't be proper and you won't be able to test your applications and uh if you're using windows or any other software or operating system you can do it for android but not for ios you can skip to the timestamp i've mentioned in the description below to continue for android so for ios we need to make sure that our platform is 11.0 so we need to go to our pod file and you can see a flutter pub get worked now we are getting this error over here because of jet c meet web so what we can do is run flutter pub jet again and in the meantime we can change this platform ios version to 11.0 and down here instead of having this it says that we need to have this but when i tried this in my example application like the demo application this didn't work so i made my own and if you go to the source code and in the ios folder and pod file you can scroll to the bottom copy this line and paste it down here and this will work because well this works and the thing in their readme didn't work for me all right so now if we go back to the home screen and now let's try to run our app actually we need to make sure to do one more thing that is go in the info.plist file and here you can see they want to add all of these three or two permissions we can copy this go to the info.plist file and put it down the google uh sign in key let's save this much go to our home screen and run without debugging let's see if you're getting any errors or not now and as you can see our app has loaded up that means just see me it has worked without any difficulties but in but in case you have any difficulties what i would suggest is go to the ios folder open in xcode and it will open in xcode try running it from your in most cases it will give you an error of pip view controller not found and it will be it will showing it will show an issue from jitsi meat sdk but um what i would like to do is will run the application from here and in case of any errors it will show up somewhere here just click over there instead of uh clicking on the error message what i would like you to do is click on the warnings and hit enter for all the warning suggestions that it will give to you and start running on them that's how even i would so i mean i tried different solutions and this one worked the best for me i'll mention this in the description below i mean uh the one in the readme didn't help for me so yeah that's how i proceeded with it in case of any errors you can just click on enter run over here you're somewhere it will show you errors now you can click over there in the errors and well just resolve all the warnings that it gives you won't be able to resolve the errors because it won't give you the suggestions to fix it and don't edit any files instead just click on the warnings and then click on the warnings and get started that's how i did it all right in case you have any doubts let me know in the comment section below i'll make sure to reply to it and resolve it all right now after this what i would like to do is create a video call screen so for the video call screen what i'm going to do is create a new screen called video and actually before this let's try to run it on our android devices so i'm i've exited i'll make sure to start pixel 5 and now let's do some changes for android now for android we'll copy this dependency from here which we have to update so we'll go to the build.gradle file and here we are going to have 4.3.6.3 instead of 4.1.0 we have to replace that and then we need to make sure that um we even change this so if we go to the gradle wrapper so we need to go to the gradle dot properties wrap gradle.gradle.wrapper.properties and then we have to edit the last line but um let's try to run it without updating this because uh it didn't work for me earlier and one thing they don't mention uh which we need to do actually they have mentioned all right um first of all let's go to the android manifest file here we need to pass in the this line so we can click on enter pass in this line then we need to make sure to add tools replace line all right and now we need to go to the app build gradle so we will go over there and we need to change this minimum sdk version to 24 not to 23 all right and now uh we'll add the proguard rule in in a bit but um here we also need to make sure that the flutter.compile sdk version is fluttered autumn compile sdk version but the target sdk version is 29 right now if we run without debugging for our pixel 5 emulator let's see what we get and now in the meantime we can work on proguard rules so in our build.gradle android dash app so over here we need to go and in the build types in the release tag we need to add these three properties that are mentioned here so we can copy this and paste it down let's format this and now we also need to make sure that we add proguard.rules file in our app directory because that's what we need to add and the proguard rule is going to be something that's mentioned over here not over here but if you go to my github link it will be mentioned there so android app proguard rules dot pro just make sure to copy all of these lines because they don't mention most of the stuff that's there and we can have proguard rules dot pro and paste it down let's exit this and let's rerun our application since it has not builded yet i mean built yet so yeah let's try to run it again and see what you're getting and as you can see we are getting an error aware and this error is not related to our app it's related to the storage space that is required by our android emulator so i quit the emulator and i want to show you a fix for this so i'll go back to the android studio if you're getting this kind of issue what i would do if i was in your place so i would go back i would click on more actions and in the virtual device manager i'll go where there are multiple ways of doing this all right you can click on edit and edit all the settings for the your device but what i'm going to do is wipe all the data i'll click on yes and you can see size on disk is 3.2 gb so i'll exit this and now i'll try to run my pixel 5 emulator again now this will be a brand new emulator it doesn't have all the extra applications that i had earlier because i wiped the data and now i'm going to run my app again on it if we have built our application it means that i think we are successful in uh making jetsea meet work on android emulator so if you're getting any errors please let me know in the comment section below it's it's it's kind of difficult to have jetsea meet in your application embedded in your application with flutter because of well it's it's documentation is actually pretty poor all right now let's try to run it again without debugging and i'll show you the output once we get it all right now if i click on google sign in i need to enter all of these credentials again because i wiped the data so i'll see you after i enter all the data so i would assume that jetseameter is working pretty well for now so if you have any you know storage issues or anything like that what i would suggest you to do is run flutter clean with this method you'll be able to you know clean all the flutter files and then rerun our application so yeah if you have any doubts like that just first find it on google please and then if you don't find any solution make sure to comment down below and i'll try to help you out all right now having that in place what we need to do is whenever we click on join meeting we need to make sure that um we are able to go to the video screen actually but before that we need to work on the new meeting screen so whenever we click over here a new application or like a new meeting starts for us so how are we going to do that all right so our app has loaded up and now you can see that it's working so i would assume that the jitsi meet is working for now but let's see if you're getting any error if we just add the joining meeting option in our application but now the next thing we want to work on is well displaying the correct screen right i mean if we click over here we're not seeing the appropriate screen so what we're going to do is create a new screen let me just minimize the folders and close all the saved files and here we are going to create a new screen called history meetings screen dot dot and this will contain all the history meetings that our application has so like we are going to save it right in our database so that's what it's going to have and let me name this history meeting screen all right so now we will take this go to our home screen and now we will create a pages variable here which will be a list of pages that we should be navigating to after not an end sorry a list of pages which will be a widget yeah so uh these are the pages so whenever we click on any of this we need pages right separate pages for them so these are the pages that we have the first screen we have is going to show us this screen so all of this part here this part so what we're going to do is extract this widget so we'll have we can do ctrl shift r or just right click and go to refactor and refactor this so what we're going to do is extract widget and we're going to extract this widget to call it history meeting and now in our body what we can do is take this return column part go over here and return this for over here all right now let's resolve this error by importing the necessary packages and it has been resolved now we can again remove this class from here we didn't have to specifically make the class because we could have refactored and removed this was a good technique then here we are going to have history meeting screen right so this is what we have now we are going to take this pages and we are going to pass this in body but since this is a list we need to return one part of this so what we're going to do is pages at page which is a global local variable which changes whenever the page is changed so if we are on the zeroth page which is the first page over here it will show us the necessary widget but if we go on second for now we should get an error and we are getting an error all right now we are again here now let's pass in actually we didn't need that in this part so let's rename this this is not history meeting screen this is let's say meeting screen this is not the history meeting screen history meeting screen is not going to have anything it's my bad because i thought that's history meeting screen let's just rename this just call this meeting screen my bad and we're going to call this meeting screen all right and now over here we're going to have meeting screen so let's import that and yeah we have meeting screen again just to test our application that we've done everything collect correctly let's click over here and we're getting error that means the wrap is running now here we're going to create history meeting screen now finally and now we're going to import material package we're going to have a stateless widget again and we're going to call it history meeting screen and we're going to return a container for now but we'll fill this as and when we have stuff so let's have history meeting screen let's import this let's even have a text widget that says what our next is going to be which is contacts and finally a constant text which says let's say settings all right now here i didn't notice we had five so let me dissolve my bug there are many bugs that i made during this application really sorry for that all right so now if we go over here you can see meet and chat contact settings all of the stuff showing up properly that means we have done everything correctly so now the next thing we need to do is whenever we click on the new meeting button we need to create a new random meeting for the user how are we going to do that let's go to the meeting screen which has all this code and in the on pressed we are going to create a new meeting so now let's create a resource known as jitsi underscore meet underscore methods dot dot and here we are going to have just one function known as void create new meeting all right so now let's create a class for this as well i wasn't sure if we need to make one but let's make it so that it's organized and let's pass it over here so for the void create new meeting we will make it as an asynchronous process and now we're going to wrap it with a try and a catch block all right now here we are going to have feature flag and you know what instead of just um randomly typing all of this stuff let's go to the documentation and copy all of this so we can add this so let me just select the proper code and paste it over here and now we need to require some stuff so let's require this and now we have to make some changes as i said the documentation is not updated and it's not good as such in my opinion so let's type in the room and the room is going to be whatever room we receive from our argument so let's say string room name and let's have this part as required since we are going to require multiple fields in my opinion i'm not sure so let's make it a named constructor and now we're going to pass in a room name all right now if you have your own server url make sure to type in the server url but we don't have our own so it will take the normal random jitsi meet server then we don't have a subject as well if you want you can put in now to display the name and all of that stuff we can again go to the auth methods where we create a getter basically to retrieve all the data of the auth methods which is basically stored in this auth variable right so what we can do is user get user and we'll have auth dot current user and let's put in an exclamation mark over here because we are going to use this user only when the current user is there right because we are logged in and then we are using it and now to display the name what we are going to do is in user display name we are going to have user actually we need to also enable firebase i mean auth methods right because we need to import them so let's have auth methods equal to auth methods now let's take the south methods and put it down earth methods dot user which is the getter dot display name right now we need the email so we can get the email similarly we have auth methods dot user dot email the user avatar is going to be auth methods dot user dot photo url for audio only we need boolean values so we'll have boolean is audio muted boolean is video muted and we need to require all of this so let's have that and that now we need this much so let's have audio only removed because uh zoom doesn't have that is audio muted and is video muted all right hope i'm not forgetting anything and now finally we just need to print our errors right cool so now if we go back to the meeting screen and here whenever we click on new meeting what we need to do well we will have our jitsi meet methods dot create new meeting and instead of making it create new meeting let's type in create meeting that sounds much much better and let's create a meeting so in our on press function let's go to the top over here and let's have create meeting and we're going to have an asynchronous function oh and let me put this and this will be create new meeting because we want to create a new meeting right and now for this what we're going to do is remove the constant because we're going to initialize a variable that is going to be a final and initializing a variable so we'll have jitsi meet methods and let's type in jit see meet method equal to c meet methods we take this justine jitsi meet methods and we'll do jitsi meet methods dot create meeting now i i made this create meeting instead of create new meeting because we will also use this method for joining a new meeting all right then for the room name uh we are creating a new meeting right so to this to create a new meeting what we need to do is create a random uid and don't ask the user for the random name so we are going to do that using where random is equal to random and now string room name is equal to random dot next end and now i want to create a random seven digit number all right so what i'm going to do is put in one two three four five six seven eight zeros plus seven zeros over here that is the lower and the upper limit i hope this is seven zeros all right and now convert this to a string because room name is going to be a string which is just a number right and now for create a new meeting you're not going to ask the user if the audio is muted or not because he is going to be alone in the meeting so we are going to set both of them to true awesome now we can go to the home screen and instead of adding a meeting screen let's have this and let's rerun our application just to see if our work is happening or not all right now if we click over here and we haven't binded anything to our function that's why it's not responding so we can have create new meeting passed in over here now let's try to run our application and here you can see a new meeting we are joining a new meeting but i'm not sure if it will show up on this android emulator so i'm going to switch to the ios simulator all right so i'm going to switch to the ios simulator uh if you want to test it on windows make sure to test it uh on the android physical device that will help because it didn't work for me on android emulator probably because the sdk version is 32 and it requires 29 but i'm not sure so try it on a physical device it should work all right so our app has built and here you can see the app i'll remove the android simulator from here and now if i click on new meeting and we're not getting any error and we are in the meeting that means our app is now working really well and now if we click on allow access it will allow access but we can't hear it because there's no other user i'll show you the demo again at the end of the app with my physical device but for now let's keep this let's exit the call and here we have exited as well now the next thing we want to work on is whenever we click on the join meet we need to go back to the like another screen where we'll show the output uh basically so let's do that all right so now if you didn't understand what i meant by what i said you can definitely wait i can i'll explain it to you again in a bit so basically we need to create a file known as video called screen dot dot and now we're going to import the material dot and here we're going to have a state full widget i guess so that we can use the init state functionality that we have so let's have a constant video called screen and here we're going to have a scaffold now what i mean by this is well first of all let's go to the main.dart file let's have this route initialized as well so we have video call context and then we'll have video call screen now this will be a constant and we'll have video call all right so now if we go to the meeting screen and here we create a function known as join meeting and what we basically need to do is navigator dot push named and the route name is going to be let's say slash video call whatever we passed in the routes in the main.dart file and we need a context so let's accept this from our join meeting so we have a context and now we need to bind this to this on pressed so we'll have join meeting the context password perfect so now if we click on join meet we are on the new separate page which is pretty good now we can work start are working on it so yeah first of all we are going to have an app barge that just says you know join and meeting so we'll have an elevation of zero again then a background color of background color and then we need a title of constant text which says join a meeting now this will have a style and the textile will just increase the font size to 18 because i if you put in uh if you don't put in a text font size it will not look like zoom this does look like it perfect and now since i said that the center title is not there on android and we want it so we'll do center title true now in the body we need to pass in certain things so the body is going to have a column and this column is first of all going to have a text field and i forgot to pass in the children property and in the children it's going to have a text field now this text field is going to have a controller which we are going to create then it will have max line of one because the root this is for the meeting id all right so whatever meeting id the user wants to join in with then the text align will be text align dot center and the keyboard type is going to be text input type dot number because uh our room that is going to be generated is only going to be based on numbers and not any alphabets that's why now we need to decorate it and we'll have a constant input decoration where we're going to have a fill color of secondary background color from our colors.dart file then we're going to set fill to true then and then a border of input border dot none and then a hint text of what is this room id right so room id all right cool now let's create a controller which will be a text editing controller so we will have late text editing controller and you're going to name it meeting id controller and let's create an init state function to initialize this so we'll have meeting id controller equal to text editing controller why have we done using the late and why didn't we do it something like this right we could have done it like this as well but you'll uh know why we did like this you know in a short period of time when we create another controller for our name that's when we'll understand why we did this method all right so now we'll have meeting id controller and let's see what we're getting and it looks something like this it says it's not initialized let's try to run it again and see if it's initialized or not so if we go to the join meeting screen here we have a room id cool now we need to make sure that the text field is of a certain height so we'll have sized box and we'll have a height of 60 and let's add some padding to it as well so the padding is going to be content padding edge inserts dot from ltrb meaning left to right a left top right bottom so from the left i want 16 then 8 then 0 and then 0 again cool now you can see our application looking a bit different that's fine all right after having that in place the room id we need to create something similar for our text field the name the name input if the user wants to change anything right so we have that and now we'll pass we'll ask for the name from the user here so let's have name and here you can see room id showing up is this strange yeah its name showing up awesome so if we go to the controller here we will have name controller and now for the name controller we'll have again another controller name controller and now i'll uh tell you why we add in we add text editing controller initialization in the init state now for the name controller we don't want this to we don't want the text input field to show up empty as fast right we want it to be a with a certain value and that certain value is the name is the name of the user if like the user has signed in right we want to display their name so we are going to do that using the text property and we are going to have final auth methods auth methods equal to or methods now we will have auth methods dot user dot display name right and now if we go to the join meeting we see naman rana with which is my which is like the name of the email that i'm using showing up over here that's why we added here if you added your like this it wouldn't work something like this this wouldn't work because you cannot use the initialize you cannot any use this in the initializing part itself right that's why we created this in the init state awesome after that we need to leave some space so let's go back to the size box and let's leave some space of height 20 and now an ink will showing where we create a custom button of let's say joining so we have ontap and we're going to have join meeting right now the child is going to be a constant padding and this padding i've decided on my own so let's have batting edge inserts dot all eight then the child is going to be a text not a constant text because we have made the padding only constant so you have join and the style is going to be a again not a constant because we have added a constant over here and the style is going to be font size 16 all right now let's take this join meeting function and create it at the top so we have join meeting initialize provider and now we can see a join button showing up as well now the next thing we need to work on is creating the two meeting options what i mean by this so basically here we need to show a meeting option which has something like this a text showing up then and then a switch showing up then again an option then again a switch something like that so let's work on it to do that what we're going to do is go to the inkwell and here we are going to have a sized box of height 20 again and now we're going to create a custom widget known as meeting option so we'll have meeting underscore option dot dot here we are going to import material dot and then we are going to create a stateless widget called meeting option now we are going to have a container return where the height is going to be 60 a fixed height then the color is going to be a secondary background color then the child is going to be a row and the row will have children of one a text so let's have text and we need to accept the text from the user and then a style and i'll just mention the text style which will be of the font size 16. so we can have final string text and we'll have required this dot text awesome so now let's try to pass this meeting option down over here so we have meeting option and the first text that we will have is don't and i want to put something like this but it's giving me an error right so what i can do is put in backslash t don't join a meeting and instead of doing this what we need to do is this let's see something like this i hope this works and yeah it does awesome so the only thing over here is just to have a little padding from all the sides that will look very good so what we can have is a padding of 8 from all the sides i think that should be fine yeah looks good now let's have a switch and let's create a switch as well now the value is going to be received from the constructor again so let's have final this dot i mean sorry final boolean is mute we are not going to check if is audio mute or is video mute let's just put in is mute required dot this is dot is mute and we can put is mute as the value now in the on change we can have another function but what we're going to do is unchanged we are again going to have a final function of bool which will be is on change all right so what is this function well this function basically tells that we need a function from the year from this screen wherever we are using meeting option which will have a parameter of boolean which is going to be passed by this on change because it has a boolean type as well and we just need a function that has a parameter of boolean all right so we can just pass in on changed and now we have that so now let's go back over here and let's add the required fields all right now is mute is going to be is audio muted or this video muted so we have to create those variables up top so we will have boolean is audio muted is equal to true a bool is video muted equal to true so initially they are going to be true and that value we are going to pass into is mute so let's have is audio muted and on change what we are going to do is whatever value we get we need to change that right so what we are going to do is create a function let's create a function out of this ui so we can have is video actually audio right because we are in the audio section so we love is audio muted and let's create another one and this will have turn off my video and the on change is going to be is video muted now you can see i've typed joe don't join a meeting over here we want don't join audio or mute audio something like that whatever you want right now we will have outside of the scaffold and outside of over here this build function we're going to have is video muted instead of naming on change like this i think we can name it on audio muted and on video muted alright so now we can create these functions all right now what do we want to do so whenever there is an audio mute we want to set state and we want to change is audio muted equal to whatever value we get so we can have boolean value so it will be boolean question mark value because that's what uh on change will return a dynamic boolean and now over here as well we will have set state let's remove this and see if you're getting any error you're not that's cool now let's have set state for the video muted as well so we will have this video muted and we will set that to value as well and let's pass in over here awesome and we have both of these showing up now you can see that they are very close to each other so we can go to the meeting option and in the row we will have main access alignment as main access alignment dot space between and you can see the showing up but now the last issue over here as you can see is this button is not specifically for ios right well you can see that this but this kind of button the switch that we have shows up for android it doesn't look good on ios so what we're going to do is switch dot adaptive with this widget dot adapted by putting it in front of multiple widgets you can make sure that this widget is clearly adaptive meaning if you're on ios it will show something like this if you're on android it will show the previous widget of switch right now this does look better and that's amazing all right so if you have room id let's say one two three four five six seven eight nine and click on join nothing is happening well that's certainly because we haven't created a join function so let's create a join meeting so for the join meeting what we're going to do is essentially before doing all of this let's just dispose as well i mean let's create a dispose method i'm not getting the option of dispose so let's create it manually and in the dispose method we need to make sure that we dispose these controllers that we have the name controller dispose and we also need to make sure that we dispose of the jitsi meet so we have jitsi meet dot remove all listeners so that there is no uh you know bad effects after effects or anything as such we need to do this for the um you know this will avoid all the memory leaks and we need to do this for the meeting screen as well which we can do or let it be you can just do it by yourself all right so the next thing we want to do is in the join meeting let's go to the top and again create a method of final jutsi meet methods jitsi meet method equal to jitsi meet methods we'll take this jitsi meet methods and we'll do just jetseamate's methods dot create meeting now the room name is going to be whatever room name the user provides us with so that will be the meeting id controller dot text and now the last thing we need to do is go to the create meeting function and you can see that we are giving the display name as the original name now that's possible only in the new meeting not in the join meeting not in the join meeting so what we're going to do is create a new string called string name and this will not be a required field and it will be empty for now now here we'll check if the name dot is empty then what are we going to do if the name is empty that means that the user has not provided the meeting name like the user name let's type your username so if the username is empty which will be empty when we create a new meeting we are going to give the username so we will create a new variable here called string name and this name is going to be whatever name that's there over here and we'll mark this as this all right else the name is going to be whatever the name is else the name is going to be the username so let's put an else condition and let's pass it over here so with this what we've done basically is well let me just put it over here before i forget and then i'll explain all right so here what i've done is i've not made this uh as a as a compulsory field and not a required field because uh if the user doesn't uh pass in the username which will be in the case of creating a meeting so whenever we create a meeting the username will not have any string that means it will get the login user display name that it has so if the username is empty that means we have created a meeting so the name is going to be the display name provided by auth methods else the name is going to be the username that's provided which will be provided over here so here what we can do is pass in name actually it's called username and the username is going to be namecontroller.txt awesome so we have created a meeting let's try to run our app and see what we're getting all right so if i click on join meeting i'm redirected to a new room so let's get one two three four five six seven eight nine and click on i'll i'll just to show you that it's working i'll mute my audio and i'll unmute it and then join and you can see the mute icon is not muted as you can see here it wasn't muted so that means our app has been working we're not getting any errors in our terminal and now we are asking to join and well let's see what we're getting now that's because i've created a new meeting before that you can see it over here so yeah now if i try to join in with let's say something like this it won't throw us an error like that you can see and now if i change my name to rivan ranavat and pass in some stuff like this and click on join you can see rwanda not showing up cool right awesome so this is how we're going to have our application run let's exit this call and yeah so that means creating a call and joining a call is working so the next thing we want to work on is whenever a user creates a meeting or joins a meeting we need to make sure that we store the meetings in the firestore and display it in the meetings tab so what are we going to do well we're going to create a firestore methods resources so we'll have firestore underscore methods dot dot again we're going to create a class out of this so we will have file store methods here we have final firebase file store firestore equal to firebase file store dot instance and here we will have void add to meeting history string meeting name this is going to be an asynchronous process so we'll also have a try and catch block awesome so now what do we want to do well if there's any error let's just print the error nothing more and in the try we just need to well get the firestore dot collection users dot document and we need the user id so let's have final firebase auths underscore auth equal to firebase auth dot instance we'll take the sort and have auth dot current user dot uid and we'll again have a sub collection we are storing it in sub collection because we need to create like an object right because in the we are not just storing the uid of the user or the name of the user we are using we are storing the name of the meeting and the created ad like the time it was created that's why we need to so we'll have meetings and then we will have add functionality now in the ad what do we want well first of all the meeting name which will be meeting name and finally a created ad property which will be date time dot now all right now we will let's see if you're getting any error no we're not awesome let's remove this firebase core package that is not needed and in the video call screen we will go to the create meeting sorry in the jetseameet methods here we are again going to have on the top we can have final fire store methods firestore method equal to firestore methods we can take this firestore methods and have uh firestore methods dot add to meeting history and we're going to have the meeting name so what is the meeting name meeting id or whatever we get from here what is it room name awesome and thus we add to the meeting history so let's save this and all right so now if i click on join meeting actually let's just create a meeting that would be faster all right this should happen now let's refresh our console firebase console and here we have a meetings collection a randomly generated id and here we have created at and meeting name fantastic so that means it's working all right now what do we want to do well we have to go to our history meeting screen now instead of returning a container let's return a stream builder right now this builder will have a context and a snapshot and that it will return something but we want something like this and now we also need a stream now what is this stream well let's go back to our firestore methods and let's let's create a stream now this stream will be getter and this getter will let's name this meetings history and we're going to return firestore dot collection basically whatever we had over here now that same thing again dot snapshot and that's what we are going to have now if you want to be particular about what the type of the stream is going to be you can come over over this copy all of this and paste it over here that will give you the exact uh you know precise type of the stream which will help us ahead so basically we want to get a stream a snapshot of all the documents in the meetings collection of that particular user and now if we have stream what do we want to do firestore methods dot meetings history now in the builder we can again check if snapshot dot connection state is equal to connection state dot waiting then we are going to return a constant center child circular progress indicator right now after this we are going to return a listviewbuilder so after the loading process has taken place we are going to return a listviewbuilder and this listviewbuilder will have again a context and an index that will give us the title will be let's say the text and the text that will show up is room name and not this but um it will actually return directly a widget so no need of this let's create an arrow function and it will return a list tile all right let's copy this from here and paste it over here all right the title is the room name and what is the room name well it's just snapshot dot data which can be considered as dynamic dot docs at particular index and that's meeting name all right so this is what we have as you can see this part so now if we go over here we're not seeing anything because we haven't set an item count i mean we can see but you know we are getting this error and that's because we have not set the item count and the item count is going to be all of this that we have dot length because docs is a list that's why and now if we come back we're not getting any error and you can see the room name you can style it ahead uh but i'm not going to spend much time you know just styling it now again we need a subtitle for the text and here we are going to have joined on and now we need to format the date to format the date we're going to use a package known as intel link will be mentioned in the description for it so now what are we going to do well joined on and we're going to format the date that we have now what is the date that we have well basically all of this but instead of meeting name we are going to have created at so we have created add and let's run our application in the time so that we don't waste more time right and now we need to do date format over here so date format all right so now we can have date format dot y m d which will be something like this yeah something like this and now we can have snapshot let's have something by md and now we can format this we'll have another bracket and we'll put a bracket over here we don't need to put a bracket over here but instead over here and now we can convert this to date as well because this is not in the date it is in the timestamp format right so yeah we have this all right now this should work i hope so if we go to the meetings you can see the time stamp showing up again if we refresh our app and go to the meetings again it's showing a timestamp that's because we haven't added the format method on ymmd so let's have format as well so date format dot ymmd as a function dot format it according to this convention and now if we go to the meetings joined on march 1 2022 that means our app is working it's working and now you can style it ahead by bolding this then making it look neater and prettier but i'm going to end it over here and now we have new meeting join meeting and the meeting history last thing we need to work on is showing the settings so what we can do is in the settings part let's go to the home screen dot dot file and here instead of showing settings here we are going to have a custom button with the text log out and whenever this is on pressed we need to make sure that we use auth method so let's have final or methods or methods and now we have to go to the auth methods to create a sign out function so let's avoid sign out asynchronous try and catch well print e dot well let's just print e and here we are going to have auth dot sign out perfect now we'll have auth methods dot sign out hopefully this works and here you can see we are getting instance member methods can't be accessed in an initializer so we can remove this let's cop this and remove this and have auth methods dot sign out like this this will work awesome now if we go to the settings you can see a logout button as well and if you click on logout we have logged out again we can sign in i'll select a gmail account and we've joined in you can see in the meetings joined on march 1 9 20 22 that means our app is working pretty well now just to show you a demo of the app working on android and ios both simultaneously again i'll connect my android device and get back to you all right so as you can see our app has loaded up on my android emulator i'll click on google sign in and you can see i've signed in automatically all right so now i'll create a new meeting and connecting to my meeting and here we have a meeting as i've mentioned to you in the demo itself that i'm using a dark mode that's why all of these buttons are not visible but now if i go to the join meeting and join over here so let's say the room id is 1 4 7 8 5 seven six one and join it's connecting to me to the meeting and well you can see naman rana joined the meeting there are two naman rahnawats now but that's fine now we can chat hey and if we tap over here you can see a new message came in hey awesome so now if i type if i say something from my ios simulator hello hello hello hello i hope you can hear two voices um basically let me just mute and i hope you could hear the two voices that would show up um and and now i've switched on my camera and if i show it to you on both the screens we can see all the stuff happening and now this is what we have i hope this is clear to you so that means everything is working i hope the app was interesting now now there are disadvantages of using jetseamate some of them are well as you could see the documentation is not pretty well set up and it's very difficult for a beginner to go through it and follow along i had difficulties myself i spent two days just on one error that wasn't mentioned well in the documentation just to set a jet see meet up now that's one thing and the other con i feel is the app size becomes too big because of this application it takes a bit more time to load up and a bit more time to do all of that stuff in my opinion i mean so that that's the thing to consider now the pros as you could see were uh jitsi meat could be set up pretty quickly if we knew how to go about things and how we could uh integrate jet see meat in our application so if they improve the redmi readme that part is done if you are setting up the jetsea meet on your server there aren't much documentation or there isn't much documentation of how you'll go about well adding the details like all the setting up the server stuff you won't be able to do by your own like it's very difficult because of jetseamed now another pro that i didn't mention is that jet sea meat is an open source project and even the jet sea meat sdk that we're using is open source so anyone can contribute to that and improve their read me as well as the other stuff that's inside of it so that's good encryption and all of that is secure with jitsi meat it's it's pretty well secured and there's no need to worry about it the other pro that i forgot to mention is if we click over here you can see in the more options you can share a youtube video or start a live stream using this app which is pretty insane you get to go do all of that inbuilt in your application and even start recording right so these are the pros and cons you might want to consider and the other con you might have noticed is that we aren't able to customize the video call screen according to our preferences we wanted to update according to our preferences right i mean if we don't want any of this option you can still customize it and you know add some listeners which i forgot to mention completely basically whenever um let me just close this and go to the jet see meet methods over here whenever we have jitsi meet methods and in the join meeting you can see that it has a jitsi meeting listener so in this listener whenever we do jitsi meet listener you can listen to multiple methods as you can see if you go to the documentation as well you can see that it has multiple uh jitsi meet methods like on conference will join on conference joint so if you want to do any extra stuff you can do it with this but the only con i feel is that this isn't this ui isn't very customized customizable according to my preferences i don't want my ui to look something like this i wanted to match it with my theme or something else so that's not possible yet that's the only issue but there is more customization which you can go through the documentation and find it out like having listeners you're having any of these options that you have enabled or disabled you can see like if you want chat to not show up it will not show up all of that stuff so you can go through and add all of that stuff but this is all for the tutorial thank you so much for watching see you in the next video

Channel: Rivaan Ranawat

Views: 66,606

Keywords: flutter, zoom, clone, firebase, jitsi, meet, full stack, mute, unmute, complete clone

Id: sMA1dKbv33Y

Length: 136min 50sec (8210 seconds)

Published: Wed Mar 02 2022