Integrating MirrorFly’s Chat SDK with a FlutterFlow project requires more than FlutterFlow’s native UI Builder. You’ll need to use custom code. Here is a step-by-step guide that combines MirrorFly’s official integration with necessary additions to make it work in a FlutterFlow + Custom Code environment:
Prerequisites
1.FlutterFlow project created.
Install FlutterFlow in your device and create a project.
2.Get MirrorFly SDK license key
To download MirrorFly, you need to go through their team. Contact MirrorFly Experts, discuss the customization you need, purchase the solution and get the credentials for your account
Login to your account, go to the dashboard, download the SDK for the platform you prefer to build, and get the license key.
3.Flutter SDK installed locally.
Install the Flutter SDK you get from MirrorFly on your device at a preferred location, easy for access.
4.FlutterFlow GitHub integration set up
If you have a repo in Github, sync the code to a local environment and make the necessary manual changes.
Once you’ve got all these initial requirements ready, you can start with the implementation!
Step-by-Step Integration: MirrorFly Chat SDK + Flutter Flow
1.Connect FlutterFlow to GitHub
In your FlutterFlow project, go to Settings > Integrations > GitHub and follow the prompts to connect your GitHub account.
<code>
Create a new GitHub repository and install the FlutterFlow GitHub App on your account. Once connected, use Push to GitHub in FlutterFlow. It will push the generated code to a branch named flutterflow. To preserve custom changes, create a new branch (e.g. develop) from flutterflow and do your coding there. Avoid making direct edits on the flutterflow branch since FlutterFlow will overwrite it on future pushes.
2. Clone and Add the MirrorFly SDK:
Clone the repo locally (e.g. git clone https://github.com/yourname/your-repo.git). In your IDE, open the project and edit pubspec.yaml: under dependencies add the MirrorFly Flutter SDK.
Save and run flutter pub get to fetch the package. Next, configure the Android build: in android/build.gradle add MirrorFly’s Maven repository under allprojects.repositories:
allprojects {
repositories {
google()
mavenCentral()
maven { url "https://repo.mirrorfly.com/release" }
}
}
Then in android/app/build.gradle add packaging exclusions to avoid conflicts:
android {
// ...
packagingOptions {
exclude 'META-INF/AL2.0'
exclude 'META-INF/DEPENDENCIES'
exclude 'META-INF/LICENSE'
// ... (other excludes as shown in MirrorFly docs)
exclude("META-INF/*.kotlin_module")
}
}Finally, run flutter pub get again. (On iOS, we’ll adjust the Podfile and app groups in a later step.)
3. Create a MirrorFly Service Wrapper:
In your Flutter project, create a Dart file (e.g. lib/services/mirrorfly_service.dart) to wrap MirrorFly calls. First import the plugin
import 'package:mirrorfly_plugin/mirrorfly.dart';Then define a class with static methods. For example:
class MirrorflyService {
static void initialize() {
Mirrorfly.initializeSDK(
licenseKey: 'YOUR_LICENSE_KEY',
iOSContainerID: 'YOUR_APP_GROUP_ID',
chatHistoryEnable: false,
);
}
static Future<void> registerUser(String userId) async {
try {
await Mirrorfly.registerUser(userId);
} catch (error) {
print('Registration error: $error');
}
}
static Future<void> sendMessage(String message, String jid) async {
try {
await Mirrorfly.sendTextMessage(message, jid);
} catch (error) {
print('Send message error: $error');
}
}
}This wraps the MirrorFly SDK functions (for example, Mirrorfly.registerUser and Mirrorfly.sendTextMessage). The initialize() method uses your MirrorFly license key and iOS App Group ID (see next step). You can also call Mirrorfly.getJid(username) to get a user’s JID if needed.
4. Initialize the SDK in main.dart:
Open lib/main.dart and modify main() to initialize MirrorFly before running the app.
For example:
void main() {
WidgetsFlutterBinding.ensureInitialized();
Mirrorfly.initializeSDK(
licenseKey: 'YOUR_LICENSE_KEY',
iOSContainerID: 'YOUR_APP_GROUP_ID',
chatHistoryEnable: false,
);
runApp(MyApp());
}Replace 'YOUR_LICENSE_KEY' with the key from your MirrorFly account, and 'YOUR_APP_GROUP_ID' with the App Group ID for iOS (created in Apple Developer). This ensures the SDK is set up on app start.
5. Create Custom Functions in FlutterFlow:
In FlutterFlow, navigate to Custom Functions or Custom Actions (in-app code editor or VS Code extension) and create functions that call your service. For example, you might define:
Future initializeMirrorfly() async {
MirrorflyService.initialize();
}
Future<bool> registerMirrorflyUser(String userId) async {
await MirrorflyService.registerUser(userId);
return true;
}
Future<bool> sendMirrorflyMessage(String message, String jid) async {
await MirrorflyService.sendMessage(message, jid);
return true;
}These custom Dart functions can import your service class (e.g. import 'services/mirrorfly_service.dart';) and invoke its methods. This lets FlutterFlow’s UI actions trigger the MirrorFly SDK. The MirrorFly plugin’s registration method looks like Mirrorfly.registerUser(userIdentifier).then(...).catchError(...), and sending a message uses Mirrorfly.sendTextMessage(message, jid), so your wrappers handle these calls internally.
6. Build the Chat UI:
Use FlutterFlow’s widget editor to design the chat screen. Add a ListView (or Column with a repeating item) for messages and a TextField at the bottom with a Send button. In the ListView, use a Firestore Query to fetch from a messages collection, ordering by timestamp so messages appear chronologically.
For example, configure the query to use a “stream” of documents ordered by a timestamp field. For each document, show the message text and sender.
Below the ListView, place a row with a TextField for user input and an IconButton (Send). In the Send button’s action flow, first check that the TextField is not empty. Then call your custom sendMirrorflyMessage action to transmit via MirrorFly.
7. Store Messages in Firestore:
To use your own backend for message history, add a Firestore write after sending. In the Send button action (after calling MirrorFly), add a Create Document action to add a message record to Firestore. For example, add a document to messages with fields.
text: <message text>
sender: <current user ID>
timestamp: FieldValue.serverTimestamp()You can also include other metadata (receiver ID, chat room ID, etc.). For instance, in code you might do:
FirebaseFirestore.instance.collection('messages').add({
'text': messageText,
'sender': currentUserId,
'timestamp': FieldValue.serverTimestamp(),
});This ensures your UI list (bound to Firestore) updates with the new message. By using Firestore as the data store, all clients see the chat history in real time.
8. Push Code and Sync FlutterFlow:
After making code/UI changes, commit and push to GitHub. For example:
git add .
git commit -m "Add MirrorFly chat integration"
git push origin develop
On GitHub, create a pull request from the flutterflow branch into your develop branch and merge it. This incorporates the latest generated code. In FlutterFlow’s editor, use the GitHub integration to sync (pull) the develop branch. Now FlutterFlow will include your custom code and UI. When everything works, merge develop into main (via PR on GitHub) and use FlutterFlow’s deployment options to build and publish your app.
9. Handle Platform-Specific Setup:
Android: Ensure you have the MirrorFly Maven repo and packaging options as above. Also verify your AndroidManifest.xml has Internet permissions. No special code changes are needed beyond what’s already done.
iOS: In Xcode, open the iOS Runner project. Under Signing & Capabilities, add an App Group with an identifier (e.g. group.com.yourcompany.chat). Use this exact ID as iOSContainerID in your initialization code. In ios/Podfile, add the recommended post_install script from MirrorFly docs (setting the platform to iOS 12.1+, disabling bitcode, etc.). For example, ensure your Podfile has:
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.1'
config.build_settings['ENABLE_BITCODE'] = 'NO'
# ... other settings as per docs ...
end
end
endFinally, build the app on both platforms. The MirrorFly SDK is now initialized on launch, your custom code invokes it, and chat data is stored in your Firestore backend.