DEV Community: Hazem Hamdy

Build a Flutter Live Streaming App Using ZEGOCLOUD (Like Chat & Video Call Apps)

Hazem Hamdy — Sun, 04 Jan 2026 04:09:47 +0000

Live streaming is no longer limited to social media platforms. Today, it’s a core feature in chat apps, video call apps, online education, live events, and real-time collaboration tools.

Building a live streaming system from scratch requires handling:

Media engines
Real-time networking
Encoding & decoding
Signaling servers
Permissions & device compatibility

That’s a lot of complexity.

Fortunately, ZEGOCLOUD provides a production-ready Live Streaming SDK that allows Flutter developers to integrate real-time streaming with zero backend setup.

In this article, we’ll build a Flutter Live Streaming App that works just like chat & video call apps:

One user starts a live stream
Other users join instantly as viewers

🎯 What You’ll Build

By the end of this tutorial, you’ll have:

✅ A Flutter live streaming app
✅ Host (Broadcaster) & Audience roles
✅ Real-time video streaming
✅ Token-based authentication
✅ Clean and scalable project structure
✅ No WebRTC
✅ No custom backend

🔍 What Is ZEGOCLOUD?

ZEGOCLOUD is a real-time communication platform that provides SDKs for:

🎥 Live Streaming
📞 Video Calls
🎧 Voice Calls
💬 Real-time Chat

Instead of building and maintaining media servers, you only need:

AppID
Token (secure access)

ZEGOCLOUD handles everything else.

🔗 Official Links

🌐 Website: https://www.zegocloud.com
🎥 Live Streaming SDK: https://www.zegocloud.com/product/live-streaming
📚 Documentation: https://www.zegocloud.com/docs

🧭 App Flow Overview

The flow is intentionally designed to be similar to chat & video call apps:

User opens the app
Enters a Room ID
Chooses:

🎥 Start Live (Broadcaster)
👀 Watch Live (Audience)
1. Stream starts instantly

📸 Join Room Screen Screenshot

🗂 Project Structure

To keep the project clean and scalable:

lib/
 ├─ utils/
 │   ├─ permission.dart
 │   ├─ permission_io.dart
 │   ├─ permission_web.dart
 │   ├─ zegocloud_token.dart
 │
 ├─ key_center.dart
 ├─ main.dart
 ├─ login.dart
 ├─ home_page.dart
 └─ live_page.dart

📸 Project structure screenshot

🧩 Step 1 — Install Required Packages

Open pubspec.yaml and add:

Then run:

flutter pub get

🔐 Step 2 — Android Permissions Setup

Live streaming requires camera, microphone, and network access.

Add the following permissions to:

android/app/src/main/AndroidManifest.xml

⚙️ Step 3 — Android Build Configuration

Make sure your compileSdk, ndkVersion, and Java version are configured correctly:

🛡 Step 4 — Proguard Configuration (Release Mode)

Enable Proguard in build.gradle:

Create or edit:

android/app/proguard-rules.pro

🎙 Step 5 — Runtime Permissions

1- add the code in the file
lib\utils\permission_web.dart
We request microphone and camera permissions dynamically before streaming.

Future<bool> requestPermission() async {
  return true;
}

2- add the code in the file
lib\utils\permission_io.dart


import 'package:flutter/foundation.dart';
import 'package:permission_handler/permission_handler.dart';

Future<bool> requestPermission() async {
  debugPrint("requestPermission...");
  try {
    PermissionStatus microphoneStatus = await Permission.microphone.request();
    if (microphoneStatus != PermissionStatus.granted) {
      debugPrint('Error: Microphone permission not granted!!!');
      return false;
    }
  } on Exception catch (error) {
    debugPrint("[ERROR], request microphone permission exception, $error");
  }

  try {
    PermissionStatus cameraStatus = await Permission.camera.request();
    if (cameraStatus != PermissionStatus.granted) {
      debugPrint('Error: Camera permission not granted!!!');
      return false;
    }
  } on Exception catch (error) {
    debugPrint("[ERROR], request camera permission exception, $error");
  }

  return true;
}

📸 Permission dialog screenshot

3-add the code in path #lib\utils\permission.dart

import 'permission_io.dart' if (dart.library.html) 'permission_web.dart' as impl;

Future<bool> requestPermission() async {
  return impl.requestPermission();
}

4-add the code in path #lib\utils\zegocloud_token.dart

// ! ** Warning: ZegoTokenUtils is only for use during testing. When your application goes live,
// ! ** tokens must be generated by the server side. Please do not generate tokens on the client side!
import 'dart:convert';
import 'dart:core';
import 'dart:math' as math;
import 'dart:typed_data';

import 'package:encrypt/encrypt.dart' as encrypt;
import 'package:flutter/cupertino.dart';

class ZegoTokenUtils {
  static String generateToken(
    int appid,
    String serverSecret,
    String userID, {
    int effectiveTimeInSeconds = 60 * 60 * 24,
    String payload = '',
  }) {
    debugPrint('! ${'*' * 80}');
    debugPrint(
      '! ** Warning: ZegoTokenUtils is only for use during testing. When your application goes live,',
    );
    debugPrint(
      '! ** tokens must be generated by the server side. Please do not generate tokens on the client side!',
    );
    debugPrint('! ${'*' * 80}');
    if (appid == 0) {
      throw Exception('appid Invalid');
    }
    if (userID == '') {
      throw Exception('userID Invalid');
    }
    if (serverSecret.length != 32) {
      throw Exception('serverSecret Invalid');
    }
    if (effectiveTimeInSeconds <= 0) {
      throw Exception('effectiveTimeInSeconds Invalid');
    }
    final tokenInfo = TokenInfo04(
      appid: appid,
      userID: userID,
      nonce: math.Random().nextInt(math.pow(2, 31).toInt()),
      ctime: DateTime.now().millisecondsSinceEpoch ~/ 1000,
      expire: 0,
      payload: payload,
    );
    tokenInfo.expire = tokenInfo.ctime + effectiveTimeInSeconds;
    // Convert token information to json
    final tokenJson = tokenInfo.toJson();

    // Randomly generated 16-byte string, used as AES encryption vector,
    // before the ciphertext for Base64 encoding to generate the final token
    final ivStr = createRandomString(16);
    final iv = encrypt.IV.fromUtf8(ivStr);

    final key = encrypt.Key.fromUtf8(serverSecret);
    final encrypter = encrypt.Encrypter(
      encrypt.AES(key, mode: encrypt.AESMode.cbc),
    );
    final encrypted = encrypter.encrypt(tokenJson, iv: iv);

    final bytes1 = createUint8ListFromInt(tokenInfo.expire);
    final bytes2 = Uint8List.fromList([0, 16]);
    final bytes3 = Uint8List.fromList(utf8.encode(ivStr));
    final bytes4 = Uint8List.fromList([0, encrypted.bytes.length]);
    final bytes5 = encrypted.bytes;

    final bytes = Uint8List(4) + bytes1 + bytes2 + bytes3 + bytes4 + bytes5;
    final ret = '04${base64.encode(bytes)}';
    return ret;
  }

