Picture in Picture view in flutter

Vijay R

Published in

vijaycreations

3 min readJul 10, 2023

In this article we will discuss about how to add pip view in flutter.

⚒️ Dependencies

pip_view | Flutter Package

Widget to allow the presentation of a widget below a floating one.

pub.dev

🎥 Video Tutorial

🔭 Implementation

PIPView helps Widget to allow the presentation of a widget below a floating one. It supports moving the floating widget around which sticks to the corners.

→ #1 PIPView Widget

Wrap the top level widget using PIPView widget, which we get as a result of installing the pip_view package and call presentBelow() method inside the onpress event of the button by passing the background screen as a parameter. (Background screen can be either a stateless or stateful widget)

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PIPView(
      builder: (context, isFloating) {
        return Scaffold(
          body: Column(
            children: [
              Text('This is the screen that will float!');
              MaterialButton(
                child: Text('Start floating');
                onPressed: () {
                  PIPView.of(context).presentBelow(MyBackgroundScreen());
                },
              ),
            ],
          );
        );
      },
    );
  }
}

→ #2 Define background screen

Let’s define a background screen over which the current screen keeps floating on picture in picture view.

class MyBackgroundScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('This is my background screen!');
    );
  }
}

Well that’s it. 🎉 Run the code to see it in action.🥳

Refer my video tutorial for complete guide:👉 https://youtu.be/9tXyOpK-P24

Get the complete source code here:👉 https://github.com/vijayinyoutube/pip_view_app_demo