Flutter如何实现应用内画中画功能

在Flutter中如何实现类似视频播放器的画中画功能？我想让用户在使用其他应用时，仍能保持一个小窗口播放视频。目前尝试过使用flutter_pip插件，但遇到兼容性问题，部分安卓机型无法正常悬浮。请问有没有更稳定的实现方案？是否需要原生平台集成？最好能提供关键代码示例和权限配置说明。

2 回复

Flutter可通过Picture-in-Picture插件实现画中画功能。首先导入pip_flutter，然后使用PipFlutterPlayer控件包裹视频组件，调用enterPipMode()方法即可启动画中画模式。需注意配置Android和iOS平台的权限及设置。

更多关于Flutter如何实现应用内画中画功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现应用内画中画（Picture-in-Picture）功能，可以通过以下步骤完成：

1. 使用 video_player 和 flutter_pip 插件

  • video_player：用于视频播放。
  • flutter_pip：提供画中画功能支持。

步骤：

  1. 添加依赖： 在 pubspec.yaml 中添加：

    dependencies:
  video_player: ^2.8.2
  flutter_pip: ^0.0.1

  2. 初始化视频控制器：

    import 'package:video_player/video_player.dart';

class VideoPipPage extends StatefulWidget {
  @override
  _VideoPipPageState createState() => _VideoPipPageState();
}

class _VideoPipPageState extends State<VideoPipPage> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network('https://example.com/video.mp4')
      ..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.value.isPlaying
              ? _controller.pause()
              : _controller.play();
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

  3. 启用画中画： 使用 flutter_pip 进入画中画模式：

    import 'package:flutter_pip/flutter_pip.dart';

void enterPipMode() {
  PipFlutter.enterPictureInPictureMode();
}

    在按钮或手势操作中调用 enterPipMode。

2. 注意事项

  • 仅限 Android：flutter_pip 主要支持 Android（API 26+），iOS 需使用原生方式实现。
  • 配置 AndroidManifest.xml： 在 android/app/src/main/AndroidManifest.xml 的 <activity> 中添加：
    <activity
  android:name=".MainActivity"
  android:supportsPictureInPicture="true"
  android:configChanges="orientation|screenSize|screenLayout|keyboardHidden"
/>

3. 替代方案

对于更复杂的需求（如 iOS 支持），可结合 platform_channels 调用原生代码：

  • Android 使用 PictureInPictureParams.Builder。
  • iOS 使用 AVPictureInPictureController。

总结

通过 video_player 和 flutter_pip 可快速实现基础画中画。注意平台兼容性，并根据需要扩展原生功能。

回到顶部