  static final _random = math.Random();
  static const _defaultPool =
      'ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW';

  static String createRandomString(int size, {String pool = _defaultPool}) {
    final len = pool.length;
    var id = '';
    var i = size;
    while (0 < i--) {
      id += pool[_random.nextInt(len)];
    }
    return id;
  }

  /// Creates a `Uint8List` by a hex string.
  static Uint8List createUint8ListFromHexString(String hex) {
    final result = Uint8List(hex.length ~/ 2);
    for (var i = 0; i < hex.length; i += 2) {
      final num = hex.substring(i, i + 2);
      final byte = int.parse(num, radix: 16);
      result[i ~/ 2] = byte;
    }

    return result;
  }

  /// Returns a hex string by a `Uint8List`.
  static String formatBytesAsHexString(Uint8List bytes) {
    final result = StringBuffer();
    for (var i = 0; i < bytes.lengthInBytes; i++) {
      final part = bytes[i];
      result.write('${part < 16 ? '0' : ''}${part.toRadixString(16)}');
    }

    return result.toString();
  }

  static Uint8List createUint8ListFromInt(int hex) {
    return createUint8ListFromHexString(hex.toRadixString(16));
  }
}

class TokenInfo04 {
  TokenInfo04({
    required this.appid,
    required this.userID,
    required this.ctime,
    required this.expire,
    required this.nonce,
    required this.payload,
  });
  int appid;
  String userID;
  int nonce;
  int ctime;
  int expire;
  String payload;

  String toJson() {
    return '{"app_id":$appid,"user_id":"$userID","nonce":$nonce,"ctime":$ctime,"expire":$expire,"payload":"$payload"}';
  }
}

🟣 main.dart — App Entry Point

import 'package:flutter/material.dart';
import 'login.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Live Streaming App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const LoginPage(),
    );
  }
}

and create the file

class KeyCenter {
  static const int appID = 0;
  static String appSign =
      '***********';
  static String serverSecret = "*************";
  static String token =
      "******************************************************";
}

you cade get the server Secret in the web site ZEGOCLUOD

Basic Configurations =>Temporary token => Make Generate

🟡 Login Page — Engine Initialization

On the login screen, we:

Generate a unique User ID
Request permissions
Initialize ZEGOCLOUD engine


import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:zego_express_engine/zego_express_engine.dart';
import 'utils/permission.dart';
import 'home_page.dart';
import 'key_center.dart';

Future<void> createEngine() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Get your AppID and AppSign from ZEGOCLOUD Console
  //[My Projects -> AppID] : https://console.zegocloud.com/project
  await ZegoExpressEngine.createEngineWithProfile(
    ZegoEngineProfile(
      KeyCenter.appID,
      ZegoScenario.Default,
      appSign: null, // Force Token Auth
    ),
  );
}

