How To Build Flutter Video And Voice Call App with Zegocloud || Step-by-Step Tutorial

Diego cloud is one of the world's leading real-time audio and video cloud service provider and Diego Cloud enable Enterprises and developers to easily and quickly obtain a real-time audio and video communication capabilities by integrating a single SDK and also enjoys smooth reliable audio and video experiences with high quality even in Weak Network conditions so it is there is no need to start building from scratch you can go live in minutes with just a few lines of code hope that sounds useful interesting so in today's video I'd like to show you how to build a video call up with zero cloud service so with that said let's Jump Right In zego Cloud supports all cross-platform whether it's being on Android iOS on the web flutter react native on Windows Mac OS and also electron as well so much has been said let's start building our app [Music] you can go ahead and create an account with Google Cloud so once you are done you'll be navigated to the admin console for you to create your first project so for now let's head towards the disable Cloud documentation and see how it's been done clock comes with a pocket which is a pre-built feature-rich core component which enables you to build one-on-one and group or voice calls into your app with just a few lines of code as I said earlier you can integrate on all platforms even on flatter reactivative iOS 100 on the web but in today's video I'll be focusing on flatter So Below is the demo of the pre-built core component that this is a Google Cloud UI kit comes with so here are the recommended resources I want to get started hope you also want to get started right so click on the button for a quick start so we have a suggested video you can go along and also to integrate the SDK you need to run flatter Pap at Zago UI kit pre-built call as a dependency and before we do that we need to first of all create a flatter project so I'll do that quick in here flatter crates and I'm going to name the projectors video call up so in here it will start creating my project [Music] so once it's done you need to change the directory to the video collab folder and also open that in Via score with code in a period so it open that in vs code so these are the basic folders and files you see when you generate a flutter project and basically the source code is found within the lip folder within that we have the main.dot file that comes with the default code that's the counter app when it generates a flatter project so I'll just choose my emulator in here and start the project so pressing F5 for just running debug your code [Music] so this is just the counter app that comes when you generate a new flutter project when you click on the button there the value they got to increase so I'll just clean up the code a bit by getting rid of the comments and also the home page state for widgets and start everything from scratch so in here I'll be creating my custom home widget so it's not yet created so I'll head to us and create a new folder within the link folder and name it as screens So within the experience folder I'll be creating a file a file called home.dot so in here you need to generate a stateless widget and give it a name as home and for now let's return escort food so the scaffold is basically class in flutter that accept many widgets So within the main dot that far we need to import our home we just created and I mean on that file let's first of all important material that to get rid of the errors so we need to import our home from the screen folder there we go So within the scaffold it as a body property so for now let's retain a test with Lego Cloud app yeah let's go Cloud video call up so you can see it over there it's not in the safe area so let's wrap the test within a widget known as the safe area so you can see it over there there we go we cannot see it over there so for now let's head towards the zego cloud documentation and art there's a good UI kids play both call as a dependency to our project so let's copy that flutter pop Arts below cloud [Music] it's a good UI Kate spree.com and place it within a terminal and install that as a dependency [Music] foreign [Music] foreign the next step is what import that package so I'll copy that and I hope just import it within our home I'll be creating a new file doing that it's means I'll name it as call Page dot that So within here I'll just copy whatever it's found in the home screen and place it over here and we need to change the home to the call Page and also the test day and proceed foreign [Music] console and get the app ID and also the app sign to do that let's first of all bring our zero Cloud UI kit preview to call widgets within our app so I'll copy that in here and within the code page I'll just return there's a go Cloud UI previous call so we need to get the app ID and also the app sign So within the admin console you need to create a new project I already have one project created so create a new project and choose voice and video calls and click the next button you then proceed to give the name of the project and start with the UI kit so since I already have one created I'll be using that one so I'll grab my app ID and also the app sign in here foreign [Music] [Music] we need to create a variable call ID of type string and passing and pass that as an argument and also we need to require within the Constructor as well [Music] you also need to pass the context within the Callback function [Music] so now you need to configure some settings within the Android you need to change the compartment SDK version to take three so within the Android you move into the app folder then the build.grad offer and change the Concord SDK version 233 let's go we also need to set up the upper mission in the androidmanifest.sml so I'll copy that in here [Music] you also need to prevent the obscation Obsession means to make something difficult to understand and also to prevent that we need to create the product rules dot profile within the app folder and paste it within the code below [Music] foreign [Music] code to the release part of the build.gradle within the app folder [Music] we need to add the upper mission to the IOS as well so that one is going to be easy so I'll copy below the code within the iOS folder we move into the runner folder and info.p list we add the code to the Dead part so that's pretty much it for the configuration [Music] so let's get rid of the safe area in here and retain the Center widgets so that Center this in the chart property I'm going to specify a real widget here and the real widget in 10 also takes in children where you can specify different or multiple widgets within it and the first widget is going to be an expanded widgets and the expanded widget takes in a chart property I'm going to specify a test form for within the child property [Music] So within that you are going to specify it is in the decoration which in turn also takes in an input decoration So within the input decoration we are going to let's get rid of the coins in here within the input decoration it takes in the label test I'm going to give it a test of joined and core by ID and saving the changes so it also takes in the controller so I'll create a controller of call ID controller of which I'll be creating it in just a second so I'll just create it it's going to be final call ID controller and it's going to be we are going to assign the test editing controller and passing initial value of this which is going to be call ID and also get rid of the cons in here there we go So Below the Spanish widget is going to be an elevated button the elevated button chasing and on press attribute that's kind of like a callback function when the button is pressed it also takes in the chart property we are going to specify a test of join so let's remove the coins here so let's check it out there we go you can see it's over there foreign and let's change the alt symmetric and specify horizontally that's left and right to be 12. there you go and also the rotates in the main as this alignment [Music] let's specify the mean as it's alignment to be Center so main address Elemental Center it also takes in the cross as this alignment and let's set that to Center as well there you go So within the own press use Navigator dot push and we pass in our contest and the second argument is the material page route which intern also takes in the Builder so the Builder testing the Callback function of context and I'm going to retain the call Page up so what we are actually doing here is when a button is pressed we are going to navigate to The Core picture so let's import that the copy texting and additional information that's the call ID and that's going to be from the caller ID controller and we assess the test within that so that's pretty much it let's see if any changes try it out [Music] so we are done with everything we can run and test our app so when you hit on the join button as you've been navigated to the core page and we need to allow our app to access all this information there we go so that's basically it if you find this tutorial to be usually interesting consider subscribing by hitting the Bell icon and like the video as well share as well for the video to Richmond see you in our next tutorial answered in stay tuned

Channel: CodeWithDarkwa

Views: 3,641

Keywords:

Id: dWyNLdoc8NM

Length: 15min 12sec (912 seconds)

Published: Wed Nov 02 2022