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"