# Flutter SDK Setup

## 1. Requirements

{% hint style="info" %}

#### Can be used with other push solutions!

To use FlareLane with other push solutions, you must follow some additional steps. Refer to [ios-disable-swizzling](https://guide.flarelane.com/guide-for-developers/mobile-sdk-setup/additional-setup/ios-disable-swizzling "mention") for details.
{% endhint %}

* [Sign up](https://console.flarelane.com) to FlareLane and create a project

***

## 2. Credentials Setup

Follow this guide below:

* [android-fcm-setup-v1](https://guide.flarelane.com/guide-for-developers/mobile-sdk-setup/additional-setup/android-fcm-setup-v1 "mention")
* [ios-apns-setup](https://guide.flarelane.com/guide-for-developers/mobile-sdk-setup/additional-setup/ios-apns-setup "mention")

***

## 3. Install SDK

```
$ flutter pub add flarelane_flutter:1.8.1
```

***

## 4. Android Setup

To ensure a smooth process for obtaining permission for push notifications from users, please set compileSdkVersion to at least 33

{% tabs %}
{% tab title="android/app/build.gradle" %}

<pre><code>// ...
android {
<strong>    compileSdkVersion 33
</strong>    // ...
}
// ...
</code></pre>

{% endtab %}
{% endtabs %}

***

## 5. iOS Setup

Go to `Signing & Capabilities` and click `+ Capability` and add `Push Notifications`

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FDWiEV7Fj87EJjqSqVDxp%2Fimage.png?alt=media&#x26;token=a682fb5b-5055-4aa9-b84b-c082c85235f0" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To support iOS Rich Notifications, you need to add `Notification Service Extension`
{% endhint %}

In Xcode, select `Notification Service Extension` from File > New > Target

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FcLAf1mjkQCHQjLs1c8UE%2Fimage.png?alt=media&#x26;token=c8e6d3d0-78a7-412a-aa08-f4858ecb0c39" alt=""><figcaption></figcaption></figure>

Enter the Product Name. In this guide, we will define it as `FlareLaneNotificationServiceExtension`.

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FwhwUElrkgModOrdSlGMQ%2Fimage.png?alt=media&#x26;token=2053c324-a57f-4274-9b3e-e4391b456cc4" alt=""><figcaption></figcaption></figure>

Set `Minimum Deployments` of the Notification Service Extension Target you just created to be the same as the main app target you are currently using.

<figure><img src="https://4151189289-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSJ35x4PFzaneH3SrvcBt%2Fuploads%2FyrEmrmsXqdEq3PPCKPXs%2FScreenshot%202024-01-30%20at%2010.54.16%E2%80%AFAM.png?alt=media&#x26;token=47712790-1b59-4229-b2b0-4d7f391a772a" alt=""><figcaption></figcaption></figure>

Add the following code to your `Podfile`

{% tabs %}
{% tab title="Podfile" %}

<pre><code>// Enable the Dynamic Framework
<strong>use_frameworks!
</strong>
// Add the name of the extension created previously.
// In this guide, FlareLaneNotificationServiceExtension.
<strong>target 'FlareLaneNotificationServiceExtension' do
</strong><strong>  pod 'FlareLane', '1.7.3'
</strong><strong>end
</strong></code></pre>

{% endtab %}
{% endtabs %}

Run `pod install` in the terminal

Run Xcode again and edit the extension's file. Delete the pre-filled codes and only inherit `FlareLaneNotificationServiceExtension`.

{% tabs %}
{% tab title="Swift(NorificationService.swift)" %}

```swift

import FlareLane

class NotificationService: FlareLaneNotificationServiceExtension {
}
```

{% endtab %}

{% tab title="Objective-C(NotificationService.h/.m)" %}

```objectivec

// NotificationService.h
@import FlareLane;

@interface NotificationService : FLNNotificationServiceExtension
@end

// NotificationService.m
#import "NotificationService.h"

@implementation NotificationService
@end
```

{% endtab %}
{% endtabs %}

***

## 6. Initialization

Add the following code to `main.dart`. You can check your project ID at FlareLane console's **Project**.

{% tabs %}
{% tab title="main.dart" %}

<pre class="language-dart"><code class="lang-dart">import 'package:flarelane_flutter/flarelane_flutter.dart';

void main() {
<strong>  WidgetsFlutterBinding.ensureInitialized();
</strong>  // Add the code below after WidgetsFlutterBinding.ensureInitialized()
  // To subscribe later, set the 2nd parameter to false and then run the .subscribe() later.
<strong>  FlareLane.shared.initialize("INPUT_YOUR_PROJECT_ID", requestPermissionOnLaunch: true);
</strong>  runApp(...);
}
</code></pre>

{% endtab %}
{% endtabs %}

***

## 7. Test

After completing all the steps, build and run your app. Devices that subscribe to push notifications will be automatically added to FlareLane console's **All Devices**.

Before actual deployment, be sure to verify that the push notifications are being received properly on the device and that the statistics are accurately recorded when the push notifications are clicked.

***

## 8. Identify your user

FlareLane's device is 'anonymous' and you can match the device with your user based on the unique user ID that identifies your user.

{% hint style="info" %}
Setting up [User ID](https://guide.flarelane.com/data-integration/user-id) has many benefits. You can distinguish whether a user has signed-up, and push notifications can be sent based on the User ID.
{% endhint %}

Usually, when a user sign-up or log-in, you should execute `setUserId`.

{% tabs %}
{% tab title="Dart(Flutter)" %}

```dart
FlareLane.shared.setUserId("USER_ID");
```

{% endtab %}
{% endtabs %}

***

## 9. Additional Setup

### Android

To set a accent color or channel name, add the following lines:

{% tabs %}
{% tab title="values/strings.xml" %}

<pre class="language-xml"><code class="lang-xml">&#x3C;resources>
    &#x3C;!-- accent color  -->
<strong>    &#x3C;string name="flarelane_notification_accent_color">#BC0000&#x3C;/string>
</strong>    &#x3C;!-- channel name -->
<strong>    &#x3C;string name="flarelane_default_channel_name">All Notifications&#x3C;/string>
</strong>&#x3C;/resources>
</code></pre>

{% endtab %}
{% endtabs %}

To customize notification icons, see below:

* [android-notification-icons](https://guide.flarelane.com/guide-for-developers/mobile-sdk-setup/additional-setup/android-notification-icons "mention")

To use [Journeys](https://guide.flarelane.com/guide-for-developers/mobile-sdk-setup/broken-reference) or [Message Personalization](https://guide.flarelane.com/guide-for-developers/mobile-sdk-setup/broken-reference), integrate custom data via SDK or API:

* [data-integration](https://guide.flarelane.com/data-integration "mention")

***

## Resources

[mobile-sdk-reference](https://guide.flarelane.com/guide-for-developers/mobile-sdk-reference "mention")