void jumpToHomePage(
  BuildContext context, {
  required String localUserID,
  required String localUserName,
}) async {
  await createEngine();
  Navigator.pushReplacement(
    context,
    MaterialPageRoute(
      builder: (context) =>
          HomePage(localUserID: localUserID, localUserName: localUserName),
    ),
  );
}

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
  /// Users who use the same roomID can join the same live streaming.
  final userIDTextCtrl = TextEditingController(
    text: Random().nextInt(100000).toString(),
  );
  final userNameTextCtrl = TextEditingController();

  @override
  void initState() {
    super.initState();
    requestPermission();
    userNameTextCtrl.text = 'user_${userIDTextCtrl.text}';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: const SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          statusBarIconBrightness: Brightness.light,
        ),
        child: Container(
          height: double.infinity,
          width: double.infinity,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Color(0xFF2E3192), Color(0xFF1BFFFF)],
            ),
          ),
          child: Center(
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(24.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Icon(
                    Icons.live_tv_rounded,
                    size: 100,
                    color: Colors.white,
                  ),
                  const SizedBox(height: 20),
                  Text(
                    'Live Streaming',
                    style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 40),
                  Card(
                    elevation: 8,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16),
                    ),
                    color: Colors.white.withOpacity(0.95),
                    child: Padding(
                      padding: const EdgeInsets.all(24.0),
                      child: Column(
                        children: [
                          TextFormField(
                            controller: userIDTextCtrl,
                            decoration: InputDecoration(
                              labelText: 'User ID',
                              prefixIcon: const Icon(Icons.person_outline),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(12),
                              ),
                              filled: true,
                              fillColor: Colors.grey[50],
                            ),
                          ),
                          const SizedBox(height: 20),
                          TextFormField(
                            controller: userNameTextCtrl,
                            decoration: InputDecoration(
                              labelText: 'User Name',
                              prefixIcon: const Icon(Icons.badge_outlined),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(12),
                              ),
                              filled: true,
                              fillColor: Colors.grey[50],
                            ),
                          ),
                          const SizedBox(height: 30),
                          SizedBox(
                            width: double.infinity,
                            height: 50,
                            child: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                backgroundColor: const Color(0xFF2E3192),
                                foregroundColor: Colors.white,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(12),
                                ),
                                elevation: 2,
                              ),
                              onPressed: () => jumpToHomePage(
                                context,
                                localUserID: userIDTextCtrl.text,
                                localUserName: userNameTextCtrl.text,
                              ),
                              child: const Text(
                                'Start Streaming',
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  const SizedBox(height: 20),
                  const Text(
                    'Please test with two or more devices',
                    style: TextStyle(color: Colors.white70),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

📌 We intentionally force token authentication for security.

🏠 Home Page — Start or Watch Live

Users can:

🎥 Start Live (Host)
👀 Watch Live (Audience)

 import 'package:flutter/material.dart';
import 'utils/permission.dart';

import 'live_page.dart';

class HomePage extends StatefulWidget {
  const HomePage({
    super.key,
    required this.localUserID,
    required this.localUserName,
  });

  final String localUserID;
  final String localUserName;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  /// Users who use the same roomID can join the same live streaming.
  final roomTextCtrl = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        width: double.infinity,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color(0xFF2E3192), Color(0xFF1BFFFF)],
          ),
        ),
        child: SafeArea(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(24.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    CircleAvatar(
                      backgroundColor: Colors.white,
                      radius: 30,
                      child: Text(
                        widget.localUserName.isNotEmpty
                            ? widget.localUserName[0].toUpperCase()
                            : '?',
                        style: const TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                          color: Color(0xFF2E3192),
                        ),
                      ),
                    ),
                    const SizedBox(width: 16),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text(
                          'Welcome back,',
                          style: TextStyle(color: Colors.white70, fontSize: 14),
                        ),
                        Text(
                          widget.localUserName,
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
                const SizedBox(height: 40),
                Card(
                  elevation: 8,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16),
                  ),
                  color: Colors.white.withOpacity(0.95),
                  child: Padding(
                    padding: const EdgeInsets.all(24.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text(
                          'Join a Room',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                            color: Colors.black87,
                          ),
                        ),
                        const SizedBox(height: 16),
                        TextFormField(
                          controller: roomTextCtrl,
                          decoration: InputDecoration(
                            labelText: 'Room ID',
                            prefixIcon: const Icon(Icons.meeting_room),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(12),
                            ),
                            filled: true,
                            fillColor: Colors.grey[50],
                          ),
                        ),
                        const SizedBox(height: 24),
                        Row(
                          children: [
                            Expanded(
                              child: ElevatedButton.icon(
                                style: ElevatedButton.styleFrom(
                                  backgroundColor: const Color(0xFF2E3192),
                                  foregroundColor: Colors.white,
                                  padding: const EdgeInsets.symmetric(
                                    vertical: 16,
                                  ),
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(12),
                                  ),
                                ),
                                onPressed: () => jumpToLivePage(
                                  context,
                                  isHost: true,
                                  localUserID: widget.localUserID,
                                  localUserName: widget.localUserName,
                                  roomID: roomTextCtrl.text,
                                ),
                                icon: const Icon(Icons.videocam),
                                label: const Text('Start Live'),
                              ),
                            ),
                            const SizedBox(width: 12),
                            Expanded(
                              child: ElevatedButton.icon(
                                style: ElevatedButton.styleFrom(
                                  backgroundColor: Colors.white,
                                  foregroundColor: const Color(0xFF2E3192),
                                  padding: const EdgeInsets.symmetric(
                                    vertical: 16,
                                  ),
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(12),
                                    side: const BorderSide(
                                      color: Color(0xFF2E3192),
                                    ),
                                  ),
                                ),
                                onPressed: () => jumpToLivePage(
                                  context,
                                  isHost: false,
                                  localUserID: widget.localUserID,
                                  localUserName: widget.localUserName,
                                  roomID: roomTextCtrl.text,
                                ),
                                icon: const Icon(Icons.remove_red_eye),
                                label: const Text('Watch Live'),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
                const SizedBox(height: 20),
                Center(
                  child: Text(
                    'Your ID: ${widget.localUserID}',
                    style: const TextStyle(color: Colors.white54),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  void jumpToLivePage(
    BuildContext context, {
    required String roomID,
    required bool isHost,
    required String localUserID,
    required String localUserName,
  }) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) {
          return LivePage(
            isHost: isHost,
            localUserID: localUserID,
            localUserName: localUserName,
            roomID: roomID,
          );
        },
      ),
    );
  }
}

📸 Home page screenshot

🔴 Live Page — Core Streaming Logic

Login to Room with Token

import 'package:flutter/material.dart';
import 'package:zego_express_engine/zego_express_engine.dart';

import 'key_center.dart';
import 'utils/zegocloud_token.dart';

class LivePage extends StatefulWidget {
  const LivePage({
    super.key,
    required this.isHost,
    required this.localUserID,
    required this.localUserName,
    required this.roomID,
  });

  final bool isHost;
  final String localUserID;
  final String localUserName;
  final String roomID;

  @override
  State<LivePage> createState() => _LivePageState();
}

class _LivePageState extends State<LivePage> {
  Widget? localView;
  int? localViewID;
  Widget? remoteView;
  int? remoteViewID;

  @override
  void initState() {
    startListenEvent();
    loginRoom();
    super.initState();
  }

  @override
  void dispose() {
    stopListenEvent();
    logoutRoom();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: const Text("Live Streaming"),
        backgroundColor: Colors.transparent,
        elevation: 0,
        centerTitle: true,
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color(0xFF2E3192), Color(0xFF1BFFFF)],
          ),
        ),
        child: Stack(
          children: [
            // Video views
            Positioned.fill(
              child: SafeArea(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    children: [
                      Expanded(
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            color: Colors.black26,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.3),
                                blurRadius: 15,
                                spreadRadius: 5,
                              ),
                            ],
                          ),
                          clipBehavior: Clip.antiAlias,
                          child:
                              (widget.isHost ? localView : remoteView) ??
                              const Center(
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    CircularProgressIndicator(
                                      color: Colors.white,
                                    ),
                                    SizedBox(height: 20),
                                    Text(
                                      'Waiting for stream...',
                                      style: TextStyle(color: Colors.white70),
                                    ),
                                  ],
                                ),
                              ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            // UI Overlays
            Positioned(
              top: 100,
              left: 24,
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 12,
                  vertical: 8,
                ),
                decoration: BoxDecoration(
                  color: Colors.black45,
                  borderRadius: BorderRadius.circular(25),
                ),
                child: Row(
                  children: [
                    const CircleAvatar(
                      radius: 12,
                      backgroundColor: Colors.redAccent,
                      child: Icon(Icons.live_tv, size: 14, color: Colors.white),
                    ),
                    const SizedBox(width: 8),
                    Text(
                      'Room: ${widget.roomID}',
                      style: const TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Positioned(
              bottom: 50,
              left: 0,
              right: 0,
              child: Center(
                child: ElevatedButton.icon(
                  onPressed: () => Navigator.pop(context),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.redAccent,
                    foregroundColor: Colors.white,
                    padding: const EdgeInsets.symmetric(
                      horizontal: 40,
                      vertical: 15,
                    ),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(30),
                    ),
                    elevation: 5,
                  ),
                  icon: Icon(
                    widget.isHost ? Icons.stop_circle : Icons.exit_to_app,
                  ),
                  label: Text(
                    widget.isHost ? 'End Live' : 'Leave Live',
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future<ZegoRoomLoginResult> loginRoom() async {
    debugPrint('--- loginRoom Debug ---');
    debugPrint('AppID: ${KeyCenter.appID}');
    debugPrint('RoomID: |${widget.roomID}|');
    debugPrint('UserID: |${widget.localUserID}|');
    debugPrint('UserName: |${widget.localUserName}|');

    // The value of `userID` is generated locally and must be globally unique.
    final user = ZegoUser(widget.localUserID, widget.localUserName);

    // The value of `roomID` is generated locally and must be globally unique.
    final roomID = widget.roomID;

    // onRoomUserUpdate callback can be received when "isUserStatusNotify" parameter value is "true".
    ZegoRoomConfig roomConfig = ZegoRoomConfig.defaultConfig()
      ..isUserStatusNotify = true;

    roomConfig.token = ZegoTokenUtils.generateToken(
      KeyCenter.appID,
      KeyCenter.serverSecret,
      widget.localUserID,
    );

    debugPrint('Generated Token Length: ${roomConfig.token?.length}');

    // log in to a room
    return ZegoExpressEngine.instance
        .loginRoom(roomID, user, config: roomConfig)
        .then((ZegoRoomLoginResult loginRoomResult) {
          debugPrint(
            'loginRoom Result - errorCode:${loginRoomResult.errorCode}',
          );
          if (loginRoomResult.errorCode == 0) {
            if (widget.isHost) {
              startPreview();
              startPublish();
            }
          } else {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text(
                  'Error ${loginRoomResult.errorCode}: Check Room/User ID',
                ),
                backgroundColor: Colors.redAccent,
              ),
            );
          }
          return loginRoomResult;
        });
  }

  Future<ZegoRoomLogoutResult> logoutRoom() async {
    stopPreview();
    stopPublish();
    return ZegoExpressEngine.instance.logoutRoom(widget.roomID);
  }

  void startListenEvent() {
    // Callback for updates on the status of other users in the room.
    // Users can only receive callbacks when the isUserStatusNotify property of ZegoRoomConfig is set to `true` when logging in to the room (loginRoom).
    ZegoExpressEngine
        .onRoomUserUpdate = (roomID, updateType, List<ZegoUser> userList) {
      debugPrint(
        'onRoomUserUpdate: roomID: $roomID, updateType: ${updateType.name}, userList: ${userList.map((e) => e.userID)}',
      );
    };
    // Callback for updates on the status of the streams in the room.
    ZegoExpressEngine.onRoomStreamUpdate =
        (roomID, updateType, List<ZegoStream> streamList, extendedData) {
          debugPrint(
            'onRoomStreamUpdate: roomID: $roomID, updateType: $updateType, streamList: ${streamList.map((e) => e.streamID)}, extendedData: $extendedData',
          );
          if (updateType == ZegoUpdateType.Add) {
            for (final stream in streamList) {
              startPlayStream(stream.streamID);
            }
          } else {
            for (final stream in streamList) {
              stopPlayStream(stream.streamID);
            }
          }
        };
    // Callback for updates on the current user's room connection status.
    ZegoExpressEngine
        .onRoomStateUpdate = (roomID, state, errorCode, extendedData) {
      debugPrint(
        'onRoomStateUpdate: roomID: $roomID, state: ${state.name}, errorCode: $errorCode, extendedData: $extendedData',
      );
    };

    // Callback for updates on the current user's stream publishing changes.
    ZegoExpressEngine
        .onPublisherStateUpdate = (streamID, state, errorCode, extendedData) {
      debugPrint(
        'onPublisherStateUpdate: streamID: $streamID, state: ${state.name}, errorCode: $errorCode, extendedData: $extendedData',
      );
    };
  }

  void stopListenEvent() {
    ZegoExpressEngine.onRoomUserUpdate = null;
    ZegoExpressEngine.onRoomStreamUpdate = null;
    ZegoExpressEngine.onRoomStateUpdate = null;
    ZegoExpressEngine.onPublisherStateUpdate = null;
  }

  Future<void> startPreview() async {
    await ZegoExpressEngine.instance
        .createCanvasView((viewID) {
          localViewID = viewID;
          ZegoCanvas previewCanvas = ZegoCanvas(
            viewID,
            viewMode: ZegoViewMode.AspectFill,
          );
          ZegoExpressEngine.instance.startPreview(canvas: previewCanvas);
        })
        .then((canvasViewWidget) {
          setState(() => localView = canvasViewWidget);
        });
  }

  Future<void> stopPreview() async {
    ZegoExpressEngine.instance.stopPreview();
    if (localViewID != null) {
      await ZegoExpressEngine.instance.destroyCanvasView(localViewID!);
      setState(() {
        localViewID = null;
        localView = null;
      });
    }
  }

  Future<void> startPublish() async {
    // After calling the `loginRoom` method, call this method to publish streams.
    // The StreamID must be unique in the room.
    String streamID = '${widget.roomID}_${widget.localUserID}_call';
    return ZegoExpressEngine.instance.startPublishingStream(streamID);
  }

  Future<void> stopPublish() async {
    return ZegoExpressEngine.instance.stopPublishingStream();
  }

  Future<void> startPlayStream(String streamID) async {
    // Start to play streams. Set the view for rendering the remote streams.
    await ZegoExpressEngine.instance
        .createCanvasView((viewID) {
          remoteViewID = viewID;
          ZegoCanvas canvas = ZegoCanvas(
            viewID,
            viewMode: ZegoViewMode.AspectFill,
          );
          ZegoPlayerConfig config = ZegoPlayerConfig.defaultConfig();
          config.resourceMode =
              ZegoStreamResourceMode.Default; // live streaming
          // config.resourceMode = ZegoStreamResourceMode.OnlyL3; // interactive live streaming
          ZegoExpressEngine.instance.startPlayingStream(
            streamID,
            canvas: canvas,
            config: config,
          );
        })
        .then((canvasViewWidget) {
          setState(() => remoteView = canvasViewWidget);
        });
  }

  Future<void> stopPlayStream(String streamID) async {
    ZegoExpressEngine.instance.stopPlayingStream(streamID);
    if (remoteViewID != null) {
      ZegoExpressEngine.instance.destroyCanvasView(remoteViewID!);
      setState(() {
        remoteViewID = null;
        remoteView = null;
      });
    }
  }
}

📸 Screenshots

Below are some screenshots from the live streaming app showing different stages of the flow — from joining a room to watching a live stream in real time.

🧾 Join Room Screen

User enters the Room ID and chooses whether to start or watch a live stream.

🎥 Live Streaming (Host View)

The broadcaster starts the live stream and publishes video in real time.

👀 Live Streaming (Audience View)

Audience joins the same room and watches the live stream instantly.

All screenshots are captured from real devices
Tested with two different users in the same room
Streaming works instantly without any backend setup

⚠️ Important

n here is for testing only.
In production, tokens must be generated server-side.

Opens camera
Starts publishing live stream

This is what enables real-time updates, exactly like chat & video call apps.

🧠 Why This Architecture Works

✅ No WebRTC setup
✅ No signaling server
✅ Ultra-low latency
✅ Flutter-first SDK
✅ Production-ready

Perfect for:

Chat apps with live rooms
Social live streaming
Online classes
Events & webinars

🎉 Final Result

You’ve built a real-time Flutter Live Streaming app using ZEGOCLOUD that:

✔ Works like chat & video call apps
✔ Supports host & audience roles
✔ Uses secure token-based auth
✔ Requires no backend

🚀 Run it on two devices:

One starts the live stream
The other watches instantly

🔁 What’s Next?

You can extend this app by adding:

✨ Live chat inside the stream
✨ Multiple broadcasters
✨ Gifts & reactions
✨ Stream recording
✨ Firebase authentication

🏁 Conclusion

You’ve just built a real-time live streaming app in Flutter without touching media servers, WebRTC, or low-level streaming logic.

Thanks to ZEGOCLOUD, the hard parts are already solved — so you can focus on building features users actually care about.

🚀 Happy coding!

🔰How to Build a Real-Time Chat App in Flutter Using ZEGOCLOUD ZIMKit (No Backend Needed)

Hazem Hamdy — Wed, 10 Dec 2025 10:54:46 +0000

📌 Introduction

Real-time chat functionality is now a core feature in modern apps—whether you're creating a messaging platform like WhatsApp, a customer support chat, or a community group application. Instead of building servers, handling WebSockets, and syncing messages manually, ZEGOCLOUD provides ready-to-use APIs and UI components for Flutter developers. With ZIMKit, you can create a real-time chat app in minutes—without managing any backend infrastructure.

In this tutorial, we'll build a real-time chat app with:

✔ Login
✔ Private chat
✔ Group chat
✔ Messages in real time
✔ No backend required

🎯 What You Will Build

By the end of this article, you will be able to:

✔ Integrate ZEGOCLOUD ZIMKit in Flutter
✔ Initialize the chat SDK
✔ Register users locally
✔ Create private chats
✔ Create and join group chats
✔ Display conversations in real time

🔍 What is ZEGOCLOUD?

ZEGOCLOUD is a communication platform that provides SDKs such as:

In-app Chat

Voice & Video Calls

Live Streaming

Interactive Rooms

🌍 Website
https://www.zegocloud.com

💬 In-App Chat Product
https://www.zegocloud.com/product/in-app-chat

📚 Flutter Docs
https://www.zegocloud.com/docs/zim/flutter/quick-start

🟢 Step 1 — Install Zego ZIMKit

Open your pubspec.yaml file and add the ZIMKit dependency:

Then run:

flutter pub get

🔑 Step 2 — Initialize the Chat SDK

Create a file for credentials:

utils/app_string.dart

⚠️ Never expose your AppSign in public repos.

Required Android Configuration
1️⃣ Permissions

Add these permissions inside:

android/app/src/main/AndroidManifest.xml

2️⃣ Proguard Rules (Release Mode)

Create or edit:

android/app/proguard-rules.pro

3️⃣ Build Gradle Config
android/app/build.gradle

Enable minify + proguard:

🚀 Step 3 — Initialize ZIMKit in `main.dart`

import 'package:chat_app_zegogloud/screens/login.dart';
import 'package:chat_app_zegogloud/utils/app_string.dart';
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  ZIMKit().init(appID: AppString.appID, appSign: AppString.appSign);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Zego Chat',
      theme: ThemeData(primarySwatch: Colors.blue),
      debugShowCheckedModeBanner: false,
      home: const LoginPage(), 
    );
  }
}

