Picture in Picture Mode Management for Flutter. Available Only For Android

floating 

Picture in Picture management for Flutter. Android only

App configuration 

Add android:supportsPictureInPicture="true" line to the <activity> tag in android/src/main/AndroidManifest.xml:

<manifest>
   <application>
        <activity
            android:name=".MainActivity"
            android:supportsPictureInPicture="true"
            ...

Widget 

This package provides a helper PiPSwitcher widget for switching the displayed widgets according to current PiP status. Use it like so:

PiPSwitcher(
    childWhenDisabled: Scaffold(...),
    childWhenEnabled: JustVideo(), 
)

API 

PiP mode in desired mode is available only in Android so iOS and web support is not planned until the platforms adds native support for such feature.

Create a Floating instance 

final floating = Floating();

When you're done with the PiP functionality, make sure you're disposing the instance:

floating.dispose();

Check if PiP is available 

final canUsePiP = await floating.isPipAvailable;

PiP may be unavailable because of system settings managed by admin or device manufacturer. Also, the device may have Android version that was released without this feature.

Check if app is in PiP mode 

final currentStatus = await floating.pipStatus;

Possible statuses:

Enable PiP mode 

final statusAfterEnabling = await floating.enable();

When enabled, PiP mode can be toggled off by the user via system UI.

.enable arguments

aspectRatio:

The default 16/9 aspect ratio can be overridden with custom Rational. Eg. to make PiP square use: .enable(aspectRatio: Rational(1, 1)) or .enable(aspectRatio: Rational.square()).

sourceRectHint:

By default, system will simply use fade animation to tween between full app and PiP. Switching animation can be smoother by using source rect hint (example animation).

Check the example project to see an example of usage.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add floating

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  floating: ^2.0.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:floating/floating.dart';

example/lib/main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:floating/floating.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  final floating = Floating();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    floating.dispose();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState lifecycleState) {
    if (lifecycleState == AppLifecycleState.inactive) {
      floating.enable(aspectRatio: Rational.square());
    }
  }

  Future<void> enablePip(BuildContext context) async {
    final rational = Rational.landscape();
    final screenSize =
        MediaQuery.of(context).size * MediaQuery.of(context).devicePixelRatio;
    final height = screenSize.width ~/ rational.aspectRatio;

    final status = await floating.enable(
      aspectRatio: rational,
      sourceRectHint: Rectangle<int>(
        0,
        (screenSize.height ~/ 2) - (height ~/ 2),
        screenSize.width.toInt(),
        height,
      ),
    );
    debugPrint('PiP enabled? $status');
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
        theme: ThemeData.dark(),
        home: PiPSwitcher(
          childWhenDisabled: Scaffold(
            body: Center(child: Image.asset('assets/image.jpg')),
            floatingActionButtonLocation:
                FloatingActionButtonLocation.centerFloat,
            floatingActionButton: FutureBuilder<bool>(
              future: floating.isPipAvailable,
              initialData: false,
              builder: (context, snapshot) => snapshot.data ?? false
                  ? FloatingActionButton.extended(
                      onPressed: () => enablePip(context),
                      label: const Text('Enable PiP'),
                      icon: const Icon(Icons.picture_in_picture),
                    )
                  : const Card(
                      child: Text('PiP unavailable'),
                    ),
            ),
          ),
          childWhenEnabled: Image.asset('assets/image.jpg'),
        ),
      );
}

Download details:

Author: wrbl.xyz

Source: https://github.com/wrbl606/floating

#flutter #android #ios