Picture in Picture view in flutter

Vijay R
vijaycreations
Published in
3 min readJul 10, 2023

--

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

⚒️ Dependencies

🎥 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

Check out all my Flutter related blogs here.,👇

--

--

Vijay R
vijaycreations

Hai👋 I’m a flutter developer experienced in designing and developing stunning mobile apps. Reach out for freelance projects: calico.takeoff_01@icloud.com