picture_in_picture_flutter

Description:

picture in picture flutter

picture_in_picture_flutter #
A Flutter plugin for Android and ios for make video in picture in picture mode.


Picture in Picture Mode Flutter #





Picture in Picture Mode
Disable Picture in Picture Mode










A flutter package pip flutter which will help to put your video in pip mode.
Features 💚 #

Put your video in Picture in Picture mode.
Also mute sound and play and pause the video.
Make video in full screen mode,set play back speed of video

Installation #
First, add picture_in_picture_flutter as a dependency in your pubspec.yaml file.
Android #
Add below permission in your AndroidManifest.xml file ,also specified picture in picture mode in your activity tag and add foreground service for when
app is not in background that time app not kill and running in foregorund and also add update code of MainActivity.kt and add PipFlutterPlayerService.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

<activity
android:name=".MainActivity"
android:supportsPictureInPicture="true"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"
android:exported="true"/>

<service
android:name=".PipFlutterPlayerService"
android:stopWithTask="false" />
copied to clipboard
IOS #
In Xcode of your project set ios deployment info 11.0 and set in below code in your Info.plist file.
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
<key>NSBonjourServices</key>
<array>
<string>_dartobservatory._tcp</string>
</array>
<key>UIBackgroundModes</key>
<array>
<string>audio</string>
<string>processing</string>
<string>remote-notification</string>
</array>
copied to clipboard
How to use #

PipFlutterPlayerConfiguration : Put this class for your video configuration.

PipFlutterPlayerConfiguration pipFlutterPlayerConfiguration =
const PipFlutterPlayerConfiguration(
aspectRatio: 16 / 9,
fit: BoxFit.contain,
);
copied to clipboard

PipFlutterPlayerDataSource : Put this class for declare your video type url
and url.

PipFlutterPlayerDataSource dataSource = PipFlutterPlayerDataSource(
PipFlutterPlayerDataSourceType.network,
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
);
copied to clipboard

PipFlutterPlayer :

PipFlutterPlayer(
controller: pipFlutterPlayerController,
key: pipFlutterPlayerKey,
),
copied to clipboard

Make your video in Pip mode put this code on your onTap.

pipFlutterPlayerController.enablePictureInPicture(pipFlutterPlayerKey);
copied to clipboard

And make your video in disable mode put this code on your onTap.

pipFlutterPlayerController.disablePictureInPicture();
copied to clipboard
Run the example app in the exmaple folder to find out more about how to use it.