This documentation explains how to use the Nabla iOS and Android native SDKs with Flutter, by creating a Dart wrapper around native APIs.

⚠️
This documentation is provided as-is and we do not provide an official Flutter SDK for now.

Setup the native SDK dependencies

This section is a step-by-step guide to add the Nabla native SDK as a dependency of the native iOS and Android apps of your Flutter project.

Android

In android/build.gradle, add the JitPack repository:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' } // Needed for Nabla dependency
    }
}

In android/app/build.gradle:

⚠️
Make sure compileSdkVersion is set to 33 and minSdkVersion is set to 26 or more.

When that's done, add the Nabla dependencies:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

    // Nabla specific
    implementation 'com.nabla.nabla-android:messaging-ui:1.1.2' // For messaging
    implementation 'com.nabla.nabla-android:video-call:1.1.2' // For video call capabilities in messaging
    implementation 'com.nabla.nabla-android:scheduling:1.1.2' // For appointment scheduling

    implementation 'androidx.fragment:fragment-ktx:1.5.7' // Nabla needs those helpers
}

In app/src/main/res/values/styles.xml, make sure that the NormalTheme parent's is @style/Theme.Material3.Light.NoActionBar:

<!-- Theme applied to the Android Window as soon as the process has started.
     This theme determines the color of the Android Window while your
     Flutter UI initializes, as well as behind your Flutter UI while its
     running.

     This Theme is only used starting with V2 of Flutter's Android embedding. -->
<style name="NormalTheme" parent="@style/Theme.Material3.Light.NoActionBar">
    <item name="android:windowBackground">?android:colorBackground</item>
</style>

In app/src/main/res/values-night/styles.xml, make sure that the NormalTheme parent's is @style/Theme.Material3.NoActionBar:

<!-- Theme applied to the Android Window as soon as the process has started.
     This theme determines the color of the Android Window while your
     Flutter UI initializes, as well as behind your Flutter UI while its
     running.

     This Theme is only used starting with V2 of Flutter's Android embedding. -->
<style name="NormalTheme" parent="@style/Theme.Material3.Dark.NoActionBar">
    <item name="android:windowBackground">?android:colorBackground</item>
</style>

In app/src/main/AndroidManifest.xml, add a android:theme attribute to the application tag with the value of the normal theme or replace the current one if different:

<application android:label="YourAppName" android:name="${applicationName}" android:icon="@mipmap/ic_launcher" android:allowBackup="false" android:theme="@style/NormalTheme">

iOS

In ios/Podfile, set the platform to iOS 13 at the very top of the file and add Nabla dependencies at the bottom

platform :ios, '13.0'

...

# Nabla specific
pod 'NablaMessagingUI', '1.1.1' # For messaging
pod 'NablaVideoCall', '1.1.1' # For video call capabilities in messaging
pod 'NablaScheduling', '1.1.1' # For appointment scheduling

Run pod install:

cd ios
pod install