How do you do picture in picture using flutter?

Question

Is there any way to do picture in picture with a flutter app? Kind of like what YouTube does when you're watching a video and navigate to another app.

They talk about it here: https://youtu.be/hBPd2q2dmXY

I searched for it and couldn't find any info about it

Answer 1

what you are asking is not available in flutter, you have to implement it in native only. i have made one application which made pip for android only.

for this first declare a channel in flutter main.dart like:-

static const platform = const MethodChannel('flutter.rortega.com.channel');

then in button click write:-

 await platform.invokeMethod('showNativeView');

which call a method in mainActivity.java

in mainActivity.java write following code:

package com.kovafood;

import io.flutter.embedding.android.FlutterActivity;

import android.app.PictureInPictureParams;
import android.content.Context;
import android.graphics.Point;
import android.os.Build;
import android.util.Rational;
import android.view.Display;
import android.view.ViewTreeObserver;
import android.view.WindowManager;
import androidx.multidex.MultiDex;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodChannel;
import androidx.annotation.NonNull;
public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "flutter.rortega.com.channel";

    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
                .setMethodCallHandler(
                        (call, result) -> {
                            if (call.method.equals("showNativeView")){
                                Display d = getWindowManager()
                                        .getDefaultDisplay();
                                Point p = new Point();
                                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2) {
                                    d.getSize(p);
                                }
                                int width = p.x;
                                int height = p.y;
                                Rational ratio
                                        = null;
                                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                                    ratio = new Rational(width, height);
                                }
                                PictureInPictureParams.Builder
                                        pip_Builder
                                        = null;
                                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                                    pip_Builder = new PictureInPictureParams.Builder();
                                }
                                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                                    pip_Builder.setAspectRatio(ratio).build();
                                }
                                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                                    enterPictureInPictureMode(pip_Builder.build());
                                }
                            } else {
                                result.notImplemented();
                            }
                        }
                );
    }
}

in androidManifest.xml,between the first activity add

android:supportsPictureInPicture="true"

Answer 2

The feature is called "PiP mode" which should be a lot easier to google than "picture in picture". There is a flutter package but I have not tried it (also appears to be android only unfortunately) https://pub.dartlang.org/packages/flutter_android_pip

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

import 'package:flutter/services.dart';
import 'package:flutter_android_pip/flutter_android_pip.dart';

void main() => runApp(new MyApp());

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

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

  @override
  void initState() {
    super.initState();
    //  initPlatformState();
  }
/*
  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    String platformVersion;
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      platformVersion = await FlutterAndroidPip.platformVersion;
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }*/

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Plugin example app'),
        ),
        body: new Center(
          child: new RaisedButton(
            child: new Text("press"),
            onPressed: () {
              FlutterAndroidPip.enterPictureInPictureMode;
            },
          ),
        ),
      ),
    );
  }
}