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

Atchaya Jayabal — Fri, 06 Oct 2023 14:45:08 +0000

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.

DEV Community: Atchaya Jayabal