A Flutter plugin for Android and ios for make video in picture in picture mode.
Picture in Picture Mode | Disable Picture in Picture Mode |
---|---|
![]() |
![]() |
A flutter package pip flutter which will help to put your video in pip mode.
First, add pip_flutter
as a dependency in your pubspec.yaml file.
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" />
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>
PipFlutterPlayerConfiguration : Put this class for your video configuration.
PipFlutterPlayerConfiguration pipFlutterPlayerConfiguration =
const PipFlutterPlayerConfiguration(
aspectRatio: 16 / 9,
fit: BoxFit.contain,
);
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',
);
PipFlutterPlayer :
PipFlutterPlayer(
controller: pipFlutterPlayerController,
key: pipFlutterPlayerKey,
),
Make your video in Pip mode put this code on your onTap.
pipFlutterPlayerController.enablePictureInPicture(pipFlutterPlayerKey);
And make your video in disable mode put this code on your onTap.
pipFlutterPlayerController.disablePictureInPicture();
Run the example app in the exmaple folder to find out more about how to use it.