# 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. And if you encountered the following issues, you could run `pod repo update && pod update FireworkVideo FireworkVideoUI` in the root directory of the iOS project.

1. CocoaPods could not find compatible versions for pod "FireworkVideo"
2. CocoaPods could not find compatible versions for pod "FireworkVideoUI"

#### 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:+"
  // Uncomment the next line if you want to integrate the multi-host live stream
  // implementation "com.firework.external.livestream:multiHostPlayer:+"
}

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")
    }
    if (details.requested.group == 'com.firework.external.livestream' && details.requested.name == 'multiHostPlayer') {
      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:

![](https://688917408-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MLoGG8m6bokS9YTmS7m%2Fuploads%2Fgit-blob-377b2681c5b123cc2867bf1296fa647cc521d8f0%2Fapp_setup_info_plist.png?alt=media)

### 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.addLivestreamPlayerInitializer(MultiHostLivestreamPlayerInitializer())
// 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>](https://docs.firework.com/firework-for-developers/flutter-sdk/integration-guide-v2/inject-android-image-loader) section. Choose an image loader([<mark style="color:orange;">**Glide**</mark>](https://docs.firework.com/firework-for-developers/flutter-sdk/inject-android-image-loader#inject-the-glide) or [<mark style="color:orange;">**Picasso**</mark>](https://docs.firework.com/firework-for-developers/flutter-sdk/inject-android-image-loader#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();
```

{% hint style="danger" %}
Please don't call `FireworkSDK.getInstance().init()` on the Dart side anymore.
{% endhint %}

## Next

### ATT compliance

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

### Video Feed

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

### Story Block

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

### Customization

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

### Live stream support

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

### Shopping

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

### Analytics

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

### Sample Project

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