> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/flutter-sdk/integration-guide-v2/getting-started.md).

# Getting Started (Flutter)

Latest version [release notes](https://github.com/loopsocial/fw_flutter_sdk/blob/main/CHANGELOG.md)

## Prerequisites

* Firework App Id
* Flutter SDK >=3.0.0
* Dart SDK >=2.17.0
* iOS project
  * iOS 13 or greater.
  * Xcode 14 or greater.
  * Swift 5.7 or greater.
* Android Project
  * JAVA\_HOME 1.8 or greater
  * minSdkVersion 21 or greater
  * compileSdkVersion 31 or greater
  * targetSdkVersion 31 or greater
  * kotlinVersion 1.8.0 or greater

## Installation

Installing Firework Flutter SDK requires the following step:

1. Install Flutter plugin package
2. Setup Native project

### Install Flutter plugin Package

```shell
flutter pub add fw_flutter_sdk
```

### Setup Native Project

#### iOS

Run `pod install` in the root directory of the iOS project. If you encounter the error `CocoaPods could not find compatible versions for pod "FireworkVideo"`, run `pod repo update && pod update FireworkVideo` instead.

#### Android

* build.gradle

```gradle
buildscript {
  repositories {
    ...
    // This should be added
    mavenCentral()
  }
  dependencies {
    // We suggest the Gradle plugin version greater or equal to 7.4.2.
    classpath("com.android.tools.build:gradle:7.4.2")
    ...
  }
}

allprojects {
  repositories {
    ...
    mavenCentral()
  }
}
```

* gradle-wrapper.properties

```properties
...
# We suggest the Gradle version greater or equal to 7.5.
distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-all.zip
...
```

* app/src/.../MainActivity.kt

The MainActivity should extend FlutterFragmentActivity.

```kotlin
class MainActivity: FlutterFragmentActivity()
```

* app/build.gradle

```gradle
...
apply from: 'firework.gradle'
```

* add `android:windowSoftInputMode="adjustPan"` to the file `app/src/Androidmanifest.xml` if there is a story block in your app and use the live stream

```xml
    <application
        android:name=".MainApplication"
        ...>
        <activity
            android:name=".MainActivity"
            ...
            android:windowSoftInputMode="adjustPan">
        </activity>
    </application>
```

* New file: app/firework.gradle

```gradle
android {
  packagingOptions {
    exclude 'META-INF/*.kotlin_module'
  }
}

dependencies {
  implementation 'androidx.appcompat:appcompat:1.6.1'
  implementation "com.firework:sdk:+"
  // Uncomment the next line if you want to integrate the single-host live stream
  // implementation "com.firework.external.livestream:singleHostPlayer:+"
}

configurations.all {
  resolutionStrategy.eachDependency { details ->
    if (details.requested.group == 'com.firework' && details.requested.name == 'sdk') {
      details.useVersion rootProject.ext.get("fwNativeVersion")
    }
    if (details.requested.group == 'com.firework.external.livestream' && details.requested.name == 'singleHostPlayer') {
      details.useVersion rootProject.ext.get("fwNativeVersion")
    }
  }
}
```

## App Id Configuration

### iOS

Include the app ID in your app `Info.plist` file using the key `FireworkVideoAppID` .

See the image below:

![](/files/9fNgamigiDr4I2yrqd23)

### Android

Include the `appid` in your app `AndroidManifest.xml` file, like below:

```xml
  <application
    ...
  >
    <activity .../>
    ...

    // Include the app ID
    <meta-data
      android:name="Firework:Appid"
      android:value="your firework appid" />
  </application>
```

## SDK Initialization

### iOS

Import `fw_flutter_sdk` and call `FWFlutterSDK.initializeSDK()` in `application(:, didFinishLaunchingWithOptions:) -> Bool`

```swift
// Import Firework Flutter SDK
import fw_flutter_sdk

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
      _ application: UIApplication,
      didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        // Call SDK initialization method
        FWFlutterSDK.initializeSDK(nil)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}
```

#### iOS initialization options

We support passing an option to the SDK initialization method. The sample codes are:

```swift
FWFlutterSDK.initializeSDK(
    SDKInitOptions(
        videoLaunchBehavior: .muteOnFirstLaunch // or .default
    )
)
```

The SDK init option structure is:

```swift
public struct SDKInitOptions: Codable {
    public var userId: String?
    public var videoLaunchBehavior: FWFVideoLaunchBehavior?
    public init(userId: String? = nil, videoLaunchBehavior: FWFVideoLaunchBehavior? = nil) {
        self.userId = userId
        self.videoLaunchBehavior = videoLaunchBehavior
    }
}
```

### Android

Step 1: Add the `FWFlutterSDK.init(this)` method to your FlutterApplication class.

```kotlin
class MainApplication: FlutterApplication() {

  override fun onCreate() {
    super.onCreate()
    // ...
    FWFlutterSDK.init(this)
    // ...
  }
}
```

```kotlin
// If you have the modules below, you need to add the modules before the SDK init method
// FWFlutterSDK.addLivestreamPlayerInitializer(SingleHostLivestreamPlayerInitializer())
// FWFlutterSDK.setImageLoader(GlideImageLoaderFactory.createInstance(this))
// FWFlutterSDK.setImageLoader(PicassoImageLoaderFactory.createInstance(this))
FWFlutterSDK.init(this)
```

#### Android initialization options

We support passing an option to the SDK initialization method. The sample codes are:

```kotlin
FWFlutterSDK.init(
  this,
  FWSDKInitOptionsModel(
    // or FWPlayerLaunchBehavior.Default
    videoLaunchBehavior = FWPlayerLaunchBehavior.MuteOnFirstLaunch
  )
)
```

The SDK init option structure is:

```kotlin
data class FWSDKInitOptionsModel(
  val userId: String? = null,
  val videoLaunchBehavior: FWPlayerLaunchBehavior? = null,
)
```

Step 2: Please check the [<mark style="color:orange;">**Inject Image Loader**</mark>](/firework-for-developers/flutter-sdk/integration-guide-v2/inject-android-image-loader.md) section. Choose an image loader([<mark style="color:orange;">**Glide**</mark>](/firework-for-developers/flutter-sdk/integration-guide-v2/inject-android-image-loader.md#inject-the-glide) or [<mark style="color:orange;">**Picasso**</mark>](/firework-for-developers/flutter-sdk/integration-guide-v2/inject-android-image-loader.md#inject-the-picasso)) that works for you. If you're not sure which one to use, Glide image loader is recommended.

### Dart

Call `FireworkSDK.getInstance().markInitCalled()` on the Dart side.

```dart
import 'package:fw_flutter_sdk/fw_flutter_sdk.dart';

/// Optional: set listener for SDK init
FireworkSDK.getInstance().onSDKInit = (event) {

};

/// Although we call the initialization method on the native side,
/// we also need to mark the initialization method as being called
/// on the Dart side.
FireworkSDK.getInstance().markInitCalled();
```

## Read SDK State

After the SDK is initialized, the host app can read the following SDK state from Dart. Both iOS and Android are supported.

| Getter                                 | Type      | Description                                                                                                   |
| -------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------- |
| `FireworkSDK.getInstance().appId`      | `String?` | The current app id (client id). Returns `null` when there is no value.                                        |
| `FireworkSDK.getInstance().guestId`    | `String?` | The current guest id (visitor id). Returns `null` when there is no value, e.g. before the SDK is initialized. |
| `FireworkSDK.getInstance().isPipShown` | `bool`    | Whether the SDK is currently showing the picture-in-picture player. Defaults to `false`.                      |

```dart
import 'package:fw_flutter_sdk/fw_flutter_sdk.dart';

final appId = FireworkSDK.getInstance().appId;
final guestId = FireworkSDK.getInstance().guestId;
final isPipShown = FireworkSDK.getInstance().isPipShown;
```

{% hint style="info" %}
The values are pushed from the native SDK to Dart, so read them after the SDK initialization succeeds (for example inside the `onSDKInit` callback). `appId` and `guestId` stay stable after initialization, while `isPipShown` changes as the picture-in-picture player is shown or dismissed.
{% endhint %}

## Next

### ATT compliance

Please refer to [ATT compliance Flutter (iOS)](/firework-for-developers/flutter-sdk/integration-guide-v2/att-compliance-flutter-ios.md).

### Video Feed

If you want to integrate the video feed, please follow the instruction [here](/firework-for-developers/flutter-sdk/integration-guide-v2/video-feed.md).

### Story Block

If you want to integrate the story block, please follow the instruction [here](/firework-for-developers/flutter-sdk/integration-guide-v2/story-block.md).

### Customization

If you want to customize SDK, please refer to [Customization](/firework-for-developers/flutter-sdk/integration-guide-v2/customization.md).

### Live stream support

If you want to integrate the live stream, please follow the instruction [here](/firework-for-developers/flutter-sdk/integration-guide-v2/live-stream-support.md).

### Shopping

If you want to integrate video shopping, please follow the instruction [here](/firework-for-developers/flutter-sdk/integration-guide-v2/shopping.md).

### Analytics

If you want to integrate video shopping, please follow the instruction [here](/firework-for-developers/flutter-sdk/integration-guide-v2/analytics.md).

### Sample Project

We provide a [sample project](https://github.com/loopsocial/fw_flutter_sdk) on Github.