# Installation and configuration (Flutter)

In this article you will find out how to install and initialize SDK in a Flutter mobile application. While performing the actions from this guide, keep the order presented in this article.


<div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

The [Settings](/developers/mobile-sdk/settings#pre-initialization-settings) article contains additional information about SDK behaviors you may need prior to configuration.

</div></div></div>



## Requirements

You need:
* Access to [workspace](/docs/settings/business-profile)
* A Profile [API Key](/docs/settings/tool/api#adding-api-keys)  
  When creating the API key, use allowlisting or denylisting to only allow the events you intend to use.
* Flutter configured on your machine - [Getting Started](https://docs.flutter.dev)
* VS Code / Android Studio / Xcode

## Android{id=requirements-android}

For the **Android** platform it uses the [Synerise Android SDK](https://github.com/Synerise/android-sdk).

The development and debugging can be done with Android Studio.

* Recommended environment:
  - Minimum Android SDK version - 24
  - Supported targetSDKVersion - 33

## iOS {id=requirements-ios}

For the **iOS** platform it uses the [Synerise iOS SDK](https://github.com/Synerise/synerise-ios-sdk).

The development and debugging can be done with Xcode.

* Recommended environment:
  - Xcode 16
  - iOS SDK 18
* Target deployment:
  * iOS 13.0+ for SDK versions 2.0.0 and higher
  * iOS 9.0+ for SDK versions lower than 2.0.0

---

## Installation

### CLI

```
 $ flutter pub add synerise_flutter_sdk
```

This will add a line similar to this to your package's `pubspec.yaml` and run an implicit `flutter pub get`:

```
dependencies:
  synerise_flutter_sdk: ^0.7.4
```

Alternatively, your editor might support `flutter pub get`. Check the docs for your editor to learn more.

### Path dependency

First you will need to add the Synerise Flutter SDK to your mobile application. To do that you can use the path dependency method in your `pubspec.yaml` as follows:

via ssh:
```
synerise_flutter_sdk: 
    git:
      url: git@github.com:Synerise/synerise-flutter-sdk.git
``` 

or 

via https:

```
synerise_flutter_sdk: 
    git:
      url: https://github.com/Synerise/synerise-flutter-sdk.git
``` 

After that you can run `flutter pub get` to resolve the new dependency.

---

### Importing Synerise SDK

You will need to import **Synerise.dart** from the **synerise_flutter_sdk** plugin.


<div class="content-tabs code-tabs" data-tab-group="tabgrp-602">
<div class="tab-buttons"><button class="tab-button" data-tab-id="tabgrp-602-0" data-tab-group="tabgrp-602" data-tab-active="true">Dart</button></div>

<div class="tab-panel" data-tab-id="tabgrp-602-0" data-tab-group="tabgrp-602" data-tab-active="true">

```Dart
import 'package:synerise_flutter_sdk/synerise.dart';
```

</div>
</div>



## Android gradle & configuration

1. In the Android part of your application, add  
``maven { url 'https://pkgs.dev.azure.com/Synerise/AndroidSDK/_packaging/prod/maven/v1' }``   
to the `android/build.gradle`:

2. Make sure you included the following repositories:  
`` 
    google()
    mavenCentral()
``

The whole build.gradle snippet must look as follows:

```
repositories {
    google()
    mavenCentral()
    maven { url 'https://pkgs.dev.azure.com/Synerise/AndroidSDK/_packaging/prod/maven/v1' }
}

``` 

then in your MainActivity file add:



<div class="content-tabs code-tabs" data-tab-group="tabgrp-603">
<div class="tab-buttons"><button class="tab-button" data-tab-id="tabgrp-603-0" data-tab-group="tabgrp-603" data-tab-active="true">Dart</button></div>

<div class="tab-panel" data-tab-id="tabgrp-603-0" data-tab-group="tabgrp-603" data-tab-active="true">

```Dart
public class MainActivity extends FlutterActivity {
@Override    
public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    super.configureFlutterEngine(flutterEngine);        
    SyneriseMethodChannel.configureChannel(flutterEngine);    
}}
```

</div>
</div>


## iOS configuration

In iOS portion of your application (/ios) you will need to run
`pod update`

## Initialization
---

### Basic initialization

Initialize the Synerise SDK and provide the [Profile API Key](/docs/settings/tool/api).  
  

<div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

Initialize Synerise SDK in the application workflow as early as possible.

</div></div></div>



<div class="content-tabs code-tabs" data-tab-group="tabgrp-604">
<div class="tab-buttons"><button class="tab-button" data-tab-id="tabgrp-604-0" data-tab-group="tabgrp-604" data-tab-active="true">Dart</button></div>

<div class="tab-panel" data-tab-id="tabgrp-604-0" data-tab-group="tabgrp-604" data-tab-active="true">

```Dart
Synerise.initializer()
  .withApiKey("YOUR_PROFILE_API_KEY")  // 1
  .setRequestValidationSalt("YOUR_REQUEST_VALIDATION_SALT")  // 2
  .withDebugModeEnabled(false)  // 3
  .withCrashHandlingEnabled(true)  // 4
  .setMessagingServiceType(MessagingServiceType.SERVICE_TYPE) // 5
  .init();
```

</div>
</div>


1. `.withApiKey('YOUR_PROFILE_API_KEY')` - Sets Profile API Key for Synerise SDK initialization.
2. `.withRequestValidationSalt('YOUR_REQUEST_VALIDATION_SALT')` - Sets salt string for request validation.
3. `.withDebugModeEnabled(false)` - Enables debug mode. See [Debug mode](/developers/mobile-sdk/installation-and-configuration/react-native#debug-mode) section for more information.
4. `.withCrashHandlingEnabled(true)` - Enables crash handling. Synerise SDK sends a crash event automatically when an uncaught exception occurs.
5. `.setMessagingServiceType(MessagingServiceType.SERVICE_TYPE)` - defines the messaging services your app uses:
  - `gms` for Google Mobile Services. This is the default option.
  - `hms` for Huawei Mobile Services. This can only be used on Huawei devices.
  

   <div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

   Secure sensitive keys (for example, `apiKey` and `requestValidationSalt`) with mechanisms like string obfuscation or encryption.

   </div></div></div>


### Initialization with custom API environment

You can change the base URL of the API for on-premise installations.  

Use the following initialization method:


<div class="content-tabs code-tabs" data-tab-group="tabgrp-605">
<div class="tab-buttons"><button class="tab-button" data-tab-id="tabgrp-605-0" data-tab-group="tabgrp-605" data-tab-active="true">Dart</button></div>

<div class="tab-panel" data-tab-id="tabgrp-605-0" data-tab-group="tabgrp-605" data-tab-active="true">

```Dart
Synerise.initializer()
  .withApiKey('YOUR_PROFILE_API_KEY')
  .withBaseUrl("YOUR_API_BASE_URL")
  .init();
```

</div>
</div>



## Running example app

-  Open project folder in selected IDE
- `flutter pub get` in the terminal (dependencies pull)
- select the device/emulator in your IDE (for ios part it is required to run `pod update` in example/ios directory)
- `cd example` and  `flutter run`

## Debug mode
---

You can enable debug logs for Synerise SDK by using the `.withDebugModeEnabled(true)` method in `Synerise.initializer` when you initialize the SDK.


<div class="admonition admonition-warning"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg></div><div class="admonition-body"><div class="admonition-content">

Do not use debug mode in a release version of your application.

</div></div></div>


You can receive logs about:
- **Core**: push notifications
- **Tracker**: declarative events, sending process
- **Client**: customer state, authorization
- **Injector**: campaigns
- **Content**: content widget, documents, recommendations

## Main Synerise listeners
---

### Injector Listeners

You can specify your custom action when a customer clicks on simple push, banner or walkthrough. Synerise SDK implements two main actions that a customer may invoke - open URL and Deeplink:

- listener.onOpenUrl = (url) - This method is called when Synerise handles URL action from campaign activities.
- listener.onDeepLink = (deepLink) - This method is called when Synerise handles deeplink action from campaign activities.
Note: For more information about handling actions from the Synerise SDK, see the Campaigns section.


<div class="content-tabs code-tabs" data-tab-group="tabgrp-606">
<div class="tab-buttons"><button class="tab-button" data-tab-id="tabgrp-606-0" data-tab-group="tabgrp-606" data-tab-active="true">Dart</button></div>

<div class="tab-panel" data-tab-id="tabgrp-606-0" data-tab-group="tabgrp-606" data-tab-active="true">

```Dart
Synerise.injector.listener((listener) {
  listener.onOpenUrl = (url) {
    ...
  };
  listener.onDeepLink = (deepLink) {
    ...
  };
});

### Notifications Listeners

When you want to deal with Push Notifications:

- listener.onRegistrationRequired - This method is called when Synerise needs registration for Push Notifications.

Synerise.notifications.listener((listener) {
  listener.onRegistrationRequired = () {
    FirebaseMessaging.instance.getToken().then((value) {
      if (value != null) {
        Synerise.notifications.registerForNotifications(value, true);
      }
    });
  };
});
```

</div>
</div>
