Flutter浮动按钮覆盖层插件scrumlab_float_button_overlay的使用

scrumlab_float_button_overlay 插件简介

scrumlab_float_button_overlay 是一个用于在 Flutter 应用中实现类似浮动按钮覆盖层功能的插件。它可以让应用服务在后台保持可见，类似于一个浮动按钮。

使用步骤

1. 导入插件

首先，在项目中导入 scrumlab_float_button_overlay 插件：

import 'package:scrumlab_float_button_overlay/scrumlab_float_button_overlay.dart';

2. 初始化权限检查

在应用启动时，调用 checkPermissions 方法以确保插件所需的权限已启用。

[@override](/user/override)
void initState() {
  super.initState();
  initPlatformState();
  
  // 注册回调函数
  FloatButtonOverlay.registerCallback(serviceCallback, onClickCallback);
}

Future<void> initPlatformState() async {
  try {
    FloatButtonOverlay.checkPermissions;
  } on PlatformException {}
}

3. 在 main 方法中初始化 Flutter 应用

确保在 main 方法中初始化 Flutter 并运行应用。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();          
  runApp(MyApp());
}

4. 显示/隐藏浮动按钮

显示浮动按钮

通过 openOverlay 方法设置浮动按钮的属性，例如通知标题、通知文本、图标路径等。

FloatButtonOverlay.openOverlay(
  activityName: 'MainActivity', // 主活动名称
  iconPath: file.path, // 图标路径
  notificationText: "Float Button Overlay ☠️", // 通知文本
  notificationTitle: 'Float Button Overlay ☠️', // 通知标题
  packageName: packageInfo.packageName, // 包名
  showTransparentCircle: true, // 是否显示透明圆圈
  iconWidth: 100, // 图标宽度
  iconHeight: 100, // 图标高度
  transpCircleHeight: 150, // 透明圆圈高度
  transpCircleWidth: 150, // 透明圆圈宽度
);

隐藏浮动按钮

通过 closeOverlay 方法隐藏浮动按钮。

FloatButtonOverlay.closeOverlay;

完整示例代码

以下是一个完整的示例代码，展示了如何使用 scrumlab_float_button_overlay 插件。

import 'dart:io';
import 'package:scrumlab_float_button_overlay/scrumlab_float_button_overlay.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:package_info_plus/package_info_plus.dart'; // 使用 package_info_plus 进行版本信息获取
import 'package:path_provider/path_provider.dart';

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

Future<File> getImageFileFromAssets(String path) async {
  final byteData = await rootBundle.load('assets/$path');

  final file = File('${(await getTemporaryDirectory()).path}/$path');
  await file.writeAsBytes(byteData.buffer
      .asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));

  return file;
}

File? file;
PackageInfo? packageInfo;

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

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  TextEditingController iconWidthController = TextEditingController();
  TextEditingController iconHeightController = TextEditingController();
  TextEditingController transpWidth = TextEditingController();
  TextEditingController transpHeight = TextEditingController();
  bool showTransparencyBg = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsFlutterBinding.ensureInitialized();
    initPlatformState();
    FloatButtonOverlay.registerCallback(serviceCallback, onClickCallback);
  }

  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion =
          await FloatButtonOverlay.platformVersion ?? 'Unknown version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  void serviceCallback(String tag) {
    print(tag);
  }

  void onClickCallback(String tag) {
    print(tag);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Float Button Overlay - Example'),
          backgroundColor: Colors.black45,
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text('Running on: $_platformVersion\n'),
                TextField(
                  controller: iconWidthController,
                  decoration: InputDecoration(labelText: "Icon Width"),
                ),
                TextField(
                  controller: iconHeightController,
                  decoration: InputDecoration(labelText: "Icon Height"),
                ),
                TextField(
                  controller: transpWidth,
                  decoration: InputDecoration(labelText: "Transparency Width"),
                ),
                TextField(
                  controller: transpHeight,
                  decoration: InputDecoration(labelText: "Transparency Height"),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('Show Transparency Background?'),
                    Switch(
                        value: showTransparencyBg,
                        onChanged: (value) {
                          setState(() {
                            showTransparencyBg = value;
                          });
                        }),
                  ],
                ),
                TextButton(
                  onPressed: () async {
                    file = await getImageFileFromAssets('caveira.png');
                    packageInfo = await PackageInfo.fromPlatform();

                    debugPrint("Vai abrir o overlay");
                    FloatButtonOverlay.openOverlay(
                      activityName: 'MainActivity',
                      iconPath: file?.path ?? '',
                      notificationText: "Float Button Overlay ☠️",
                      notificationTitle: 'Float Button Overlay ☠️',
                      packageName: packageInfo?.packageName ?? '',
                      showTransparentCircle: showTransparencyBg,
                      iconWidth: int.parse(iconWidthController.text.isEmpty
                          ? '100'
                          : iconWidthController.text),
                      iconHeight: int.parse(iconHeightController.text.isEmpty
                          ? '100'
                          : iconHeightController.text),
                      transpCircleHeight: int.parse(transpHeight.text.isEmpty
                          ? '150'
                          : transpHeight.text),
                      transpCircleWidth: int.parse(
                          transpWidth.text.isEmpty ? '150' : transpWidth.text),
                    );
                  },
                  child: Container(
                    color: Colors.black45,
                    height: 40,
                    width: 100,
                    child: Center(
                      child: Text(
                        "Show Button",
                      ),
                    ),
                  ),
                ),
                TextButton(
                  onPressed: () {
                    debugPrint("Vai fechar o overlay");
                    FloatButtonOverlay.closeOverlay;
                  },
                  child: Container(
                    color: Colors.black54,
                    height: 40,
                    width: 100,
                    child: Center(
                      child: Text(
                        "Close Button",
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}