Build a Chat & Voice Call WhatsApp Clone with FlutterFlow and MirrorFly

In this tutorial, you'll learn how to build a WhatsApp-like app using FlutterFlow and MirrorFly’s Chat & Call SDK. This will include:

1. Setting up the environment

2. Integrating Chat SDK for messaging

3. Integrating Call SDK for audio/video calls

4. Handling user registration & login

5. Sending & receiving messages

6. Making & receiving calls

1. What You’ll Need:

• Flutter SDK installed

• FlutterFlow account

• Android Studio or Xcode for device testing

• A MirrorFly account 

Your license key from the MirrorFly dashboard

2. Setup MirrorFly SDK in Flutter Project

Step 1: Create Flutter Project

Use FlutterFlow to scaffold your UI or create a basic Flutter app manually.

Step 2: Add MirrorFly Packages

Create packages/flysdk Folder

• Download the MirrorFly Chat SDK zip

• Extract flysdk into packages/ directory

Update pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  mirrorfly_plugin: ^1.4.0

flysdk:
  path: packages/flysdk

Step 3: Import SDK

import 'package:flysdk/flysdk.dart';
import 'package:mirrorfly_plugin/mirrorfly.dart';

3. Initialize MirrorFly SDK

In main.dart

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Mirrorfly.initializeSDK(
    licenseKey: "YOUR_LICENSE_KEY",
    iOSContainerID: "group.com.example.app",
    flyCallback: (FlyResponse response) {
      runApp(const MyApp());
    },
  );
}

4. User Registration & Login

// Login with user ID and optional FCM token
Mirrorfly.login(
  userIdentifier: "user123",  // Alphanumeric only
  fcmToken: "FCM_TOKEN",
  isForceRegister: true,
  flyCallback: (FlyResponse response) {
    if (response.isSuccess && response.hasData) {
      print("User logged in successfully");
    }
  },
);

5. Send & Receive Messages

Send a Message

var userJid = await FlyChat.getJid("user456");

FlyChat.sendTextMessage("Hello there!", userJid, "").then((value) {
  var chatMessage = sendMessageModelFromJson(value);
  print("Message Sent");
});

Receive Message Listener

FlyChat.onMessageReceived.listen((result) {
  var chatMessage = sendMessageModelFromJson(result);
  print("New message: ${chatMessage.message}");
});

6. Make & Receive Calls

Request Permissions (Android 12+)

Make sure to request:

• BLUETOOTH_CONNECT

• READ_PHONE_STATE

• POST_NOTIFICATIONS

• Camera & Microphone access

Make a Voice Call

Mirrorfly.makeVoiceCall(toUserJid: userJid, flyCallBack: (FlyResponse response) {
  if (response.isSuccess) {
    print("Calling...");
  }
});

Receive Call

Mirrorfly.onCallStatusUpdated.listen((event) {
  var statusUpdateReceived = jsonDecode(event);
  var status = statusUpdateReceived["callStatus"];
  print("Call status: $status");
});

7. Platform-Specific Configurations

Android

In android/build.gradle

allprojects {
  repositories {
    jcenter()
    maven { url "https://repo.mirrorfly.com/release" }
  }
}

In android/app/build.gradle

android {
  compileSdk 34
  defaultConfig {
    minSdkVersion 21
    targetSdkVersion 34
  }
}

iOS

In ios/Podfile, append

post_install do |installer|
  ...
end

Set in Xcode:

• Bitcode: No

• Capabilities: Enable Background Modes (Audio, VoIP, Remote Notifications)

8. Testing the App

• Use two test accounts (e.g., user123 and user456)

• Test sending messages and making calls

• Log call status via listeners

• Ensure notifications work with FCM setup

Conclusion

You’ve now built a basic WhatsApp-style app using FlutterFlow UI and MirrorFly SDK. It includes:

1. Real-time chat

2. Voice call support

3. User authentication

4. Cross-platform compatibility

If you want UI samples or the full GitHub starter kit, MirrorFly provides downloadable samples here.