Forem: CodingWithZohaib

A Comprehensive Tutorial on Developing In-App Chat Functionality using ZEGOCLOUD and Flutter.

CodingWithZohaib — Sat, 15 Apr 2023 12:47:40 +0000

ZEGOCLOUD is a powerful platform that permits app builders to create actual-time video and audio calling apps readily. With ZEGOCLOUD sort of tools and software improvement kits, developers can build applications for video conferencing, online learning, and stay streaming. ZEGOCLOUD SDK lets in builders to add actual-time chat capability to their apps, allowing users to speak in actual-time thru text, voice, and video. Integrating ZEGOCLOUD SDK with Flutter is easy and easy, allowing builders to build and launch their in-app chat functionality quickly.

Utilizing the ZEGOCLOUD Flutter SDK, developers can without problems expand software packages that enable people to have interaction in real-time video and audio conversations, in addition to utilize stay streaming talents alongside chat capabilities. within this composition, we shall offer a detailed manual on building an In-app Chat with the ZEGOCLOUD Flutter SDK.

Earlier than developing in App Chat utility the use of ZEGOCLOUD Flutter In-app Chat SDK, it's far important to collect an App identity and App sign from the ZEGOCLOUD Console. those identifiers are vital in your utility to hook up with the ZEGOCLOUD platform and make use of its audio and video streaming competencies.
here are the steps to attain an App identification and an App sign:

1.Go to the ZEGOCLOUD Console internet site Console
2.Sign up for an account and input your non-public statistics.

3.After growing an account, you'll be induced to create a assignment. click the "Create" button to create a new undertaking.

4.Enter a call on your venture and pick the proper place in your challenge. Then click on the "Create" button.

5.Once your challenge is created, you may be redirected to the task dashboard.

6.Now click on service control after which select in-app chat to allow it.

7.You may see your App id and App sign displayed on the web page. Make a note of these values as you will want them later when configuring your app.

Be aware: The App sign is a secret fee that should not be shared with all people. preserve it safe and secure.

Create the Flutter Application

Let's move directly to creating our Flutter application:

Use the command "flutter create flutter_inappchat" to build new project.

Next, we need to install zego_uikit_prebuilt_call
flutter pub add zego_uikit_prebuilt_call
Launch the project using your IDE, and perform some initial adjustments to ensure that the project runs smoothly.
Begin by accessing android/app/build.gradle and making modifications to the below-listed values:

compileSdkVersion 33
minSdkVersion 22

.targetSdkVersion 33

It is necessary to specify the permissions that the application will require. This can be done by adding the permission declarations within the manifest tag in the AndroidManifest.xmlfile:

 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <!-- only invitation -->
    <uses-permission android:name="android.permission.VIBRATE"/>

Add the following permissions add to your Info.plist file for iOS:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) camera use</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) microphone use</string>

Now that we've completed the essential configurations, we can begin writing our Dart code. To begin, you may substitute the code within the lib/main/home.dart file with the code provided below:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:zego_zimkit/services/services.dart';
import 'package:zegocloud/main/dashboard_screen.dart';
class MainScreen extends StatefulWidget {
  const MainScreen({Key? key}) : super(key: key);
  @override
  State<MainScreen> createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
  final TextEditingController _userIdController = TextEditingController();
  final TextEditingController _userNameController = TextEditingController();