🔐 Step 4 — Create Login Page

We authenticate users locally using userID and username. No backend needed.

screens/login.dart

import 'package:chat_app_zegogloud/screens/home.dart';
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final userId = TextEditingController();
  final userName = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Login to Chat')),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: userId,
                decoration: const InputDecoration(labelText: 'User ID'),
              ),
              TextField(
                controller: userName,
                decoration: const InputDecoration(labelText: 'User Name'),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  ZIMKit().connectUser(id: userId.text, name: userName.text);
                  Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => const HomePage()),
                  );
                },
                child: const Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

🏠 Step 5 — Home Page with Conversation List

This page shows all private and group chats.

screens/home.dart

import 'package:chat_app_zegogloud/screens/login.dart';
import 'package:chat_app_zegogloud/screens/home_page_popUp.dart';
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
        actions: [
          IconButton(icon: const Icon(Icons.logout), onPressed: _handleLogout),
          const HomePagePopup(),
        ],
      ),
      body: ZIMKitConversationListView(
        onPressed: (context, conversation, defaultAction) {
          // ✅ غيرت من onLongPress
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => ZIMKitMessageListPage(
                conversationID: conversation.id,
                conversationType: conversation.type,
              ),
            ),
          );
        },
      ),
    );
  }

  Future<void> _handleLogout() async {
    final confirm = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Logout'),
        content: const Text('Are you sure you want to logout?'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: const Text('Cancel'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, true),
            child: const Text('Logout'),
          ),
        ],
      ),
    );

    if (confirm == true && mounted) {
      await ZIMKit().disconnectUser();
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => const LoginPage()),
      );
    }
  }
}

