# FAQ & Troubleshooting (Flutter)

## Android

### Picture in Picture(PIP) cannot be closed normally when killing the application in Android 11

```kotlin
class MainActivity: ... {

  // ...

  override fun onDestroy() {
    super.onDestroy()
    ...
    
    // Please add this line to your MainActivity
    // We call FireworkSdk.closePip inside FWFlutterSDK.closePip
    FWFlutterSDK.closePip()
  }
}
```

### Out of JVM Memory

Gradle build daemon has been stopped: JVM garbage collector thrashing and after running out of JVM memory. Add the following configuration to the file: `gradle.properties`.

```
...
org.gradle.jvmargs=-Xmx4g
```

### Gradle plugin version is larger than 4.1.x

If your Gradle plugin version is larger than `com.android.tools.build:gradle:4.1.x`. Please set the `compileSdkVersion = 31` and `targetSdkVersion = 31` . And add the following configuration to the file: `src/main/AndroidManifest.xml` .

```
<manifest>
  ...
  <application>
    ...
    <activity
      android:name=".MainActivity"
      ...
      android:exported="true" // sdk version 31
    >
      ...
    </activity>
  </application>
</manifest>
```

### Use JDK11 and Gradle 7.x.

If you want to use JDK11 and Gradle 7.x. Please do:

1. JAVA\_HOME = JDK11 (system env)
2. classpath("com.android.tools.build:gradle:7.x.x") (build.gradle)
3. distributionUrl=<https://services.gradle.org/distributions/gradle-7.x-all.zip> (gradle-wrapper.properties)
4. And change the following configuration in the file: `app/firework.gradle` .

```
android {
  ...
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_11
    targetCompatibility JavaVersion.VERSION_11
  }
  ...
}
```

### minCompileSdk = 31

* If you met the issue like below:

```
> The minCompileSdk (31) specified in a
        dependency's AAR metadata (META-INF/com/android/build/gradle/aar-metadata.properties)
        is greater than this module's compileSdkVersion (android-30).
        Dependency: androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.0.
```

Please do:

```
configurations.all {
  resolutionStrategy {
    ...
    force 'androidx.work:work-runtime-ktx:2.2.0'
    force 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0'
  }
}
```

Maybe your `compileSdkVersion = 30` and `targetSdkVersion = 30` , your Gradle is below 6.9-all and the Gradle plugin is `com.android.tools.build:gradle:4.1.x` .

### Okhttp version issue

If you met the issue like below:

```
/data/app/com.thesouledstore-1b4KZ7kSaE_DlLmco_iLxQ==/base.apk!classes5.dex)
2022-02-25 21:06:33.506 16304-18932/? E/com.newrelic.android: TransactionStateUtil: Attempting to convert network exception java.io.IOException to error code.
2022-02-25 21:06:33.508 16304-18932/? E/AndroidRuntime: FATAL EXCEPTION: OkHttp Dispatcher
    Process: com.thesouledstore, PID: 16304
    java.lang.NoSuchMethodError: No static method delimiterOffset(Ljava/lang/String;IILjava/lang/String;)I in class Lokhttp3/internal/Util; or its super classes (declaration of 'okhttp3.internal.Util' appears in /data/app/com.thesouledstore-1b4KZ7kSaE_DlLmco_iLxQ==/base.apk!classes5.dex)
```

Maybe your okhttp version is 3.x.x . Please do:

Solution: force the version to your `app/firework.gradle` file, like below:

```
configurations.all {
  resolutionStrategy {
    ...
    force 'com.squareup.okhttp3:okhttp:3.12.12'
    force 'com.squareup.okhttp3:logging-interceptor:3.12.12'
    force 'com.squareup.okhttp3:okhttp-urlconnection:3.12.12'
  }
}
```

### Glide version issue

Glide issue: if you met the issue like below:

```
GeneratedAppGlideModuleImpl is implemented incorrectly. 
If you've mannually implemented this class, remove your implementation. 
The Annotation processor will generate a correct implementation.
(FastImageViewManager.java:xxx)
```

Maybe your `react-native-fast-image` version is >7.x.x and <8.1.4 . Please do:

Solution 1: add the `excludeAppGlideModule = true` to your android/build.gradle file, like below:

```
buildscript {
    ...
    ext {
        excludeAppGlideModule = true
        ...
    }
    ...
}
```

