Flutter — App Level PIP using Ovelay

Hello All Flutter Devs

In this article we will see how to implement InApp PIP To solve this issue we will use overlay to draw over all the widgets, to manage state we will use provider

The process goes this way lets assume we have a list of videos once the user clicked on any video instead of showing navigating to the new page we will add a new page as an overlay so and we update the state in privider so I will be in sync with all the pages

This article more kind of file by file code explanation

Let’s Get Started,

First things first let's add required dependencies

Dependencies

we will be using provider to manage our overlay state.

(main.dart)

In main.dart our application start here ar runApp

Our MaterialApp is wrapped with ChangeNotifierProvider which is from provider plugin which will allow us to maintain its state overall the app

We also notice we have OverlayHandlerProvider which is our notifier we will the file soon.

In MyHomePage Widget I have created two buttons which will demo us two different kinds of layouts in pip

If you notice we have

whenever we click on any button we are calling a function which will be Calling a function from OverlayService Class with two parameters context and Widget

(overlay_handler.dart)

In OverlayHandlerProvider will extends ChangeNotifier you can see more about it here

In this, we will be declaring three variables OverlayEntry which is required to remove it from overlay when we are on other screens, doubel aspectRatio which will be used resizing in PIP mode and bool inPipMode which are true/ false based on the mode it is.

Function enablePip will be used to enable pip mode which will update the variable inPipMode to true, aspectRatio and at last by calling notifyListeners(); we notify all the listeners so they can perform the actions as required like resizing, hiding some widgets.

The same goes for the disablePip functions we update the pip state and then we notify the listeners

In insertOverlay function we check if there is any existing overlay if exists then we remove it from overlay then add a new one and update the state.

Then main code to insert an overlay is Overlay.of(context).insert(overlay); in this overlay will be of type OverlayEntry

removeOverlay(BuildContext context) { 
    if(overlayEntry != null) { 
       overlayEntry.remove(); 
    } 
    overlayEntry = null; 
}

Function removeOverlay is called if we cant to remove overlay overlayEntry.remove();

(overlay_service.dart)

Here in OverlayService Class we have function which is similar we are gonna see about addVideosOverlay function

Once we called the fucntion it will create an OverlayEntry with out Widget

(video_overlay_widget.dart)

In this file, we will be handling the resize of the widget whenever pip is enabled

If you notice we are using some import 'drag/drag_custom.dart' as dc; custom drag which I copied from drag.dart provided by flutter in darg provided by flutter doesn't have onDragUpdate so I made some modifications for it so it will trigger onDragUpdate you can check it in GitHub link will be at the bottom of the article.

In order to make it more fluent, we are using default animation widgets provided by flutter like AnimatedContainer, AnimatedOpacity and AnimatedPositioned

(video_player_widget.dart)

Here in this file will be the player and whenever pip is enabled we hide and show some widgets and vice-versa

Demo

we also have a couple more files which will in GitHub repo you can refer them those are for the second button we have in out MyHomePage Widget

For Source Code visit here

PonnamKarthik/FlutterInAppPIP

Thanks for your time

Ponnam Karthik 💙