# flutter_pip

**Repository Path**: scenario-samples/flutter_pip

## Basic Information

- **Project Name**: flutter_pip
- **Description**: 如何在Flutter中实行鸿蒙画中画的特性
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-01
- **Last Updated**: 2025-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flutter实现画中画
## 场景介绍
如何在Flutter中实行鸿蒙画中画的特性

## 效果预览
![flutter_pip.gif](gif/flutter_pip.gif)

## 实现思路
1. HarmonyOS中画中画的实现有三种方案，包括XComponent、TypeNode及NDK
2. 针对flutter场景，推荐使用TypeNode来实现，灵活性更高；尤其是三方框架会有自身的路由页面管理框架。
3. 本Demo采用TypeNode方式，使用AVPlayer作为解码器，在启动pip时，动态切换surfaceId，进行渲染。


## 约束与限制
* 本示例支持API Version 17 Release及以上版本。
* 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
* 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。
* Flutter ohos SDK版本推荐3.22及以上

## 工程目录：
```
├──lib
│  ├──main.dart                               // Flutter UI 入口
│  └──meeting.dart                            // 解码输出纹理页面
└──ohos/entry/src/main/ets/
   ├──constants/Constants.ets                     
   ├──pages/Index.ets                         // UI入口
   ├──plugins       
   |  ├──PipFlutterPlugin.ets                 // 画中画插件
   |  └──PipManager.ets                       // 画中画组件管理类
   └──util                                    
      ├──Logger.ets                           // 日志公共类
      └──AVPlayer.ets                         // 播放器
```

## 参考文档
[应用使用typeNode自由节点（不添加到布局）实现画中画功能](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/pipwindow-typenode#section7627141117162)