In order to make use of the Picture in Picture functionality provided by the player, it is first necessary to configure your native application to properly support PiP.

The steps required for each platform are described below.

Android

Declare Picture in Picture support in AndroidManifest.xml

Open android/app/src/main/AndroidManifest.xml and set android:supportsPictureInPicture to true in your main activity's manifest. Also, specify that your activity handles layout configuration changes so that your activity doesn't relaunch when layout changes occur during PiP mode transitions:

<activity android:name=".MainActivity"
    android:supportsPictureInPicture="true"
    android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"
</activity>

iOS

Set background modes capability

Make sure to add the UIBackgroundModes key to the Info.plist of the iOS app project to enable this capability. Alternatively, you can enable the Audio, AirPlay, and Picture and Picture option under the Signing & Capabilities tab in Xcode which also adds the required key to the Info.plist file as described here.

<key>UIBackgroundModes</key>
<array>
  <string>audio</string>
</array>

Configure audio session on app startup

Configure your app's AudioSession during your component's initialization:

import 'package:audio_session/audio_session.dart';

@override
void initState() {
  setupAudioSession();
  super.initState();
}

Future<void> setupAudioSession() async {
  final session = await AudioSession.instance;
  await session.configure(const AudioSessionConfiguration.music());
}

This step is required in order to properly enable background playback on iOS. Without it, the Picture in Picture option appears on the player UI, but has no effect when used.

You can read more about it in Apple's documentation.

Showing the Picture in Picture UI option

Now that your application is properly configured to support PiP, the PlayerView instance in your Dart code can be configured to show the Picture in Picture option in the Player UI.

Simply create aPictureInPictureConfig as shown below and pass it to the PlayerView instance via a PlayerViewConfig.

final _playerViewConfig = const PlayerViewConfig(
  pictureInPictureConfig: PictureInPictureConfig(
    isEnabled: true,
  ),
);

final playerView = PlayerView(
  player: _player,
  key: _playerViewKey,
  playerViewConfig: _playerViewConfig,
);

Supported Picture in Picture events

The supported Picture in Picture events on PlayerView are:

• onPictureInPictureEnter
• onPictureInPictureExit

iOS only:

• onPictureInPictureEntered
• onPictureInPictureExited

Refer to API reference for more details.

An example of PiP implementation can be found here: https://github.com/bitmovin/bitmovin-player-flutter/blob/main/example/lib/pages/picture_in_picture.dart