 Hello guys in this video We are going to see how to create a video call app in Flutter in Order to do so. I will be using one amazing SDK that is Zego cloud For your knowledge, let me tell you that Zego cloud is a global communication service provider Which provides the developer friendly and powerful SDK as well as APIs in order to build Many communication features on your app such as video call video conference chat Livestreaming and so on So they are focusing on developer friendly code. So they also call it no code So you can simply make your apps very quickly and easily So you can take a look over here If you want to add a video call to your website, just the code is less than 10 lines So you can see the code example over here as well Same way if you want to go through the snippet of any of the language, you can just go through over here The links are there simple apps So this SDK basically provide you so many solutions. Let me just go to Pricing and show you the pricing over here So just scroll here. So the pricing are very transparent and you can take a look here They provide the services such as voice call video call Livestreaming in app chat a effects as well Superboard room kit avatars Cloud recording as well and you can explore more as well. So one more thing if you don't want To jump into an implement, you can just go here into UI kits and here Scroll down and you can see you can test a live video call So you can enter your information and test how it works Let's go back to the pricing. So one more thing whenever you sign up over here You will be getting free 10,000 minutes for the same and you can test your app and test different type of apps So they have already mentioned over there Let me first register over here and show you how we can register it and log in into this so you need to fill the information select your country and Currently in India enter your email After filling the email, you need to click on get code this gonna send a verification code on your email and You have to click on the squirrel. Well, let's find it over here and where it is. Here it is next and where it is there it is verify and Just check your inbox and enter the code over So I will be entering the code now. You can have your password Let me keep one so it and You have to agree this And if you want this product updates, you can select this one as well. Let's go for the track So once it is done It will be asking for company name if you want you can fill it Otherwise, you can just you cannot skip it actually. So you just enter Some information. Let's keep it something engineering industry, IT and You have to add your phone number as well Let's add it quickly and just continue And you can see you are getting 10,000 minutes over here That is free in a trial account So just go to dashboard and this is how your dashboard will look like Okay, so now next step is we will be creating a project and Integrating the ceo cloud UI kit with a word letter app So let's create one project over here first Select what kind of app you want to use. So I will be simply going without voice and video call And you can choose any of these Templates, so I just go next and you can specify project name. So what I will say I will just keep this name So you can keep any name and if you scroll down, you can see there are two ways to get started The either you can use UI kit or you can use the SDK Okay, so we will be going with the simple one. Let's go with the UI kit So it will take some time to create the application. Let's wait for the same Okay, so just Either you can click on the start building your app or it would be redirector by default after couple of seconds. So here we will go for flutter and And Just go force Make sure so we are going with one to one call. So just save and start integration Okay, so now here is your detail Your app ID your app sign This information is required. So let's simply go for the console and you can also retrieve that information with you Okay, so once you go to console, you will be able to see your created project. Just go here And here you can get all the information required. So let's jump to VS code and create Project for the same Okay, so let's create a new project over here application and select the folder and You have to specify the name. So the name should vary from this. Don't worry. It is not required to have same name Let's go here and specify this name and we will add letter along with this so Let's create it So meanwhile the app is created. Let's go here and move to this link that is UI kids So this UI kids is basically a lot of kids They have provided in order to make your app quicker and easier. So they provide 20 plus UI kids Which are open source having 50 plus components and Spotted cross platform. So ready to use easy to customize. So all these features are there So let's scroll down here and you can see the source code is also given for different different languages. So let's go here for the flutter and You can see the example is given over here with step by step guide so scroll down and Here what you need to do you need to add this first of all dependency. So I will copy this go to this and in terminal I Will add this command So meanwhile, it is adding the dependencies. So what I will do? Let's create a new folder over here in order to keep pages and Let's create one home page home underscore page dot dot and And here we will be creating the stateless widget. Okay, so let's give it home page Okay, and instead of doing this we will be returning scaffold and let's remove this const and Inside this scaffold You need to add app bar if you want. So I want one app bar. Let's add the app bar And We need to add some title over here. Let's add const text video call app and I'll just make it center title to And this part is done. So after app bar, I need to add three body part So let's add a save area Whose child would be center widget? whose child And just comma Whose child would be Let's say color Or if you need a button only you can simply add a elevated button And just on press we just keep empty for the time being and the second is child. Let's add calls text with a say start call Okay, let's quickly add one comma here and here we will write the code Okay, so let's go back to main and remove this comments find remove And just remove this as well You don't need anything and here you can replace this with home page statcom And here you can also write video call App and one more thing we can write This debug banner we can make it false Save this Okay, so I think dependencies are installed now So what now we need to do let's go back here And they are saying what we need To import this so we'll import this And in order to make the call We need to write this code Okay, so what do we do? We just copy the whole code And create a new page call underscore page dot dot And you can paste this code over here So what else you need to do go back and you can just use this Import over there and if your dependencies added You will not be able to see this error. So let's import this Material as well. Okay, so all well So here we are getting error. Uh, we don't need to do this. Let's remove this line Because it is modified added And now we need to add these information So just you can go to console You can see the app ID is over here. Copy it from here Paste it over there And the second is app sign go back And you have your app sign over here. So click on this eye You can see the app sign and you can copy this Once copied you can hide it as well Go back and this should be enclosed in single code or double code As it is expecting a string Yep Next is user ID So this is basically the user ID of the user So this can be either created logically or whatever way you want. You can create it So for this example, we are just keeping it static. So let's say user one And the username we will say you One Let's say you one Okay, and the next is caller ID. So which is coming from the constructor So whenever we will call this page, we need to pass the call ID So I will let you know what it is. So this portion is done. Let's do rest of the things first Let's go back Go back to the step by step guide Now you need to do what configure your project So you need to change your compile SDK version to 33 So where it is it is android app build dot grid Go here android app build dot grader and just find for compile SDK version So mentioned it What is the version 33 correct and there is a One more thing min SDK version. So min SDK version should be 21 Okay Just save this And in case you want to remove this error as well Here it is. So you can replace this gradle exception with file not exception Save this This part is done. Let's move next Then we need to add permissions. So copy this. You need to add it under source main manifest Go here into source main and android manifest. So here you need to add it before Or just after the application tag Inside the manifest Save this You can close it go back here and what's next so they're mentioned where we can keep this Okay, then we need to do what we need to just create this for Okay, copy this file name Go here. So it should be under android app Go back under android App we have to create a new file with this name And what should be the content? It should have this content copy this Go here Paste it save it Close it Go back Next we need to do what you need to add this line of code So where do you need to write this code? Go to your project android build dot gradle So inside your release just go here App Build dot gradle And search for release. So here it is after this release paste this and save this Done this Go back And that is all for android if you want to go ahead with iOS you can follow the instructions mentioned over Okay, so that's all for this side Let's go back And Okay, so this is done Just save this And we will go here into main from where we are calling this home page And from home page we need to do what we need to navigate to call page. Let's do what Navi Gator Dot push And you need to pass material page route. Let's use material Page route and you need to pass The builder function. So let me just use this And here you can pass that const call page And whenever you use this you need to pass this call ID Now this call ID is one So this call ID if you take a look over here, it is not available on your console So it can be generated by yourself or it can be generated by analogic So it is just a what it is just a string. Okay, so it is expecting string this caller ID is Used in order to connect two or more persons So now we are doing one to one calling if you take a look over here We are using one to one video call. So Two users whosoever are connecting With each other, they should have the same call ID. Otherwise, they will not be able to connect So let's give it a caller ID user One user two like this you one you two. Okay So for both side this caller ID should be same So whenever you develop any application you have to maintain the logic to maintain the scholar ID So that is all let's try to run this letter run And before running this command make sure your device is connected And let's wait for this And I have connected it with some casting software That is this AirDroid, so I will add the link in the description if you want to use that So let's wait for this to execute Okay, so if you can see we are facing some problem over here This is due to my adb on my machine So I tried installing different softwares in order to cast screen So the different softwares use different adb versions. So that is what the conflict is Let's try to launch this app and check. Yep, it worked. So it worked This error will not be showing on your machine So I just tried with the different casting software that are using different different adb version that is causing conflict over here. So I will check this later on And the app is working fine. So what I need to do I just remove this Data cable and I will use another device in order to do video call. So I'm connecting the second device So let me just Change what I just change it to user two And user Two And just save it Now I will run it again on my second device Let's run it on second device And Wait Let me connect second device With casting as well. So install it Okay, so app has been installed Let's launch this Okay, so now it is working on both sides So I don't need any data cable. Let's remove this I hope you can see the screens So let's start with the previous device Start the call It is asking for permission for recording the video. So let's use while Using the app same for this mic If using the app And you can see my video over here same we will do with the second device While using the app while using the app and let me just keep it here And you can see just picture I just muted on mobile phones. You can see on the bottom Right side. There is a name here. This is u2 and this is u1 that is user one and user two Okay, so this also give you A lot of options like you can turn off your camera if you want Same way you can just Do like this and you can switch your camera And you can end your call you can mute And unmute Now I just unmuted you can listen my voice and this is for loud speaker as well So just Okay, so that is all you can see it is very easy I just end the call and once I end the call you can see both side call has been ended and you are automatically moved to your home page Okay, so that is all for this video now. I will add the link of all these UI kits pricing and this example as well in the description along with this I will be pushing my code to the GitHub and the link I will be adding in the description So that is all for this video. If you have any doubt do comment in the comment section. Otherwise like share and subscribe Thank you