flutter_in_app_pip 1.7.4 copy "flutter_in_app_pip: ^1.7.4" to clipboard
flutter_in_app_pip: ^1.7.4 copied to clipboard

A Flutter Package to easily implement in-app pip in a flutter application.

In App PiP for Flutter #

A Flutter Package to help easily implement in-app PiP(Picture in Picture) in a flutter application. Written completely in dart.

Features #

  • Easily Implement PiP(Picture in Picture) in app.

  • Navigatable PiP Widget which allows navigation inside the PiP Window.

  • Automatically Handle showing different widgets in the original view when in pip and when not in pip.

  • Provides the ability to update the size of the pip widget later after starting pip.

  • Provides the ability to set the borders to which pip can be dragged.

  • Provides the ability to make the window resizable(pinch-in/out).

  • Provides the ability to make the window non-movable.

  • Provides the ability to set the initial corner of the PIP window.

  • Provides the ability to set minimum and maximum size of the PIP window, if resizable.

Getting started #

  • Import the package.

  • Replace your MaterialApp with PiPMaterialApp (If using MaterialApp.router, you can replace it with PiPMaterialApp.router).

  • Optionally provide the pip parameters. These correspond to various parameters such as height and width of your pip widget.

Usage #

After replacing your MaterialApp with PiPMaterialApp, use

 PictureInPicture.startPiP(pipWidget: MyPiPWidget());

to start PiP view in your app.

When you wish to stop PiP, use

PictureInPicture.stopPiP();

Use PiPWidget for additional functionalities like handling events on close of pip e.g.

PictureInPicture.startPiP(
    pipWidget:PiPWidget(
      child: ChildWidget(),
      onPiPClose: (){
      //Handle closing events e.g. dispose controllers.
      
      },
      elevation: 10,        //Optional
      pipBorderRadius: 10,  //Optional
      )
);

Use NavigatablePiPWidget for Navigation inside the PiP Window e.g.

PictureInPicture.startPiP(
    pipWidget:NavigatablePiPWidget(
      child: ChildWidget(),
      onPiPClose: (){
      //Handle closing events e.g. dispose controllers.
      
      },
      elevation: 10,        //Optional
      pipBorderRadius: 10,  //Optional
      )
);

Additionally, you can also use PiPCapableWidget to handle the view changes in case of PiP start and stop e.g.

PiPCapableWidget(
    whileNotInPip: ChildToShowWhileNotInPiP(),
    whileInPip: ChildToShowWhileInPiP(),      //Optional
);

Update the parameters of the pip view like below:

PictureInPicture.updatePiPParams(
                    pipParams: PiPParams(
                        pipWindowHeight: 144,
                        pipWindowWidth: 256,
                        bottomSpace: 64,
                        leftSpace: 64,
                        rightSpace: 64,
                        topSpace: 64,
                        maxSize: Size(256, 144),
                        minSize: Size(144, 108),
                        movable: true,
                        resizable: false,
                        initialCorner: PIPViewCorner.bottomRight,
                        ),
                  );

Note #

That's it. Enjoy! Also, this package is 100% compatible with my other flutter plugin android_pip

41
likes
150
points
2.02k
downloads

Publisher

unverified uploader

Weekly Downloads

A Flutter Package to easily implement in-app pip in a flutter application.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-2-Clause (license)

Dependencies

flutter

More

Packages that depend on flutter_in_app_pip