blog.md

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 assue we have a list of videos once user clicked on any video insted of showing navigating to new page we will add new page as an overlay so and we update the state in provider so i will be in sync with all the pages

This article more kind of file by file code explaination

Let’s Get Started,

First things first lets add required denepencies

Dependencies

https://gist.github.com/c5ced493aa80ccdb56b12c819f38744e

we will be using provider to mange our overlay state.

(main.dart)

https://gist.github.com/e5c5ed2aa13dab666ee0c11eabeb437d

In main.dart our application start here ar runApp

Our MaterialApp is wrapped with ChangeNotifierProvider which is from provider plugin which will allows 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 kind of layouts in pip

In you notice we have https://gist.github.com/927d3a9500a64bb6cb84fab105fbeb7c

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

(overlay_handler.dart)

https://gist.github.com/7172a75fc18d6d76434b8ce5b1a8ad36

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 we be 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 with the disablePip functions we update the pip state and then we notify the listeners

https://gist.github.com/a49367194463dc266a01bd4aa701e3c8

In insertOverlay function we check if their is any exsiting overlay if any one 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)

https://gist.github.com/c8d8af07c7be000452141434e0514864

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

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

(video_overlay_widget.dart)

https://gist.github.com/d234f1429805d84879700f80f512dc94

In this file we will be handling the resize of the widget when ever 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 antimation widgets provided by flutter like AnimatedContainer, AnimatedOpacity and AnimatedPositioned

(video_player_widget.dart)

https://gist.github.com/0651c086bbe104615495551e588a785f

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

we also have some comple 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 https://github.com/PonnamKarthik/FlutterInAppPIP

Thanks for you time

https://twitter.com/PonnamKarthik