💬 Step 6 — Enable Private + Group Chat

screens/home_page_popUp.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

class HomePagePopup extends StatefulWidget {
  const HomePagePopup({super.key});

  @override
  State<HomePagePopup> createState() => _HomePagePopupState();
}

class _HomePagePopupState extends State<HomePagePopup> {

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      itemBuilder: (context) => [
        PopupMenuItem(
          value: 'New Chat',
          child: ListTile(
            leading: const Icon(Icons.chat_bubble_outline_outlined),
            title: Text('New User', maxLines: 1),
            onTap: () => ZIMKit().showDefaultNewPeerChatDialog(context),
          ),
        ),

        PopupMenuItem(
          value: 'New Group',
          child: ListTile(
            leading: const Icon(Icons.group_outlined),
            title: Text('New Group', maxLines: 1),
            onTap: () => ZIMKit().showDefaultNewGroupChatDialog(context),
          ),
        ),
        PopupMenuItem(
          value: 'join Group Chat',
          child: ListTile(
            leading: const Icon(CupertinoIcons.person_2_fill),
            title: Text('join Group ', maxLines: 1),
          ),
          onTap: () => ZIMKit().showDefaultJoinGroupDialog(context),
        ),
      ],
      offset: const Offset(0, 50),
      elevation: 4,
      color: Colors.white,
      constraints: const BoxConstraints(maxWidth: 300),