Solution 2(recommended): upgrade the `react-native-fast-image` version to >= 8.1.4

### Natively started activity is closed when launching RN app from desktop icon on Android

1. Remove the `android:launchMode="singleTask"` from AndroidManifest.xml
2. Build a release APK or build a debug APK with bundleInDebug=true

```
project.ext.react = [
  bundleInDebug: true,  // just for exporting an apk, if you want link codes to metro(npm start), please change it to false
  // enableHermes: false,  // clean and rebuild if changing
  entryFile: "index.tsx",
]
```

### There is an extra white blank space when the keyboard popup in StoryBlock

<figure><img src="/files/QW5PUhSRRpy0zmjlakYS" alt="" width="188"><figcaption></figcaption></figure>

Change `resizeToAvoidBottomInset` value(please refer to the following code snippet) in `Scaffold` widget that contains `StoryBlock` widget.

```dart
Scaffold(
  ...
  // Set false on Android and using default value on iOS
  resizeToAvoidBottomInset: defaultTargetPlatform == TargetPlatform.android ? false : null,
  ...
)
```

## popNativeContainer vs startFloatingPlayer

1. `popNativeContainer` is used to close the current full-screen player. We only support using this API when PiP is disabled(`enablePictureInPicture` is `false`).
2. `startFloatingPlayer` is used to make the current full-screen player into the floating player. We only support using this API when PiP is enabled(`enablePictureInPicture` is `true`).

### Don't use popNativeContainer when PiP is enabled(enablePictureInPicture is true)

If you use `popNativeContainer` when PiP is enabled(`enablePictureInPicture` is `true`), it will cause inconsistent behavior between iOS and Android. This inconsistent behavior is:

1. No effect on iOS
2. The full-screen player is closed on Android

### Don't use startFloatingPlayer when PiP is disabled(enablePictureInPicture is false)

If you use `startFloatingPlayer` when PiP is disabled(`enablePictureInPicture` is `false`), it will have no effect on iOS and Android.

### How to enable PiP?

The PiP is disabled by default. You can refer to the following links to learn how to enable PiP.

1. <https://docs.firework.com/home/flutter-sdk/integration-guide-v2/video-feed#enable-pip-picture-in-picture>
2. <https://docs.firework.com/home/flutter-sdk/integration-guide-v2/story-block#enable-pip-picture-in-picture>
3. <https://docs.firework.com/home/flutter-sdk/integration-guide-v2/share#enable-pip-picture-in-picture-when-opening-the-video-player>

### When overlaying on the story block, the widget is positioned incorrectly on Android

For example, you embed the story block and custom widgets on the `Stack` widget. The custom widgets may be positioned incorrectly. This is caused by the Flutter rendering system. But we found a solution to fix it. You could add the following section after `StoryBlock` widget in the `Stack` widget children.

```dart
if (defaultTargetPlatform == TargetPlatform.android)
  IgnorePointer(
    child: OverflowBox(
      minWidth: MediaQuery.of(context).size.width,
      maxWidth: MediaQuery.of(context).size.width,
      child: Container(
        color: const Color(0x01000000),
      ),
    ),
  ),
```

The complete codes are as follows:

{% code lineNumbers="true" %}

```dart
Stack(
  alignment: AlignmentDirectional.center,
  children: [
    StoryBlock(
      height: 400,
      source: StoryBlockSource.singleContent,
      contentId: "your encoded video or live stream id",
    ),
    // Add the following widget after StoryBlock widget
    // in the Stack widget children.
    if (defaultTargetPlatform == TargetPlatform.android)
      IgnorePointer(
        child: OverflowBox(
          minWidth: MediaQuery.of(context).size.width,
          maxWidth: MediaQuery.of(context).size.width,
          child: Container(
            color: const Color(0x01000000),
          ),
        ),
      ),
    // Custom widgets
    PositionedDirectional(
      bottom: 24,
      end: 24,
      child: OutlinedButton(
        onPressed: () async {
          //await FireworkSDK.getInstance().navigator.popNativeContainer();
          // onDismissed?.call();
        },
        child: Text(
          "Button Text",
        ),
      ),
    )
  ],
);
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.firework.com/firework-for-developers/flutter-sdk/integration-guide-v2/faq-and-troubleshooting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.