  void changeSystemNavigationAndStatusBarColor(
      {Color navigationBarColor = Colors.white,
        Color statusBarColor = Colors.transparent,
        Brightness? statusIconBrightness = Brightness.dark,
        Brightness? navigationIconBrightness = Brightness.dark}) =>
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        systemNavigationBarColor: navigationBarColor, // navigation bar color
        statusBarColor: statusBarColor, // status bar color
        statusBarIconBrightness: statusIconBrightness,
        systemNavigationBarIconBrightness: navigationIconBrightness,
      ));

  @override
  void initState() {
    changeSystemNavigationAndStatusBarColor();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        margin: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ////UserName
            TextFormField(
                controller: _userNameController,
                cursorColor: const Color(0xff424242),
                decoration: InputDecoration(
                  enabledBorder: _commonBorder,
                  focusedBorder: _commonBorder,
                  border: _commonBorder,
                  filled: true,
                  hintText: 'User Name',
                  fillColor: const Color(0xFFF3F2F2),
                  contentPadding:
                  const EdgeInsets.symmetric(vertical: 17, horizontal: 15),
                )),
            const SizedBox(height: 15),
            ///User ID
            TextFormField(
                controller: _userIdController,
                cursorColor: const Color(0xff424242),
                decoration: InputDecoration(
                  enabledBorder: _commonBorder,
                  focusedBorder: _commonBorder,
                  border: _commonBorder,
                  filled: true,
                  hintText: 'User Id',
                  fillColor: const Color(0xFFF3F2F2),
                  contentPadding:
                  const EdgeInsets.symmetric(vertical: 17, horizontal: 15),
                )),
            const SizedBox(height: 15),
            _commonButton('Log in', () async {
await ZIMKit().connectUser(id: _userIdController.text,name: _userNameController.text);
              // await ZIMKit().connectUser(
              //     id: _userIdController.text, name: _userNameController.text);
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (_) =>
                          DashBoardScreen(userId: _userIdController.text)));
            }),
          ],
        ),
      ),
    );
  }

  _commonButton(String btnName, VoidCallback onTap) {
    return ElevatedButton(
        onPressed: onTap,
        style: ElevatedButton.styleFrom(
            backgroundColor: const Color(0xff0155FE),
            shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
            padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 10)),
        child: Text(
          btnName,
          style: const TextStyle(color: Colors.white, fontSize: 18),
        ));
  }

  get _commonBorder => OutlineInputBorder(
    borderRadius: const BorderRadius.all(Radius.circular(12)),
    borderSide: BorderSide(
        color: const Color(0xff424242).withOpacity(0.4), width: 2),
  );
}

Now you may substitute the code within the lib/main/dashboard_screen.dartfile with the code provided below:

import 'package:flutter/material.dart';
import 'package:zego_zimkit/compnents/compnents.dart';
import 'package:zego_zimkit/pages/pages.dart';
import 'package:zegocloud/main/ChatPopUpOptions.dart';
class DashBoardScreen extends StatefulWidget {
  final String userId;
  const DashBoardScreen({Key? key, required this.userId}) : super(key: key);
  @override
  State<DashBoardScreen> createState() => _DashBoardScreenState();
}

class _DashBoardScreenState extends State<DashBoardScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: const Color(0xff0155FE),
        elevation: 0,
        title: const Text('Chat and Groups'),
        actions: const [ChatPopUpOptions()],  ///Implimentation in new file
      ),
      body: Column(
        children: [
          _upperSection(),
          _chatAndGroupsVisibleSection(),
        ],
      ),
    );
  }

  _upperSection() {
    return InkWell(
      onTap: () {

      },
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: 60,
        alignment: Alignment.center,
        child: Text(
          'User Id: ${widget.userId}',
          style: const TextStyle(fontSize: 16),
        ),
      ),
    );
  }

  _chatAndGroupsVisibleSection() {
    return Expanded(child: ZIMKitConversationListView(
      onPressed: (context, conversation, defaultAction) {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (_) => ZIMKitMessageListPage(
                    conversationID: conversation.id,
                    conversationType: conversation.type)));
      },
    ));
  }
}

Now you may substitute the code within the lib/main/ChatPopUpOptions.dart file with the code provided below:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';
class ChatPopUpOptions extends StatefulWidget {
  const ChatPopUpOptions({Key? key}) : super(key: key);

  @override
  State<ChatPopUpOptions> createState() => _ChatPopUpOptionsState();
}