      child: const Icon(Icons.more_vert),
    );
  }
}

🎥 UI Preview — App Screenshots
🔐 Login Screen

🏠 Home Page + Popup Menu

💬 Private / Group Chat Screen

🎉 Result

You now have a fully working chat app with:

✔ Real-time messaging
✔ Private + Group chats
✔ No backend
✔ Clean UI ready for production

🔁 What’s Next?

Try adding:

✨ Message reactions
✨ Typing indicator
✨ Push notifications
✨ Custom chat bubbles

🎉 Conclusion

You've now built a real-time chat app in Flutter with ZEGOCLOUD ZIMKit—no server setup, no WebSockets, and no backend code needed. Everything from message delivery to UI is handled for you.

🚀 Now start customizing your app and ship it to production!

🔗 Useful Links

👉 This article uses the official ZEGOCLOUD chat SDK. Learn more here:

📘 ZIMKit Docs
https://www.zegocloud.com/docs/zim/flutter/quick-start

💬 In-App Chat SDK
https://www.zegocloud.com/product/in-app-chat

How to Build a Real-Time Video Calling App in Flutter Using ZEGOCLOUD (No WebRTC Needed)

Hazem Hamdy — Mon, 08 Dec 2025 06:17:01 +0000

📌 Introduction

Video calling has become an essential part of modern applications—whether for online education, remote meetings, or technical support. Building a real-time communication system from scratch using WebRTC can be complicated and time-consuming. Luckily, services like ZEGOCLOUD simplify the entire process by providing a ready-to-use SDK that allows developers to integrate high-quality video calls into their apps with minimal effort.

In this guide, we’ll build a simple Flutter application that supports real-time video calls using the ZEGOCLOUD Prebuilt Call SDK. The steps are beginner-friendly and designed to help you get your first video calling app running quickly.

🎯 What You’ll Learn

By the end of this tutorial, you will be able to:

Understand what ZEGOCLOUD is and how it works
Integrate ZEGOCLOUD’s Video Call SDK into a Flutter project
Create a UI that allows users to join and start video calls
Run the app on two devices and test a real video call interaction

🔍 What Is ZEGOCLOUD?

ZEGOCLOUD is a cloud communication platform that provides ready-made solutions for video calls, voice calls, live streaming, and real-time chat. Instead of building a signaling layer and media engine yourself, you simply integrate their SDK and use your AppID and AppSign—and you’re good to go.

📎 Official Links

🌐 ZEGOCLOUD Website:
https://www.zegocloud.com

📞 ZEGOCLOUD Prebuilt Call SDK:
https://www.zegocloud.com/product/prebuilt-call

✋ Before We Start – Prerequisites

To follow along, make sure you have:

✔ Flutter installed on your machine
✔ A new Flutter project ready
✔ A ZEGOCLOUD account to generate:

AppID
AppSign

You can get them from the official documentation:

🔗 https://www.zegocloud.com/docs/uikit/callkit-flutter/quick-start

We’ll also use Firebase for storing basic user data and handling logout functionality:

🔗 https://console.firebase.google.com/u/0/

There’s also one more important step—editing your android/app/build.gradle. You must configure it correctly for the SDK to work. This is explained in the official docs, so make sure you follow it carefully.

🟢 Step 1 — Install the ZEGOCLOUD SDK

Open your pubspec.yaml file and add the ZEGOCLOUD dependency:

Then run:

flutter pub get
# install dependencies

This installs everything needed for video calling in your project.

🔑 Step — Add Your ZEGOCLOUD Keys

Create a new file named constant.dart and insert your AppID and AppSign inside it:

🟣 main file Initialize

