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 display a popup in the corner which plays a video,

PIP is a new feature which only works on new version of Android and iOS.

Table of Contents

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 YouTube interface.

After install easy_pip in pubspec.yaml, you can start using 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;
    });
  },
)

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close