class _ChatPopUpOptionsState extends State<ChatPopUpOptions> {
  @override
  Widget build(BuildContext context) {
    return PopupMenuButton(
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(15))),
      position: PopupMenuPosition.under,
      icon: const Icon(Icons.more_vert_rounded),
      itemBuilder: (context) {
        return [
          PopupMenuItem(
            value: 'New Chat',
            child: const ListTile(
              leading: Icon(CupertinoIcons.chat_bubble_2_fill),
              title: Text('Create New Chat', maxLines: 1,),
            ),
            onTap: (){
              ZIMKit().showDefaultNewPeerChatDialog(context);
            },
          ), PopupMenuItem(
            value: 'Create New Group',
            child: const ListTile(
              leading: Icon(CupertinoIcons.group_solid),
              title: Text('Create New Group', maxLines: 1,),
            ),
            onTap: (){
              ZIMKit().showDefaultNewGroupChatDialog(context);
            },
          ), PopupMenuItem(
            value: 'Join New Group',
            child: const ListTile(
              leading: Icon(Icons.group_add),
              title: Text('Join New Group', maxLines: 1,),
            ),
            onTap: (){
              ZIMKit().showDefaultJoinGroupDialog(context);
            },
          ),
        ];
      },
    );
  }
}

As soon as you've got configured the required settings correctly, you must be capable of start a in-app chat app using the provided code.

conclusion

In short, we've obtained information on growing an in-app messaging software the use of the ZEGOCLOUD Flutter SDK. The system entailed acquiring anAppID and AppSign from the ZEGOCLOUD Console, granting us get admission to to its audio and video streaming competencies. in the end, we generated a Flutter software and integrated crucial dependencies. in the end, we executed the in-app messaging characteristic with Dart language by means of initializing the SDK, becoming a member of a digital area, and publishing or subscribing to a transmission. Adhering to these steps, you may manufacture your personal in-app messaging software program utilising the ZEGOCLOUD Flutter SDK.
Sign up for 10,000 free mins
Find out more about ZEGOCLOUD

Mastering the Art of Live Streaming with ZEGOClOUD SDK and Flutter

CodingWithZohaib — Sat, 15 Apr 2023 10:00:17 +0000

ZEGOCLOUD is a real-time audio and video conversation platform that offers developers with the equipment they want to build audio and video communique programs, consisting of video name apps, live streaming apps, and on line training apps. ZEGOCLOUD offers a ramification of equipment and assets which can assist builders save money and time whilst constructing real-time audio and video verbal exchange packages.
ZEGOCLOUD uses the brand new era to deliver audio and video. ZEGOCLOUD can be scaled to meet the wishes of any application, so that you can reach more customers with your real-time audio and video communique packages.
ZEGOCLOUD offers numerous software improvement kits (SDKs) for several programming languages such as Java, Python, and Flutter. The Flutter SDK is specifically designed to facilitate the creation of high-overall performance audio and video communique packages that can run seamlessly on cell devices.

Using the ZEGOCLOUD Flutter SDK, builders can without difficulty build audio and video call apps with chat and stay streaming features. In this article, we can stroll via the procedure of constructing a Live Streaming app using the ZEGOCLOUD Flutter SDK. the use of the ZEGOCLOUD Flutter SDK.

Before creating stay Streaming software using ZEGOCLOUD Flutter stay Streaming SDK, it is essential to accumulate an App id and App signal from the ZEGOCLOUD Console. these identifiers are vital in your application to connect with the ZEGOCLOUD platform and utilize its audio and video streaming talents.
here are the stairs to obtain your AppID and AppSign from the ZEGOCLOUD Console:

1.Go to the ZEGOCLOUD Console website Console
2.sign on for an account and input your personal facts.

3.After developing an account, you'll be caused to create a venture. click the "Create" button to create a new assignment.

4.Enter a call on your mission and select the right vicinity to your task. Then click on the "Create" button.

5.Once your challenge is created, you will be redirected to the mission dashboard.

6.You will see your AppID and AppSign displayed on the web page. Make a note of those values as you'll need them later when configuring your app.