import 'package:zego_uikit/zego_uikit.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
import 'package:zego_uikit_signaling_plugin/zego_uikit_signaling_plugin.dart';
import 'package:zegotest/calling_page.dart';
import 'package:zegotest/firebase_options.dart';
import 'package:zegotest/login_page.dart';

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
late SharedPreferences sharedPreferences;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  sharedPreferences = await SharedPreferences.getInstance();
  ZegoUIKitPrebuiltCallInvitationService().setNavigatorKey(navigatorKey);

  try {
    await ZegoUIKit().initLog();
    ZegoUIKitPrebuiltCallInvitationService().useSystemCallingUI([
      ZegoUIKitSignalingPlugin(),
    ]);

    debugPrint('✅ ZegoUIKit initialized successfully');
  } catch (e) {
    debugPrint('❌ Error initializing ZegoUIKit: $e');
  }

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      navigatorKey: navigatorKey,
      title: 'Zego Call Test',
      //theme: ThemeData.dark(),
      home: sharedPreferences.getString('id') != null
          ? CallingPage()
          : const LoginPage(),
    );
  }
}

Make sure you never expose your AppSign in a public repository.

🟣 Step — Create the Call Service

Before users can start or receive calls, we need a service that initializes the ZEGOCLOUD call system once the user logs in, and cleans everything up when they log out.
This ensures the SDK is ready to handle invitations, notifications, and real-time call updates.

Create a new file named:

callservices.dart

Then paste the following code:

import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
import 'package:zego_uikit_signaling_plugin/zego_uikit_signaling_plugin.dart';
import 'package:zegotest/constant.dart';
import 'package:zego_uikit/zego_uikit.dart';

class Callservices {
  /// on App's user login
  Future<void> onUserLogin(String userID, String userName) async {
    /// Initialize ZegoUIKitPrebuiltCallInvitationService
    /// We recommend calling this method as soon as the user logs in.
    await ZegoUIKitPrebuiltCallInvitationService().init(
      appID: Constant.appId,
      appSign: Constant.appSign,
      userID: userID,
      userName: userName,
      plugins: [ZegoUIKitSignalingPlugin()],

      /// Optional custom configuration
      requireConfig: (ZegoCallInvitationData data) {
        return ZegoUIKitPrebuiltCallConfig.groupVideoCall()
          ..avatarBuilder = (
            BuildContext context,
            Size size,
            ZegoUIKitUser? user,
            Map extraInfo,
          ) {
            return user?.name.isNotEmpty ?? false
                ? ClipOval(
                    child: Container(
                      width: size.width,
                      height: size.height,
                      color: Colors.blue,
                      child: Center(
                        child: Text(
                          user!.name.substring(0, 1).toUpperCase(),
                          style: const TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  )
                : ClipOval(
                    child: Container(
                      color: Colors.blue,
                      child: Center(
                        child: Text(
                          user?.name.isNotEmpty ?? false
                              ? user!.name.substring(0, 1).toUpperCase()
                              : 'U',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: size.width / 2,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  );
          };
      },
    );
  }

  /// on App's user logout
  void onUserLogout() {
    /// Unregister service and free resources
    ZegoUIKitPrebuiltCallInvitationService().uninit();
  }
}

⚙️ Step — Configure `android/app/build.gradle`

Open this file and make sure your Gradle setup is correct:

🔧 Update Gradle Wrapper Configuration

To ensure compatibility with ZEGOCLOUD and the latest Android tooling, you must update your Gradle wrapper version. This step is required for proper SDK integration.

📂 File Path

android/gradle/wrapper/gradle-wrapper.properties

✏️ Add or Update the Following Line

distributionUrl=https\://services.gradle.org/distributions/gradle-8.12-all.zip

📡 Required Android Permissions

Add the following permissions inside your AndroidManifest.xml:

🛡 Proguard Setup (Release mode only)

Inside build.gradle add:

android/app/

Then create the file in app progurad-rules.pro:

🔊 Add Audio Files in `raw` Folder

Create the folder:

android/app/src/main/res/raw

Place your audio files inside it such as:

you can follow the link in GitHub to download:

Link:
https://github.com/ZEGOCLOUD/zego_uikit_prebuilt_call_example_flutter/tree/master/call_with_offline_invitation/android/app/src/main/res/raw

🟣 Step 3 — Create the Video Call Screen

The goal here is to provide a screen where a user can join or start a call. ZEGOCLOUD gives us a prebuilt UI, so we don’t need to build everything from scratch.

Create a new file:

🟡 Step — Add the Login Screen

Before users can join or start a call, we need a simple login screen that collects a User ID and Username. These two values are required by ZEGOCLOUD to identify each participant in the call.

Create a new file named:

login_page.dart

and paste the following code:

import 'package:flutter/material.dart';
import 'package:zegotest/calling_page.dart';
import 'package:zegotest/callservices.dart';
import 'package:zegotest/main.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController username = TextEditingController();
  final TextEditingController id = TextEditingController();
  final GlobalKey<FormState> globleKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24.0),
          child: Form(
            key: globleKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const Icon(Icons.lock, size: 70, color: Colors.blue),
                const SizedBox(height: 20),
                const Text(
                  "Welcome Back!",
                  style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 30),

                // ID Field
                TextFormField(
                  controller: id,
                  decoration: InputDecoration(
                    labelText: "ID",
                    prefixIcon: const Icon(Icons.person),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                  validator: (value) =>
                      value == null || value.isEmpty ? "Enter ID" : null,
                ),
                const SizedBox(height: 15),

                // Username Field
                TextFormField(
                  controller: username,
                  decoration: InputDecoration(
                    labelText: "User Name",
                    prefixIcon: const Icon(Icons.badge),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                  validator: (value) => value == null || value.isEmpty
                      ? "Enter User Name"
                      : null,
                ),
                const SizedBox(height: 25),

                // Login Button
                ElevatedButton(
                  onPressed: () {
                    if (globleKey.currentState!.validate()) {
                      sharedPreferences.setString('id', id.text.trim());
                      sharedPreferences.setString(
                        'userName',
                        username.text.trim(),
                      );

                      Callservices callservices = Callservices();
                      callservices.onUserLogin(
                        id.text.trim(),
                        username.text.trim(),
                      );

                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text(
                            "Logged in as ${username.text} (ID: ${id.text})",
                          ),
                          backgroundColor: Colors.green,
                        ),
                      );

                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const CallingPage(),
                        ),
                      );
                    }
                  },
                  child: const Text('Login'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

call page

import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
import 'package:zegotest/callservices.dart';
import 'package:zegotest/login_page.dart';
import 'package:zegotest/main.dart';

class CallingPage extends StatefulWidget {
  const CallingPage({super.key});
  @override
  State<CallingPage> createState() => _CallingPageState();
}

class _CallingPageState extends State<CallingPage> {
  final TextEditingController userId = TextEditingController();
  final TextEditingController userName = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Calling Page")),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            TextFormField(
              controller: userId,
              decoration: InputDecoration(
                labelText: "User ID",
                prefixIcon: const Icon(Icons.badge),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
              onChanged: (_) {
                setState(() {}); // ✅ عشان الinvitees تتحدث أول بأول
              },
            ),

            SizedBox(height: 10),
            TextFormField(
              controller: userName,
              decoration: InputDecoration(
                labelText: "User Name",
                prefixIcon: const Icon(Icons.badge),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
            SizedBox(height: 20),

            CustomButtonCall(userId: userId, userName: userName),

            CustomButtonLogout(),
          ],
        ),
      ),
    );
  }
}

class CustomButtonLogout extends StatelessWidget {
  const CustomButtonLogout({super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Callservices callservices = Callservices();
        callservices.onUserLogout();
        sharedPreferences.clear();

        Navigator.pushAndRemoveUntil(
          context,
          MaterialPageRoute(builder: (context) => LoginPage()),
          (route) => false,
        );
      },
      child: Text('Log Out'),
    );
  }
}

class CustomButtonCall extends StatelessWidget {
  const CustomButtonCall({
    super.key,
    required this.userId,
    required this.userName,
  });

  final TextEditingController userId;
  final TextEditingController userName;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        ZegoUIKitPrebuiltCallInvitationService().send(
          invitees: [ZegoCallUser(userId.text, userName.text)],
          isVideoCall: false,
          customData: "Hello World",
        );
      },
      child: Text('Call Video'),
    );
  }
}

