Flutter Introduction
Flutter is an open source Software Development kit by Google. You all are maybe confused why choose flutter when you have other platforms like swifts & Android. the reason is cross platform feature, If you use swifts you can only run your app to IOS devices, If you choose Android you can only run your app to Android devices, but with Flutter you can develop Web Application, Mobile Application and even desktop Application.
Also the best part of flutter is you can create Web Application and Mobile application with single code base, so you don't need to worry about maintain different codebase for different devices (web/mobile).
Here i am developing a basic Video calling feature with Flutter using library ZEGOCLOUD UIKit. Let's talk about what is ZEGOCLOUD and Why use it.
ZEGOCLOUD
ZEGOCLOUD is a library/platform where you can find different products like Video/Audio calling, Live Streaming, In-App Chatting and much more.
By using this library you can instantly develop app with these different features using just chunk of code.
As compare to other libraries ZEGOCLOUD has some good price margin and also free account to test your app feature.
What is UIKit
The UIKit is like plug & Play feature, You just need a very little configuration and add small chunk of code. In ZEGOCLOUD is very easy and pretty simple to integrate UIKit.
I have create an app in flutter with two screens Login and Home
Configure your project
Android
If your project is created with Flutter 2.x.x, you will need to open the your_project/android/app/build.gradle file, and modify the compileSdkVersion to 33.
And in the same file, edit the minSdkVersion.
minSdkVersion 21
Add app permissions. Open the file your_project/app/src/main/AndroidManifest.xml, and add the following code:
To prevent obfuscation of the SDK public class names, do the following:
In your project's your_project > android > app folder, create a proguard-rules.pro file with the following content as shown below
-keep class **.zego.** { *; }
Add the following config code to the release part of the your_project/android/app/build.gradle file
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
IOS
To add permissions, open your_project/ios/Runner/Info.plist, and add the following code to the dict part:
In home screen I simple create 2 fields Id and Username on login button click I'm navigating user to Video calling screen where user will start calling with other person.
App Code
Login Screen
import 'package:flutter/material.dart';
import 'package:video/screens/video_call.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final username = TextEditingController();
final id = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
height: 50,
),
TextField(
controller: username,
decoration: const InputDecoration(
labelText: 'username',
hintText: 'username',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.teal, width: 2.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.teal, width: 2.0),
),
),
),
const SizedBox(height: 16.0),
TextField(
controller: id,
decoration: const InputDecoration(
labelText: 'user id',
hintText: 'userid',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.teal, width: 2.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue, width: 2.0),
),
),
),
const SizedBox(height: 16.0),
MaterialButton(
color: Colors.teal,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => VideoCalling(
id: id.text,
username: username.text,
),
),
);
},
child: const Text(
'Login',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
],
),
),
);
}
}
Home screen
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
class VideoCalling extends StatefulWidget {
final String username;
final String id;
const VideoCalling({Key? key, required this.id, required this.username})
: super(key: key);
@override
State<VideoCalling> createState() => _VideoCallingState();
}
final String localUserID = math.Random().nextInt(10000).toString();
class _VideoCallingState extends State<VideoCalling> {
final callIDTextCtrl = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextField(
controller: callIDTextCtrl,
decoration: const InputDecoration(
labelText: 'call id',
hintText: 'call id',
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.teal, width: 2.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue, width: 2.0),
),
),
),
const SizedBox(
height: 20,
),
MaterialButton(
color: Colors.teal,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return CallPage(
callID: callIDTextCtrl.text,
userId: widget.id,
userName: widget.username,
);
}),
);
},
child: const Text("join",style: TextStyle(fontSize: 20,color: Colors.white),),
)
],
),
),
),
);
}
}
class CallPage extends StatelessWidget {
final String callID;
final String userId;
final String userName;
const CallPage({
Key? key,
required this.callID,
required this.userId,
required this.userName,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: ZegoUIKitPrebuiltCall(
appID: 177503827,
appSign:
'4813ca648e686180b2d6e12956bf6ba8465112251090af88228754356c3939b1',
userID: userId,
userName: userName,
callID: callID,
config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()
..onOnlySelfInRoom = (context) {
Navigator.of(context).pop();
},
),
);
}
}
the Callpage method have a ZEGOCLOUD UIKit for video calling. which requires some params, AppId, AppSign, CallId, UserId & UserName.
AppId: You can get the AppId from dashboard particular app,
AppSign: You can get AppSign key from dashboard for particular app
AppId and AppSign id should of same project/app which you will create on dashboard.
CallId: Id will be unique and only number, also callid is like a room id, the other user can join the call if he/she know the callid,
CallPage method will initiate from Home screen when user put unique callid.
If the CallId associate to any channel/room he/she will join to that video call.
Top comments (0)