Observe: The App sign is a mystery value that need to now not be shared with every person. hold it safe and at ease.

Generate the Flutter Application

Let's move on to creating our Flutter application:

Use the command "flutter create flutter_LiveStreaming" to create the project.

Next, we need to install zego_uikit_prebuilt_call
flutter pub add zego_uikit_prebuilt_call
Release the challenge the use of your IDE, and carry out a few initial adjustments to make sure that the assignment runs smoothly.
Begin by accessing android/app/build.gradle and making modifications to the below-listed values:

compileSdkVersion 33
minSdkVersion 22

3.targetSdkVersion 33

It is necessary to specify the permissions that the application will require. this can be carried out by including the permission declarations within the show up tag within the AndroidManifest.xmlfile:

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />    
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.VIBRATE"/>

Add the following permissions upload in your info.plist report for iOS:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) camera use</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) microphone use</string>

Now that we've completed the vital configurations, we can begin writing our Dart code. to start, you may alternative the code in the lib/main/home.dart document with the code supplied underneath:

import 'package:zego_zimkit/zego_zimkit.dart';
import 'package:zegocloud/inApp_chat/main_screen.dart';
final String userID=math.Random().nextInt(1000).toString();
void main() async{
await ZIMKit().init(appID: Utils.appID,appSign: Utils.appsign);
WidgetsFlutterBinding.ensureInitialized();
  // await ZIMKit().init(appID:Utils.appID, appSign: Utils.appsign);
  // WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}
class MyApp extends StatelessWidget{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  HomeScreen(),
    );
  }
}
class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
  // Generate Live Streaming ID with 6 digit length
  final liveIDController = TextEditingController(
    text: '1111',
  );
  // Generate userID with 6 digit length
  final String userID = Random().nextInt(900000 + 100000).toString();
  @override
  Widget build(BuildContext context) {
    var buttonStyle = ElevatedButton.styleFrom(
      backgroundColor: const Color(0xff034ada),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
    );

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 24,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(
              height: 20,
            ),
            Text('Your UserID: $userID'),
            const Text('Please test with two or more devices'),
            const SizedBox(
              height: 30,
            ),
            TextFormField(
              controller: liveIDController,
              decoration: const InputDecoration(
                labelText: 'Join or Start a Live by Input an ID',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              style: buttonStyle,
              child: const Text('Start a Live'),
              onPressed:(){
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => LiveScreenView(
                      liveID: liveIDController.text,
                      isHost: true, userID:"$userID",
                    ),
                  ),
                );
              },
            ),
            const SizedBox(
              height: 16,
            ),
            ElevatedButton(
                style: buttonStyle,
                child: const Text('Join a Live'),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => LiveScreenView(
                        liveID: liveIDController.text,
                        isHost: false,
                        userID: '$userID',
                      ),
                    ),
                  );
                }
            )
          ],
        ),
      ),
    );
  }

}

import 'package:flutter/material.dart';
import 'dart:math';
import 'package:zego_uikit_prebuilt_live_streaming/zego_uikit_prebuilt_live_streaming.dart';
import 'package:zegocloud/main/utils.dart';
// Live Page Prebuilt UI from ZEGOCLOUD UIKits
class LiveScreenView extends StatelessWidget {
  final String liveID , userID;
  final bool isHost;
  LiveScreenView({
    super.key,
    required this.liveID,
    this.isHost = false,
    required this.userID
  });
  // Add your app id here and app sign in
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveStreaming(
        appID: Utils.appID,
        appSign: Utils.appsign,
        userID: userID,
        userName: 'user_$userID',
        liveID: liveID,
        config: isHost
            ? ZegoUIKitPrebuiltLiveStreamingConfig.host()
            : ZegoUIKitPrebuiltLiveStreamingConfig.audience()
          ..audioVideoViewConfig.showAvatarInAudioMode = true
          ..audioVideoViewConfig.showSoundWavesInAudioMode = true,
      ),
    );
  }
}

