Tutorial

How to Build a Video Calling App with Flutter and Wibe Chat

Saurabh·2026-03-25·10 min read

Flutter developers have always gotten the short end of the stick when it comes to chat SDKs.

Most providers offer a JavaScript SDK first, an iOS SDK second, an Android SDK third, and then a "Flutter SDK" that's basically a thin wrapper with limited UI components. You end up building half the interface yourself.

I'm a Flutter developer, so this frustrates me personally.

Today I'm going to show you how to build a complete video calling app in Flutter using Wibe Chat — with full UI components, not just raw APIs.

What We're Building

A Flutter app with real-time text chat, 1:1 video calling, group video calls (up to 100 participants), screen sharing, camera and mic controls, and a participant grid view. About 20 minutes total.

Prerequisites

Flutter 3.16 or higher
Dart 3.2 or higher
A Wibe Chat account (free at wibechat.com)
A physical device or emulator (camera needed for video)

Step 1: Create a New Flutter Project

flutter create wibe_video_app
cd wibe_video_app

Step 2: Add the SDK

Open pubspec.yaml and add:

dependencies:
  flutter:
    sdk: flutter
  wibechat_flutter: ^1.0.0

Then run flutter pub get.

Step 3: Platform Configuration

Android — Add to AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />

Set minSdkVersion to 24 in build.gradle.

iOS — Add to Info.plist:

<key>NSCameraUsageDescription</key>
<string>Camera access is needed for video calls</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is needed for voice and video calls</string>

Step 4: Initialize the SDK

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await WibeChat.initialize(apiKey: 'wc_live_your_api_key_here');
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wibe Video App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF6C5CE7)),
        useMaterial3: true,
      ),
      home: const ChatScreen(),
    );
  }
}

Step 5: Build the Chat Screen with Video

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Team Chat'),
        actions: [
          IconButton(
            icon: const Icon(Icons.videocam),
            onPressed: () {
              WibeChat.startVideoCall(channelId: 'team-general', context: context);
            },
          ),
        ],
      ),
      body: const WibeChatView(
        channelId: 'team-general',
        showMessageInput: true,
        showTypingIndicator: true,
        showReadReceipts: true,
      ),
    );
  }
}

WibeChatView is a pre-built widget that handles the entire chat UI. The video call button triggers a full-screen video call interface.

Step 6: Run and Test

flutter run

Tap the video camera icon to start a call. For testing between two devices, install on a second device and join the same channel.

Step 7: Customize the Video Call UI

WibeChat.startVideoCall(
  channelId: 'team-general',
  context: context,
  config: VideoCallConfig(
    layout: VideoLayout.grid,
    maxParticipants: 100,
    enableScreenSharing: true,
    enableRecording: true,
    enableNoiseReduction: true,
    theme: VideoTheme(
      primaryColor: const Color(0xFF6C5CE7),
      backgroundColor: const Color(0xFF1A1A2E),
    ),
  ),
);

Performance Notes

Battery usage is reasonable. Similar to FaceTime on WiFi. Adaptive bitrate reduces quality on cellular to save battery.

Cellular works. The SDK handles WiFi-to-cellular switching gracefully. Tested mid-call — brief quality dip but no disconnection.

Startup is fast. First video frame renders in under 500ms on modern devices.

The full project source code is available on GitHub: github.com/wibechat/flutter-video-example

Frequently Asked Questions

Does it work on both iOS and Android?

Yes. The Flutter SDK compiles natively for both platforms. Video calling uses platform-native WebRTC under the hood.

What about screen sharing?

Supported on both iOS and Android. On Android, the system screen capture permission dialog appears. On iOS, it uses ReplayKit.

How many participants can join a video call?

Up to 100. The SDK automatically switches between grid view and spotlight view based on participant count.

Is the video encrypted?

Yes. All video calls use DTLS-SRTP encryption (the standard for WebRTC). No unencrypted media ever leaves the device.

Start building with Wibe Chat

Get started for free — no credit card required.

Get Started Now

Saurabh

Flutter Developer

Expert in real-time communication infrastructure and developer experiences.