3

I am trying to create an app in flutter which consists of:

  1. Home Page
  2. Video Player Page

From the Home Page, the user is able to navigate to the video player page. If the video is playing, when the user clicks the back button or swipe down from the video player, I want to minimize the video player to the bottom of the app (while continue playing) and navigate back to the homepage. This is how Youtube works right now.

After research, I found two approaches to implement this, but each with its own problems.

1. Use the Android PIP mode

Problem:

Android PIP mode works on activity basis. Flutter has only one activity. If I were to implement it this way, the entire app will be minimized when I invoke the PIP mode. I want the user to be able to navigate within the app while the video player is in PIP mode.

Is there a way to have more than one activity in Flutter? If it is possible, then is it advisable to implement it this way?

2. Create a persistent widget

Create a widget that persists on navigation similar to this.

Problem:

I can't wrap my head on how to implement it this way. How do I animate the media player in the nested MaterialApp to minimize to the bottom of the app where the persistent widget is (because it's two separate Material Apps). How do I pass data between them?

Edwind Tay
  • 31
  • 2

1 Answers1

0

For picture-in-picture, you can use plugins like pip_flutter. The way PIP works is that it creates a running window of your app that can be overlayed over the home screen or other apps.

As for animating the transition of the persistent widget. You can use Hero animations to help you with the transition.

Omatt
  • 8,564
  • 2
  • 42
  • 144