As soon as you have got configured the specified settings efficiently, you have to be capable of begin a *live Streaming * app the use of the furnished code.

End

In precis, we've got discovered the way to expand a stay streaming utility utilizing the ZEGOCLOUD Flutter SDK. The process involved acquiring an AppID and AppSign from the ZEGOCLOUD Console, which allowed us to connect with the ZEGOCLOUD platform and leverage its audio and video streaming skills. We created a Flutter software and included the important dependencies. ultimately, we implemented the stay streaming capability thru Dart code, which includes initializing the SDK, connecting to a digital area, and publishing or subscribing to a transmission. with the aid of following these steps, you could create your very own stay streaming application the use of the ZEGOCLOUD Flutter SDK.
Sign up for 10,000 free mins
Find out more about ZEGOCLOUD

Optimizing Group Calling Experience with ZEGOCLOUD SDK in flutter

CodingWithZohaib — Fri, 14 Apr 2023 17:27:58 +0000

ZEGOCLOUD is a cloud-based totally platform that offers builders with the gear they want to build actual-time audio and video verbal exchange applications. The platform offers a ramification of features, which include SDKs, APIs, and documentation, that make it easy to create audio and video packages. it's far used by a spread of corporations and agencies, inclusive of video conferencing agencies, live streaming structures, and online schooling vendors.
ZEGOCLOUD is used by video conferencing groups to provide video conferencing services to their users.
ZEGOCLOUD presents a broad variety of software program improvement kits (SDKs) catering to exceptional programming languages, like Java, Python, and Flutter. specially, the Flutter SDK stands proud for its great suitability in designing and constructing high-overall performance audio and video verbal exchange apps for mobile gadgets. Its characteristic-wealthy toolkit empowers builders to create apps with no trouble and efficiency.

the usage of the ZEGOCLOUD Flutter SDK, developers can easily build group calling apps How to make Group calling apps with flutter. In this newsletter, we are able to walk through the manner of constructing a group calling app the use of the ZEGOCLOUD Flutter SDK.
The ZEGOCLOUD Flutter SDK presents a handy manner for builders to construct organization calling programs. to illustrate this, we have prepared a tutorial on constructing a collection calling app with the ZEGOCLOUD Flutter SDK, which may be discovered right here: How to make Group calling apps with flutter. the academic outlines the step-by means of-step procedure of using the ZEGOCLOUD Flutter SDK to create a organization calling app.

so as to broaden a set calling application the use of the ZEGOCLOUD flutter Group Calling SDK, it is vital to acquire an App identification and App signal from the ZEGOCLOUD Console. those are wonderful identifiers that provide your software access to audio and video communication abilities and permit it to connect with the ZEGOCLOUD platform.

Right here are the steps to attain AppID and AppSign:

1.Navigate to the ZEGOCLOUD Console internet site Console.
2.register for an account via providing your non-public info.

3.After registering, you will be prompted to create a brand new mission. click the "Create" button to continue.

four.name your mission and select the ideal place. later on, hit the "Create" button to verify.

four.you will be taken to the venture dashboard once your mission has been created.

5.Your AppID and AppSign will be proven on the web page. Please maintain a file of those values as you may require them whilst setting up your app.

Observe: Your App sign is a confidential value that have to be saved at ease and no longer shared with all people.

Putting in place the Flutter application

Allow get began by means of putting in our Flutter utility:

Create the project by way of executing the "flutter create flutter_GroupCall" command.

Next, we need to install zego_uikit_prebuilt_call
flutter pub add zego_uikit_prebuilt_call
launch the assignment the use of your IDE, and perform a few preliminary modifications to make certain that the assignment runs smoothly.
begin by gaining access to android/app/build.gradle and making adjustments to the under-listed values:

compileSdkVersion 33
minSdkVersion 22

3.targetSdkVersion 33

