flutter_in_app_pip

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um pacote Flutter que simplifica a implementação do modo Picture-in-Picture (PiP) em aplicativos Flutter. Permite que os usuários continuem visualizando conteúdo de vídeo em uma janela flutuante pequena enquanto navegam por outras partes do aplicativo ou mudam para outros aplicativos. O pacote suporta múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, oferecendo uma experiência consistente de PiP em dispositivos diferentes. É ideal para aplicativos com grande volume de mídia, como players de vídeo, transmissões ao vivo ou ferramentas de videoconferência.

Casos de uso

Reprodução de vídeo em segundo plano
Transmissão ao vivo com PiP
Aplicativos de videoconferência
Aplicativos de mídia que exigem multitarefa
Aplicativos educacionais com conteúdo de vídeo

Principais recursos

Suporte de PiP multiplataforma
Integração de API simples
Janela de vídeo flutuante
Gerenciamento automático do estado PiP
Suporta Android, iOS, Web, macOS, Windows e Linux

Indicado para

desenvolvedores de aplicativos de mídia
Plataformas de streaming de vídeo
Aplicativos de aprendizagem interativa
Aplicativos que precisam de reprodução de vídeo em segundo plano
Desenvolvedores direcionados a múltiplas plataformas

Considerações

Requer permissões específicas da plataforma
Comportamento limitado de PiP em alguns navegadores da web
O modo PiP do iOS pode exigir configuração adicional
Nem todos os dispositivos suportam o modo PiP
O suporte ao Web PiP varia conforme o navegador

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

In App PiP for Flutter

A Flutter Package to help easily implement in-app PiP(Picture in Picture) in a flutter application. Written completely in dart.

Features

Easily Implement PiP(Picture in Picture) in app.
Navigatable PiP Widget which allows navigation inside the PiP Window.
Automatically Handle showing different widgets in the original view when in pip and when not in pip.
Provides the ability to update the size of the pip widget later after starting pip.
Provides the ability to set the borders to which pip can be dragged.
Provides the ability to make the window resizable(pinch-in/out).
Provides the ability to make the window non-movable.
Provides the ability to set the initial corner of the PIP window.
Provides the ability to set minimum and maximum size of the PIP window, if resizable.

Getting started

Import the package.
Replace your MaterialApp with PiPMaterialApp (If using MaterialApp.router, you can replace it with PiPMaterialApp.router).
Optionally provide the pip parameters. These correspond to various parameters such as height and width of your pip widget.

Usage

After replacing your MaterialApp with PiPMaterialApp, use

 PictureInPicture.startPiP(pipWidget: MyPiPWidget());

to start PiP view in your app.

When you wish to stop PiP, use

PictureInPicture.stopPiP();

Use PiPWidget for additional functionalities like handling events on close of pip e.g.

PictureInPicture.startPiP(
    pipWidget:PiPWidget(
      child: ChildWidget(),
      onPiPClose: (){
      //Handle closing events e.g. dispose controllers.
      
      },
      elevation: 10,        //Optional
      pipBorderRadius: 10,  //Optional
      )
);

Use NavigatablePiPWidget for Navigation inside the PiP Window e.g.

PictureInPicture.startPiP(
    pipWidget:NavigatablePiPWidget(
      child: ChildWidget(),
      onPiPClose: (){
      //Handle closing events e.g. dispose controllers.
      
      },
      elevation: 10,        //Optional
      pipBorderRadius: 10,  //Optional
      )
);

Additionally, you can also use PiPCapableWidget to handle the view changes in case of PiP start and stop e.g.

PiPCapableWidget(
    whileNotInPip: ChildToShowWhileNotInPiP(),
    whileInPip: ChildToShowWhileInPiP(),      //Optional
);

Update the parameters of the pip view like below:

PictureInPicture.updatePiPParams(
                    pipParams: PiPParams(
                        pipWindowHeight: 144,
                        pipWindowWidth: 256,
                        bottomSpace: 64,
                        leftSpace: 64,
                        rightSpace: 64,
                        topSpace: 64,
                        maxSize: Size(256, 144),
                        minSize: Size(144, 108),
                        movable: true,
                        resizable: false,
                        initialCorner: PIPViewCorner.bottomRight,
                        ),
                  );

Note

That's it. Enjoy! Also, this package is 100% compatible with my other flutter plugin android_pip

Buscar pacotes, repositórios e categorias de apps

Instalar pacote