Once added, this screen will handle joining, leaving, and displaying the video call interface.

🟢 Step 4 — Start the Call

Now let’s connect everything with a simple button on the home screen. The user enters a Call ID, taps a button, and joins the call.

Once two users enter the same Call ID from different devices, they’ll instantly be connected.

Once the user logs in, they land here and can start a call.

📞 Incoming Call Preview

Description:

When a call invitation is received, ZEGOCLOUD displays a native call UI with accept/decline buttons—no UI coding required

🎥 Video Call Interface

Description:

Here’s the live video call running between two devices using ZEGOCLOUD’s prebuilt UI. Camera switching, mic control, and call end functionality are all ready out of the box.

🔁 What’s Next?

You can now:

Test calls between two devices
Add user authentication
Customize the UI
Explore more features from the ZEGOCLOUD ecosystem

And this is just the beginning—there’s a lot more we can build on top of this functionality.

🎉 Conclusion

You've just built a fully functional real-time video calling app in Flutter — without writing a WebRTC engine, without media servers, and without struggling with signaling logic.
Thanks to ZEGOCLOUD, all the heavy lifting is handled for you.

🚀 Now it's your turn…
Try inviting a friend, run the app on two devices, and enjoy your first live call!

If you want to go further, you can:

Customize the call UI
Add push notifications
Support group video calls
Integrate chat inside the call screen

The possibilities are endless.

DEV Community: Hazem Hamdy

Build a Flutter Live Streaming App Using ZEGOCLOUD (Like Chat & Video Call Apps)

🎯 What You’ll Build

🔍 What Is ZEGOCLOUD?

🔗 Official Links

🧭 App Flow Overview

🗂 Project Structure

🧩 Step 1 — Install Required Packages

🔐 Step 2 — Android Permissions Setup

⚙️ Step 3 — Android Build Configuration

🛡 Step 4 — Proguard Configuration (Release Mode)

🎙 Step 5 — Runtime Permissions

🟣 main.dart — App Entry Point

and create the file

you cade get the server Secret in the web site ZEGOCLUOD

🟡 Login Page — Engine Initialization

🏠 Home Page — Start or Watch Live

🔴 Live Page — Core Streaming Logic

Login to Room with Token

📸 Screenshots

🧾 Join Room Screen

🎥 Live Streaming (Host View)

👀 Live Streaming (Audience View)

🧠 Why This Architecture Works

🎉 Final Result

🔁 What’s Next?

🏁 Conclusion

🔰How to Build a Real-Time Chat App in Flutter Using ZEGOCLOUD ZIMKit (No Backend Needed)

🟢 Step 1 — Install Zego ZIMKit

🔑 Step 2 — Initialize the Chat SDK

🚀 Step 3 — Initialize ZIMKit in main.dart

🔐 Step 4 — Create Login Page

🏠 Step 5 — Home Page with Conversation List

💬 Step 6 — Enable Private + Group Chat

How to Build a Real-Time Video Calling App in Flutter Using ZEGOCLOUD (No WebRTC Needed)

📌 Introduction

🎯 What You’ll Learn

🔍 What Is ZEGOCLOUD?

✋ Before We Start – Prerequisites

🟢 Step 1 — Install the ZEGOCLOUD SDK

🔑 Step — Add Your ZEGOCLOUD Keys

🟣 main file Initialize

🟣 Step — Create the Call Service

⚙️ Step — Configure android/app/build.gradle

🔧 Update Gradle Wrapper Configuration

📂 File Path

✏️ Add or Update the Following Line

📡 Required Android Permissions

🛡 Proguard Setup (Release mode only)

🔊 Add Audio Files in raw Folder

you can follow the link in GitHub to download:

🟣 Step 3 — Create the Video Call Screen

🟡 Step — Add the Login Screen

🟢 Step 4 — Start the Call

Once the user logs in, they land here and can start a call.

📞 Incoming Call Preview

Description:

🎥 Video Call Interface

Description:

🔁 What’s Next?

🎉 Conclusion

🚀 Step 3 — Initialize ZIMKit in `main.dart`

⚙️ Step — Configure `android/app/build.gradle`

🔊 Add Audio Files in `raw` Folder