It's far vital to specify the permissions that the application would require. this may be accomplished by adding the permission declarations inside the show up tag within the AndroidManifest.xmlrecord:

 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <!-- only invitation -->
    <uses-permission android:name="android.permission.VIBRATE"/>

Upload the subsequent permissions add to your info.plist file for iOS:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) camera use</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) microphone use</string>

Now that we've finished the vital configurations, we will start writing our Dart code. to start, you may substitute the code in the lib/main.dart record with the code supplied underneath:

import 'package:flutter/material.dart';
import'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
import 'dart:math' as math;
final String userID=math.Random().nextInt(1000).toString();
void main() {

  runApp(const MyApp());
}
class MyApp extends StatelessWidget{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  Groupcalling(),
    );
  }
}
class Groupcalling extends StatefulWidget {
  @override
  State<Groupcalling> createState() => _GroupcallingState();
}
class _GroupcallingState extends State<Groupcalling> {
final _controller=TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ZEGOCLOUD Group Calling"),
          centerTitle: true,
        ),
        body:Column(
          children: [
            TextFormField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: "Enter UId"
              ),

            ),
            ElevatedButton(onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (builder)=>cllingId(CallingId: _controller.text.toString())));
            }, child: Text("Join")),
          ],
        )
    );
  }
}
class cllingId extends StatelessWidget {
  final String CallingId;
  const cllingId({required this.CallingId});
  @override
  Widget build(BuildContext context) {
    return SafeArea(child: ZegoUIKitPrebuiltCall(appID: appID,
      appSign: appsign,
      callID: CallingId,
      userID: userID,
      userName:"user_$userID" ,
      config: ZegoUIKitPrebuiltCallConfig.groupVideoCall()..onOnlySelfInRoom=(context){
      Navigator.pop(context);
      },
    ));
  }
}

Once you've got configured the specified settings efficaciously, you need to be capable of begin a group calling using the provided code.

Overview

ZEGOCLOUD Flutter SDK. This involved obtaining an App ID and App Sign from the ZEGOCLOUD Console, which allowed us to connect to the platform and access its audio and video communication features. Subsequently, we created a Flutter application and integrated the required dependencies. Finally, we implemented the Group calling functionality by using Dart code to initialize the SDK, join a room, and publish or subscribe to a stream. By following these procedures, you can develop your Group calling app using the ZEGOCLOUD Flutter SDK.
Sign up for 10,000 free mins

Find out more about ZEGOCLOUD

Creating an Audio Call App with ZEGOClOUD SDK and Flutter: Step-by-Step Guide

CodingWithZohaib — Fri, 14 Apr 2023 06:15:58 +0000

ZEGOCLOUD is a cloud-based totally platform that gives builders with the tools they want to build real-time audio and video verbal exchange applications. The platform gives a selection of capabilities, including SDKs, APIs, and documentation, that make it clean to create audio and video applications. ZEGOCLOUD is used by a selection of groups and groups, which includes video conferencing corporations, stay streaming systems, and online schooling providers.
ZEGOCLOUD uses the modern day generation to deliver audio and video calling.
ZEGOCLOUD affords a numerous selection of development kits for software program introduction, appropriate for numerous programming languages.The Flutter SDK has been tailor-made to beautify the improvement of audio and video communique packages on mobile devices, delivering a comprehensive and dependable collection of tools to assist builders.

With the ZEGOCLOUD Flutter SDK, developers have a powerful set of equipment to create audio calling apps learn how to create an audio call app with Flutter right here. on this tutorial, we are able to guide you through the method of building an audio call app the usage of the ZEGOCLOUD Flutter SDK.

To increase an audio call utility with ZEGOCLOUD Flutter SDK, you need to first gather App ID and App Sign from the ZEGOCLOUD Console. those identifiers are essential on your app to set up a reference to the ZEGOCLOUD platform and access its audio and video communication functionalities.
Follow these steps to obtain App ID and an App Sign:
1.get entry to the ZEGOCLOUD Console internet site Console.

