2 Best Picture-In-Picture Libraries for Flutter

Picture-In-Picture (PIP) is a special type of multi-window mode mostly used for video playback. This mode displays a popup in the corner which plays a video,

PIP is a new feature that only works on the new Android and iOS.

flutter_android_pip

This plugin is a simple Picture-in-picture mode for Flutter on Android with SDK > 24.

RaisedButton(
  child: Text("Enter PIP"),
  onPressed: () {
    FlutterAndroidPip.enterPictureInPictureMode;
  },
)

easy_pip

This widget is used for creating a Picture-In-Picture interface in Flutter like a YouTube interface.

After installing easy_pip in tge pubspec.yaml file, you can start using the PIPStack widget to enable PIP. This widget has three elements:

1. Background Widget (Displays behind the pip widget)
2. PIP Widget (The widget which shrinks to go into PIP mode)
3. PIP Expanded Content (The content below the PIP widget when the widget is expanded)

var isEnabled = true; //add this variable to determine state

PIPStack(
  backgroundWidget: Center(
    child: RaisedButton(
      onPressed: () {
        setState(() {
          isEnabled = !isEnabled;
        });
      },
      child: Text("Click here to enable PIP"),
    ),
  ),
  pipWidget: isEnabled
      ? Container(
    color: Colors.pink,
  )
      : Container(),
  pipEnabled: isEnabled,
  pipExpandedContent: Card(
    color: Colors.white,
    child: Column(
      children: <Widget>[Text("Hello World"), Row()],
    ),
  ),
  onClosed: () {
    setState(() {
      isEnabled = !isEnabled;
    });
  },
)