Flutter画中画功能插件fl_pip的使用

简介

fl_pip 是一个用于Flutter应用的插件，它允许开发者在iOS和Android平台上实现画中画（PiP, Picture-in-Picture）模式。通过这个插件，你可以显示Flutter的view，并且可以通过修改Flutter栈顶的view来展示任意UI。

然而，在iOS上存在一个问题：当应用处于后台时，Flutter UI可能会停止运行或直接黑屏。这可能是由于iOS冻结了应用程序导致的。目前还没有完美的解决方案，如果你有好的想法，请提交PR。

使用配置

iOS 配置

1. 在 Signing & Capabilities -> Capability 中添加 BackgroundModes。
2. 勾选 Audio, AirPlay, And Picture in Picture。
3. 修改 /ios/Runner/AppDelegate.swift 文件的内容如下：

import fl_pip
import Flutter
import UIKit

@main
@objc class AppDelegate: FlFlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    override func registerPlugin(_ registry: FlutterPluginRegistry) {
        GeneratedPluginRegistrant.register(with: registry)
    }
}

Android 配置

1. 修改 android/app/src/main/${your package name}/MainActivity 继承 FlPiPActivity。
2. 在 AndroidManifest.xml 文件中添加 android:supportsPictureInPicture="true" 属性。

<application android:label="FlPiP">
    <activity android:name=".MainActivity" 
              android:launchMode="singleTop" 
              android:supportsPictureInPicture="true" />
</application>

Kotlin 示例代码

class MainActivity : FlPiPActivity()

Java 示例代码

class MainActivity extends FlPiPActivity {

}

方法列表

以下是 fl_pip 插件提供的主要方法：

• enable(): 开启画中画模式。

  void enable() {
    FlPiP().enable(
        iosConfig: FlPiPiOSConfig(),
        androidConfig: FlPiPAndroidConfig(
            aspectRatio: const Rational.maxLandscape()));
  }
  

• isAvailable(): 检查是否支持画中画模式。

  bool isAvailable = await FlPiP().isAvailable;
  

• isActive(): 获取当前画中画窗口的状态。

  bool isActive = await FlPiP().isActive;
  

• toggle(): 切换前后台（仅iOS支持切换到后台）。

  void toggle() {
    FlPiP().toggle();
  }
  

• disable(): 退出画中画模式。

  void disable() {
    FlPiP().disable();
  }
  

示例代码

下面是一个完整的示例代码，展示了如何使用 fl_pip 插件创建一个带有计时器的应用程序，并启用画中画模式。

import 'package:flutter/material.dart';
import 'package:flutter_waya/flutter_waya.dart'; // Assuming this is a custom package for widgets like CountDown

void main() {
  runApp(App(home: HomePage()));
}

/// mainName must be the same as the method name
@pragma('vm:entry-point')
void pipMain() {
  runApp(ClipRRect(
      borderRadius: BorderRadius.circular(12),
      child: App(home: PiPHomePage())));
}

class App extends StatelessWidget {
  const App({super.key, required this.home});

  final Widget home;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
        home: home);
  }
}

class Timer extends StatelessWidget {
  const Timer({super.key});

  @override
  Widget build(BuildContext context) => CountDown(
      duration: const Duration(seconds: 500),
      builder: (Duration duration, bool isRunning, VoidCallback startTiming) {
        return Padding(
            padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 12),
            child: Text('timer:${duration.inSeconds.toString()}'));
      });
}

class Filled extends StatelessWidget {
  const Filled({super.key, required this.text, this.onPressed});

  final String text;
  final VoidCallback? onPressed;

  @override
  Widget build(BuildContext context) {
    return FilledButton(
        onPressed: onPressed, child: Text(text, textAlign: TextAlign.center));
  }
}

// Example pages
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home Page")),
      body: Center(child: Text("This is the Home Page")),
    );
  }
}

class PiPHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("PiP Home Page")),
      body: Center(child: Timer()),
    );
  }
}

在这个示例中：

• pipMain 函数是必须的，如果使用 enableWithEngine 方法。
• Timer 小部件展示了如何在画中画模式下显示一个倒计时。
• HomePage 和 PiPHomePage 分别代表主页面和进入画中画模式后的页面。

希望这些信息能帮助你更好地理解和使用 fl_pip 插件。如果你有任何问题或需要进一步的帮助，请随时提问！