2.sign up for an account with the aid of offering your personal info.

3.After registering, you may be precipitated to create a new venture. click at the "Create" button to begin.

4.supply your task a call and select an appropriate area. Then, click at the "Create" button to continue.

5.As soon as your undertaking is created, you will be taken to the task dashboard

Note: The App Sign is a confidential value that should not be disclosed to others. Ensure it is kept safe and secure.

Constructing the Flutter App

Now allow create the Flutter utility:

To create the project, use the command "flutter create flutter_AudioCall".

After creating the project, we need to install the zego_uikit_prebuilt_call
using the command flutter pub add zego_uikit_prebuilt_call.
Launch your preferred IDE and make necessary adjustments to ensure the smooth functioning of the project. Access android/app/build.gradle and modify the below-listed values:

compileSdkVersion 33
minSdkVersion 22

3.targetSdkVersion 33

it is necessary to specify the permissions that the application would require. this can be executed with the aid of adding the permission declarations in the occur tag within the AndroidManifest.xmlfile:

 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <!-- only invitation -->
    <uses-permission android:name="android.permission.VIBRATE"/>

To enable the required functionality on IOS, please ensure that the following permissions have been added to your Info.plist file:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) camera use</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) microphone use</string>

Now that we've completed the essential configurations, we can begin writing our Dart code. To begin, you may substitute the code within the lib/main.dart file with the code provided below:

import 'package:flutter/material.dart';
import'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
import 'dart:math' as math;
final String userID=math.Random().nextInt(1000).toString();
void main() {

  runApp(const MyApp());
}
class MyApp extends StatelessWidget{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  Audiocalling(),
    );
  }
}
class Audiocalling extends StatefulWidget {
  @override
  State<Audiocalling> createState() => _AudiocallingState();
}
class _AudiocallingState extends State<Audiocalling> {
final _controller=TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ZEGOCLOUD Audio Calling"),
          centerTitle: true,
        ),
        body:Column(
          children: [
            TextFormField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: "Enter UId"
              ),

            ),
            ElevatedButton(onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (builder)=>cllingId(CallingId: _controller.text.toString())));
            }, child: Text("Join")),
          ],
        )
    );
  }
}
class cllingId extends StatelessWidget {
  final String CallingId;
  const cllingId({required this.CallingId});
  @override
  Widget build(BuildContext context) {
    return SafeArea(child: ZegoUIKitPrebuiltCall(appID: appID,
      appSign: appsign,
      callID: CallingId,
      userID: userID,
      userName:"user_$userID" ,
      config: ZegoUIKitPrebuiltCallConfig.oneOnOneVoiceCall()..onOnlySelfInRoom=(context){
      Navigator.pop(context);
      },

    ));
  }
}

Once you have got configured the required settings efficiently, you must be able to begin a Audio name using the software. to start, update the code in the lib/important.dart record with the code snippet provided.

Conclusion

To summarize, we have comprehended the manner of growing an audio name software making use of the ZEGOCLOUD Flutter SDK. The technique entailed acquiring an App id and App sign from the ZegoCloud Console, granting us access to the ZegoCloud platform and its audio and video conversation features. We then designed a Flutter application and integrated the necessary dependencies. in the long run, we carried out Audio call functionality via Dart code, which concerned initializing the SDK, joining a room, and publishing or subscribing to a stream.
Sign up for 10,000 free mins

Find out more about ZEGOCLOUD

How to Build a Video Call App Using ZEGOCLOUD SDK and Flutter

CodingWithZohaib — Thu, 13 Apr 2023 19:42:02 +0000

ZEGOCLOUD is a real-time audio and video communication cloud platform that provides SDKs and APIs for developers to build audio and video communication applications such as video call apps, live streaming apps, online education apps, and more.

ZEGOCLOUD provides a range of SDKs for different programming languages, including Java, Python, and Flutter. The Flutter SDK is specifically designed for building audio and video communication apps for mobile devices.

