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.

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 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;
    });
  },
)

Leave a Comment

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


Scroll to Top

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