# Flutter - Kotlin 子母畫面(PIP)

| 原始畫面 | 子母畫面 |
| -------- | -------- |
| | |

## 設定檔調整
AndroidManifest.xml

android:supportsPictureInPicture="true"

## 呼叫Kotlin程式碼

Future<void> _showNativeView() async {
    String isNativeView;
    try {
      await platform.invokeMethod('showNativeView');
    } on PlatformException catch (e) {
      isNativeView = "Failed to showNativeView: '${e.message}'.";
    }
}

## Kotlin 開啟子母畫面

private fun showNativeView() {
    //子母畫面比例
    val aspectRatio = Rational(16, 9)
    val params = PictureInPictureParams.Builder().setAspectRatio(aspectRatio).build()
    enterPictureInPictureMode(params)
}

## 坑
### java.lang.IllegalStateException: setPictureInPictureParams: Current activity does not support picture-in-picture.
#### 解法
AndroidManifest.xml

android:supportsPictureInPicture="true"

https://stackoverflow.com/questions/62402064/java-lang-illegalstateexception-enterpictureinpicturemode-current-activity-doe

### Unresolved reference: Parcel
#### 解法沒有快速修復可以點選
調整`build.gradle`，後重開VSCode
然後就會出現了

### The overflowing RenderFlex has an orientation of Axis.vertical.

#### 發生原因
縮小後超過範圍
#### 解法
使畫面可以滾動

SingleChildScrollView(
    child: Column(
      ...
    ),
),

## 參考資料
https://github.com/android/media-samples/tree/main/PictureInPictureKotlin/#readme

https://developer.android.com/guide/topics/ui/picture-in-picture?hl=zh-tw

https://www.tpisoftware.com/tpu/articleDetails/2208

###### tags: `flutter` `kotlin`