drs_floating_widget 是一个用于在 Flutter 应用中创建悬浮窗的插件。它允许你在应用界面上显示一个悬浮窗口，该窗口可以拖动并保持在屏幕上的任意位置。这个插件非常适合用于需要常驻显示的小工具或快捷操作。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 drs_floating_widget 依赖：

dependencies:
  flutter:
    sdk: flutter
  drs_floating_widget: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用 drs_floating_widget

1. 基本用法

首先，导入 drs_floating_widget 包：

import 'package:drs_floating_widget/drs_floating_widget.dart';

然后，你可以使用 FloatingWidget 来创建一个悬浮窗口：

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

class _MyHomePageState extends State<MyHomePage> {
  final FloatingWidgetController _controller = FloatingWidgetController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Floating Widget Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _controller.showFloatingWidget(
              context,
              FloatingWidget(
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      'Floating',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
            );
          },
          child: Text('Show Floating Widget'),
        ),
      ),
    );
  }
}

在上面的代码中，我们创建了一个 FloatingWidgetController，并通过 showFloatingWidget 方法显示了一个悬浮窗口。悬浮窗口的内容是一个简单的蓝色 Container，其中包含一个文本。

2. 控制悬浮窗口

FloatingWidgetController 提供了一些方法来控制悬浮窗口的行为：

• showFloatingWidget(BuildContext context, FloatingWidget widget): 显示悬浮窗口。
• hideFloatingWidget(): 隐藏悬浮窗口。
• toggleFloatingWidget(BuildContext context, FloatingWidget widget): 切换悬浮窗口的显示状态。
• isShowing: 获取悬浮窗口是否正在显示。

3. 自定义悬浮窗口

你可以通过 FloatingWidget 的 child 属性来自定义悬浮窗口的内容。例如，你可以在悬浮窗口中添加按钮、图标、文本等。

FloatingWidget(
  child: Container(
    width: 150,
    height: 150,
    decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.circular(10),
    ),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.star, color: Colors.white, size: 40),
        SizedBox(height: 10),
        Text(
          'Star',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ],
    ),
  ),
),

4. 悬浮窗口的拖动

drs_floating_widget 默认支持悬浮窗口的拖动功能。用户可以通过长按悬浮窗口并拖动来改变其位置。

5. 关闭悬浮窗口

你可以通过调用 _controller.hideFloatingWidget() 来手动关闭悬浮窗口。

示例代码

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

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floating Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final FloatingWidgetController _controller = FloatingWidgetController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Floating Widget Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _controller.showFloatingWidget(
              context,
              FloatingWidget(
                child: Container(
                  width: 150,
                  height: 150,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(Icons.star, color: Colors.white, size: 40),
                      SizedBox(height: 10),
                      Text(
                        'Star',
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
          child: Text('Show Floating Widget'),
        ),
      ),
    );
  }
}