DEV Community

Atchaya Jayabal
Atchaya Jayabal

Posted on • Edited on

Tutorial To Add Real-time Call Features To Your Client App In 30 mins

Creating a chat app using Plugin can be a great way to add real-time chat features to your Flutter app.

In this tutorial, I will guide you through the process step by step, making it clean and simple to understand.

Step 1: Prerequisites

Before we begin, ensure you have the following prerequisites:

  • Flutter SDK
  • Flutter Project
  • Basic knowledge of Flutter and Dart programming
  • MirrorFly Flutter Plugin

Step 2: Set Up Your Flutter Project

Start by creating a new Flutter project or using an existing one.

Step 3: Add the Plugin Dependencies

Open your pubspec.yaml file and add the following dependencies:

dependencies:
mirrorfly_plugin: ^0.0.7

Run flutter pub get in your project directory to fetch and install the dependencies.

Step 4: Initialize MirrorFly Plugin

In your main.dart file, initialize the MirrorFly Plugin in the main function before calling runApp. Replace 'Your_Mirrorfly_Licence_Key' with your actual MirrorFly license key and 'Your_iOS_app_Group_id' with your iOS app group ID if you're targeting iOS.
void main() {
WidgetsFlutterBinding.ensureInitialized();
Mirrorfly.init(
baseUrl: 'https://api-preprod-sandbox.mirrorfly.com/api/v1/',
licenseKey: 'Your_Mirrorfly_Licence_Key',
iOSContainerID: 'Your_iOS_app_Group_id');
runApp(const MyApp());
}

Step 5: User Registration

To register a user in the chat, use the Mirrorfly.registerUser method. Replace 'userIdentifier' with a unique user ID, and optionally pass an FCM token if needed.
Mirrorfly.registerUser('userIdentifier').then((value) {
var userData = registerModelFromJson(value);
}).catchError((error) {
debugPrint(error.message);
});

Step 6: Send a One-to-One Message

To send a one-to-one text message to another user, you need to get their JID (Jabber ID) first using **Mirrorfly.getJid. **Then, use **Mirrorfly.sendTextMessage **to send the message.
var userJid = await Mirrorfly.getJid('username');
Mirrorfly.sendTextMessage('message', userJid).then((value) {
var chatMessage = sendMessageModelFromJson(value);
});

Step 7: Receive One-to-One Messages

To receive one-to-one messages, you can listen for incoming messages using Mirrorfly.onMessageReceived.
Mirrorfly.onMessageReceived.listen((result) {
var chatMessage = sendMessageModelFromJson(result);
// Handle the received message here
});

That's it! You've successfully set up a basic chat app using the MirrorFly Chat Plugin for Flutter. You can expand upon this foundation to create a full-featured chat application with features like group chats, multimedia messages, and more.

Remember to handle user authentication, message storage, and other essential aspects of a chat application as your project evolves. Additionally, check the official plugin documentation for more advanced features and customization options.

Top comments (0)