Using the ZEGOCLOUD Flutter SDK, developers can easily build video call apps How to make video call apps with flutter. In this article, we will walk through the process of building a video call app using the ZEGOCLOUD Flutter SDK.

Before building a video call app using the ZEGOCLOUD flutter video Call SDK, you need to obtain an App ID and an App Sign from the ZEGOCLOUD Console. These are unique identifiers that allow your app to connect to the ZEGOCLOUD platform and access its audio and video communication features.
Here are the steps to obtain an App ID and an App Sign:

Go to the ZEGOCLOUD Console website Console

2.Create an account by entering your personal information.

3.After creating an account, you will be prompted to create a project. Click the "Create" button to create a new project.

4.Enter a name for your project and select the appropriate region for your project. Then click the "Create" button.

4.Once your project is created, you will be redirected to the project dashboard.

5.You will see your App ID and App Sign displayed on the page. Make a note of these values as you will need them later when configuring your app.

Note: The App Sign is a secret value that should not be shared with anyone. Keep it safe and secure.

Create the Flutter Application

Let's move on to creating our Flutter application:

Use the command "flutter create flutter_VideoCall" to create the project.

Next, we need to install zego_uikit_prebuilt_call

flutter pub add zego_uikit_prebuilt_call
Launch the project using your preferred Integrated Development Environment (IDE), and perform some initial adjustments to ensure that the project runs smoothly.
Begin by accessing android/app/build.gradle and making modifications to the below-listed values:

compileSdkVersion 33
minSdkVersion 22
targetSdkVersion 33

It is necessary to specify the permissions that the application will require. This can be done by adding the permission declarations within the manifest tag in the AndroidManifest.xml file:

 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <!-- only invitation -->
    <uses-permission android:name="android.permission.VIBRATE"/>

Add the following permissions to your Info.plist file for iOS:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) camera use</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) microphone use</string>

Alright, now that we have made the necessary configurations, let's start writing our Dart code. You can replace the code inside the lib/main.dart file with the following:

import 'package:flutter/material.dart';
import'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
import 'dart:math' as math;
final String userID=math.Random().nextInt(1000).toString();
void main() {

  runApp(const MyApp());
}
class MyApp extends StatelessWidget{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  videocalling(),
    );
  }
}
class videocalling extends StatefulWidget {
  @override
  State<videocalling> createState() => _videocallingState();
}
class _videocallingState extends State<videocalling> {
final _controller=TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Zego Cloud Video Calling"),
          centerTitle: true,
        ),
        body:Column(
          children: [
            TextFormField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: "Enter UId"
              ),

            ),
            ElevatedButton(onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (builder)=>cllingId(CallingId: _controller.text.toString())));
            }, child: Text("Join")),
          ],
        )
    );
  }
}
class cllingId extends StatelessWidget {
  final String CallingId;
  const cllingId({required this.CallingId});
  @override
  Widget build(BuildContext context) {
    return SafeArea(child: ZegoUIKitPrebuiltCall(appID: appID,
      appSign: appsign,
      callID: CallingId,
      userID: userID,
      userName:"user_$userID" ,
      config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()..onOnlySelfInRoom=(context){
      Navigator.pop(context);
      },

    ));
  }
}

Assuming that you have correctly configured the necessary settings, you should now be able to initiate a video call using the application. To do so, you can replace the code in lib/main.dart with the provided code snippet.

Conclusion

We have seen how to use the ZegoCloud Flutter SDK to build a video call app. We started by obtaining an App ID and an App Sign from the ZegoCloud Console, which allowed us to connect to the ZegoCloud platform and access its audio and video communication features. Then, we created a Flutter application and added the necessary dependencies to it. Finally, we wrote Dart code to implement the video call functionality, which included initializing the SDK, joining a room, and publishing or subscribing to a stream. By following these steps, you should now be able to build your own video call app using the ZegoCloud Flutter SDK.
Sign up for 10,000 free mins
Find out more about ZEGOCLOUD