Flutter浮动窗口管理插件 flutter_float_window 的使用

flutter_float_window 是一个用于在 Android 和 iOS 平台上显示浮动窗口的 Flutter 插件。以下是如何使用该插件的具体步骤和示例代码。

基本用法

初始化浮动窗口

Map<String, String> params = {"videoUrl": ''};
FlutterFloatWindow.initFloatWindow(params);

显示/隐藏浮动窗口

// 显示浮动窗口
FlutterFloatWindow.showFloatWindow();

// 隐藏浮动窗口
FlutterFloatWindow.hideFloatWindow();

控制播放状态

// 播放视频
FlutterFloatWindow.play();

// 暂停视频
FlutterFloatWindow.pause();

// 停止视频
FlutterFloatWindow.stop();

检查权限并处理

if (await FlutterFloatWindow.canShowFloatWindow()) {
  FlutterFloatWindow.showFloatWindow();
} else {
  FlutterFloatWindow.openSetting();
}

设置视频 URL

Map<String, String> params = {"videoUrl": "http://example.com/video.mp4"};
FlutterFloatWindow.setVideoUrl(params);

设置背景颜色

FlutterFloatWindow.setBackgroundColor("#5c3317");

设置重力方向

FlutterFloatWindow.setGravity(FloatWindowGravity.CENTER);

设置宽高

var map = {
  "width": int.parse(width),
  "height": int.parse(height)
};
FlutterFloatWindow.setWidthAndHeight(map);

设置宽高比

FlutterFloatWindow.setAspectRatio(0.7);

监听原生事件

var channel = FlutterFloatWindow.channel;
channel.setMethodCallHandler((call) async {
  switch (call.method) {
    case "onFullScreenClick":
      debugPrint('onFullScreenClick');
      break;
    case "onCloseClick":
      debugPrint('onCloseClick');
      break;
    case "onPlayClick":
      debugPrint('onPlayClick,${call.arguments}');
      break;
  }
});

iOS 特定功能

初始化视频播放器

FlutterFloatWindow.initVideoPlayerIOS(
  url: dataSource,
  title: title,
  artist: artist,
  coverUrl: cover,
  position: 0,
  speed: 1.0,
);

FlutterVideoPlayerEngine playerEngine = FlutterVideoPlayerEngine.create();
playerEngine.setVideoPlayerEventHandler(FlutterVideoPlayerEventHandler(
  onInitialized: () {},
  onVideoProgress: (double position, double duration, double bufferedStart, double bufferedEnd) {},
  onVideoPlayPaused: () {},
  onVideoPlayEnd: () {},
  onVideoInterruptionBegan: () {},
  onVideoInterruptionEnded: () {},
  onVideoPipCloseClicked: () {},
  onVideoPipFullScreenClicked: () {},
));
FlutterFloatWindow.initVideoPlayerListener(playerEngine.mHandler!);

使用画中画模式

// 开始画中画
FlutterFloatWindow.startPipIOS();

// 结束画中画
FlutterFloatWindow.stopPipIOS();

示例 Demo

以下是一个完整的示例，展示了如何在应用中集成 flutter_float_window 插件：

import 'package:flutter/material.dart';
import 'package:flutter_float_window/flutter_float_window.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
    initFloatWindow();
  }

  Future<void> initFloatWindow() async {
    Map<String, String> params = {"videoUrl": "https://media.w3.org/2010/05/sintel/trailer.mp4"};
    await FlutterFloatWindow.initFloatWindow(params);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Float Window Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  if (await FlutterFloatWindow.canShowFloatWindow()) {
                    FlutterFloatWindow.showFloatWindow();
                  } else {
                    FlutterFloatWindow.openSetting();
                  }
                },
                child: Text('Show Float Window'),
              ),
              ElevatedButton(
                onPressed: () {
                  FlutterFloatWindow.hideFloatWindow();
                },
                child: Text('Hide Float Window'),
              ),
              ElevatedButton(
                onPressed: () {
                  FlutterFloatWindow.play();
                },
                child: Text('Play Video'),
              ),
              ElevatedButton(
                onPressed: () {
                  FlutterFloatWindow.pause();
                },
                child: Text('Pause Video'),
              ),
              ElevatedButton(
                onPressed: () {
                  FlutterFloatWindow.stop();
                },
                child: Text('Stop Video'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}