How to integrate FlutterFlow with Sinch?

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a free No-Code consultation

Step 1: Create Account on Sinch

Visit Sinch Website:
Navigate to Sinch’s official website.
Sign Up:
If you do not have an account, sign up by providing the necessary details. Confirm your email address to activate the account.
Log In:
Log in to your Sinch dashboard using your credentials.

Step 2: Create an Application on Sinch

Go to Dashboard:
Once logged in, access the Sinch Dashboard.
Create New Application:
Click on 'Add a new app’ or similar button to create a new application.
Fill in the Details:
Provide a name and other necessary details for your application. Save the application information.

Step 3: Obtain Sinch Credentials

Access Credentials:
Go to the application settings or configuration section in your dashboard.
Copy Key and Secret:
Locate your Application Key and Application Secret and copy them. You’ll need these credentials when configuring the integration in FlutterFlow.

Step 4: Prepare FlutterFlow Project

Create a New Project:
Open FlutterFlow and create a new project if you haven’t already.
Project Settings:
Go to the ‘Settings’ section to configure essential settings for your project.

Step 5: Add Sinch SDK to FlutterFlow Project

Install Dependencies:
In your Flutter project, open pubspec.yaml and add the Sinch SDK:
```
dependencies:
  flutter:
    sdk: flutter
  sinch_flutter_sdk:
  # Add any other dependencies your project needs
```
Run flutter pub get to install the dependencies.

Step 6: Initialize Sinch in FlutterFlow

Create Initialization Code:
In the main Dart file of your FlutterFlow project, import the Sinch SDK:
```
import 'package:sinch_flutter_sdk/sinch_flutter_sdk.dart';
```

Initialize the SDK:
In the main function or an initialization function, initialize the Sinch SDK:

void initSinch() {
  final sinch = SinchClientBuilder.instance
    .applicationKey('your_application_key')
    .applicationSecret('your_application_secret')
    .environmentHost('clientapi.sinch.com')
    .build();
  sinch.start();
}

Step 7: Set Up User Authentication

User Login Flow:
Configure user authentication flow in FlutterFlow to manage how users authorize and authenticate.

Link Sinch to Authenticated User:
After user authentication, link the authenticated user details with Sinch client:

void signInWithSinch(String userId) {
  sinch.setSupportManagedPush(true); // Optional for push notifications
  sinch.setUserId(userId).start();
}

Step 8: Implement Voice or Video Call Features

Set Up Call Button:
Add a button in the FlutterFlow UI which users can press to initiate a call.
Configure Call Function:
Write the function that will be triggered on button press to start a call:
```
void startCall(String recipientId) {
  sinch.getCallClient().callPhoneNumber(recipientId);
}
```

Call Listener:
Add a call listener to monitor call state changes:

sinch.getCallClient().addCallClientListener((CallClientListener callClient) {
  callClient.addCallListener((Call call) {
    call.addCallListener(MyCallListener());
  });
});

class MyCallListener implements CallListener {
  @override
  void onCallEstablished(Call call) {
    // Update UI - call established
  }

  @override
  void onCallEnded(Call call) {
    // Update UI - call ended
  }

  @override
  void onCallProgressing(Call call) {
    // Update UI - call progressing
  }
}

Step 9: Testing and Debugging

Run Your App:
Make sure to run your app on both emulator and physical devices to thoroughly test the integration.
Monitor Logs:
Use console logs to monitor the behavior and catch any errors. Check your Sinch dashboard for call metrics and logs.

Step 10: Deployment

Prepare for Production:
Remove debug-related code or configurations.
Deploy App:
Deploy your FlutterFlow application to the App Store and Google Play Store following FlutterFlow’s deployment guidelines.

FlutterFlow and Sinch integration usecase

Scenario:
A telehealth startup aims to improve its patient communication and consultation scheduling by offering real-time video calls through its mobile app. They believe that integrating Sinch with FlutterFlow will provide a seamless experience for both doctors and patients.

Solution: Integrating FlutterFlow with Sinch

App Development:

The startup uses FlutterFlow to design a user-friendly mobile app for both iOS and Android platforms.
The app includes features like user registration, appointment scheduling, and an embedded video call functionality.

Setting Up the Integration:

The startup integrates Sinch by installing the Sinch API within FlutterFlow and configuring it with their Sinch credentials.
They set up workflows in FlutterFlow that are triggered when a video consultation is scheduled or initiated.

Consultation Workflow:

A patient schedules a video consultation through the FlutterFlow app.
The workflow generates a unique video call link using Sinch's API and schedules the call.
Both the doctor and patient receive a notification with the video call link, accessible from the app.

In-App Video Calling:

At the scheduled time, both parties open the app and access the video call link.
The integration ensures that the video call is initiated in-app using Sinch, without needing to leave the FlutterFlow environment.

Post-Consultation Follow-Up:

After the consultation, the workflow triggers an automated follow-up message to gather feedback from both the doctor and patient.
The collected feedback is stored in a database for quality assurance and further app improvements.

Monitoring and Analytics:

The integration allows for tracking call durations, user satisfaction, and connection quality for each session.
The telehealth startup can monitor the performance and effectiveness of their video consultation service using analytics dashboards.

Benefits:

Enhanced User Experience: The seamless integration of video calls within the app offers a hassle-free experience for both doctors and patients.
Efficiency: Automating the scheduling and notification process saves time and reduces the risk of manual errors.
Quality Assurance: Collecting feedback post-consultation helps improve service quality and patient satisfaction.
Centralized Data: All user interactions, consultations, and feedback are stored within a single platform, making it easy to manage and analyze.

Conclusion:
By integrating FlutterFlow with Sinch, the telehealth startup can offer a streamlined video consultation service, ensuring efficient communication and high-quality patient care.

FlutterFlow and Sinch integration: Step-by-Step Guide 2024

What is Sinch?