DEV Community

Hazem Hamdy
Hazem Hamdy

Posted on

๐Ÿ”ฐHow to Build a Real-Time Chat App in Flutter Using ZEGOCLOUD ZIMKit (No Backend Needed)

#flutter #zegocloud #mobileappdevelopment #tutorial

๐Ÿ“Œ 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
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”‘ Step 2 โ€” Initialize the Chat SDK

Create a file for credentials:

utils/app_string.dart
Enter fullscreen mode Exit fullscreen mode

โš ๏ธ 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(), 
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

๐Ÿ” Step 4 โ€” Create Login Page

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

screens/login.dart
Enter fullscreen mode Exit fullscreen mode 
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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

๐Ÿ  Step 5 โ€” Home Page with Conversation List

This page shows all private and group chats.

screens/home.dart
Enter fullscreen mode Exit fullscreen mode 
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()),
      );
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

๐Ÿ’ฌ Step 6 โ€” Enable Private + Group Chat 

screens/home_page_popUp.dart
Enter fullscreen mode Exit fullscreen mode 
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),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

๐ŸŽฅ UI Preview โ€” App Screenshots
๐Ÿ” Login Screen

Login Screen

๐Ÿ  Home Page + Popup Menu
Home Page

๐Ÿ’ฌ Private / Group Chat Screen
Chat Page

๐ŸŽ‰ 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

Top comments (1)

Collapse
ย 
the_secreteinformer_4848 profile image
The Secrete Informer โ€ข

Anyone want to purchase Zegocloud Credits for very cheap price contact me I have Some credits in my zegocloud account want to sell it.