Flutter Video Calling with Agora | Apps From Scratch

so you've built and shipped your beautiful messaging app tons of users are chatting with each other and now you're overwhelmed with tons of requests to add video calls to chats where do you even start since building a video conferencing feature from scratch is a pain and you're under time constraints i have the perfect solution for you in this video we'll use the video calling sdk from agora to integrate video calls into our messaging app agora also offers sdks for voice calls live streaming and real-time messaging i highly recommend that you take a look at their docs at agora io and check out all they have to offer a huge thanks to gore for sponsoring this video and with that let's get started in a new flutter project go to the pubspec.yaml we only have to add the agora ui kit package which gives us the power to add a pre-built customizable ui for mobile video calling in just a few lines of code it depends on the agora rtc engine package for the necessary building blocks of video calls with agora let's add the proper permissions to android and ios in main android manifest.xml let's add device permissions for internet audio camera bluetooth and more for ios go into the info.plist and add microphone and camera permissions with usage descriptions if you want voice calls to work in the background select sign-in capabilities add background modes and check audio airplay and picture-in-picture now let's run the app on an ios simulator if you got this error about architecture arm 64 then open up the pod file set the ios version to at least 10.0 and add these lines to the bottom of the pod file to exclude certain simulator architectures i'll paste the lines in the description below run flutter clean flutter pub get and rebuild the app now the app runs without any issues in app.dart our primary color is blue scaffold background color is white and our app bar theme has a white background centered title zero elevation styled title text and black icons all of our ui is going to live inside of a feature folder called chat chat has folders for views and widgets and a barrel file called chat.dart that will export files in each of the folders to reduce imports create chatscreen.dart in views it has a scaffold widget with an app bar and a list view body with padding reverse set to true so the most recent messages are displayed at the bottom of our screen item count item builder and a separator builder for spacing set home and app.art to chat screen let's quickly create a message bubble widget that takes in a noble profile image url message and date the reason the profile image url is knowable is because we only want to show the profile image of the other user if the profile image url is null we assume that the message is from ourselves and we don't need to display our own profile image back in chatscreen.dart add some fake messages in a private list called messages set item count to messages.length and have the item builder build each message bubble each message bubbles a row widget with widgets on the left or right based on if the current user is receiving a message or sending one the message text is inside of a container with padding a max width constraint color based on is receiver and a border radius we can display the date underneath each message by wrapping the container in a column widget and flexible and adding the date text below display the profile photo for the other user using a circle avatar with the network image and add a size box to the right of each message sent by the current user next let's create our message text field widget this is a stateless text field widget with vertical alignment keyboard customizations and a decoration that displays send a message hint text wrap it in padding and a safe area widget to provide adequate spacing wrap the listview in an expanded and column widget add the message text field below to enable the user to tap anywhere on the screen to dismiss the keyboard go into app.dart and make a private unfocused widget that takes in a child use a gesture detector with hit test behavior.opaque and an ontap that unfocuses the current primary focus we can wrap our app in the unfocused widget by utilizing builder for material app when we tap on the message field and then tap anywhere on the screen our keyboard dismisses we're ready to build our video call screen here we have a stateful widget that creates an agora client we have to provide an app id channel name and temp token which we'll revisit in a moment when we set up our app in the agora dashboard for now you can leave these all as empty strings in a nit state we have to initialize the client when the screen loads to show the video viewer and buttons let's add a safe area with a stack to the body of our scaffold then we use the pre-built agora ui kit widgets agora video viewer and agora video buttons the buttons are stacked on top of the video viewer both of these widgets are customizable and i encourage you to experiment with them until they fit your needs to prevent the user from leaving the call without hanging up we'll add will pop scope on willpop false and set automatically imply leading to false we're all done with our video call ui now we need to head over to agora.io and create an account in your dashboard make a new app our client requires an app id channel name and temp token let's copy and paste our app id ideally this would live in your environment file a channel is a room that your users will join the way we have this setup right now means that our app will only have one hardcoded channel and token if you're interested in learning how to generate tokens for each user client on the fly which is what you'd actually do if you're building a fully functional chat app then check out the link in the description on how to get started with that for demonstration purposes let's go with a hard-coded single channel and temporary token to generate a temporary token for our channel click on generate temp rtc token type in the channel name and click generate note that the token has an expiration date for testing let's copy that value into temp token and add the channel name finally let's add an action icon button that navigates to the video call screen and run the app on multiple devices when we go to the video call screen we can see all of our users join the chat tapping on end call exits the call for each user we also see the number of users in each call increase and decrease when users join and leave respectively and that's it we built our chat ui in a working video and audio call with agora as you can see it's really easy to get video and audio calls up and running make sure to check agora out via the link in my description if you enjoy videos like this remember to leave a like and subscribe for full step-by-step flutter courses check out launchclub.io thanks for watching and i'll see you in the next one

Channel: Marcus Ng

Views: 25,109

Keywords: agora flutter, video call, flutter agora, flutter video call, agora sdk flutter, video calling in flutter, web rtc flutter, flutter agora live streaming, flutter agora video call, flutter agora ui kit, flutter agora chat, flutter agora example, flutter agora_rtc_engine, flutter agora audio call, flutter agora token, flutter video call ui, flutter video call plugin, flutter video call sdk, flutter video calling app, flutter facetime, facetime flutter, zoom flutter app, agora

Id: JmGlxmDcC9A

Length: 7min 11sec (431 seconds)

Published: Fri Apr 29 2022