Flutter - 写一个全局悬浮按钮

WDScreenButton：打造自定义可拖动悬浮按钮

在移动应用开发中，悬浮按钮是一种常见的交互元素，它可以提供快速便捷的操作入口。然而，Flutter框架并未提供直接支持悬浮按钮拖动功能的组件。为了解决这一问题，我开发了WDScreenButton，它能够轻松实现自定义可拖动的悬浮按钮，并且提供了丰富的定制化选项。（用gpt又写了一篇）

1. 灵活的定制化

WDScreenButton允许开发者根据自身应用的需求进行灵活定制，包括按钮位置、初始显示状态、按钮样式等。通过简单的配置，开发者可以轻松创建出符合应用设计风格的悬浮按钮，提升用户体验和应用整体美感。

2. 拖动交互支持

WDScreenButton支持拖动交互，用户可以通过触摸拖动按钮的方式调整按钮位置，从而更好地适配不同屏幕尺寸和用户习惯。这种直观的交互方式不仅增加了用户与应用的互动性，同时也提升了用户对应用功能的操作效率。

3. 完整代码

import 'package:flutter/material.dart';

typedef WDScreenButtonCallBack = void Function();

class WDScreenButton {

  static OverlayEntry? _overlayEntry;
  ///是否显示
  static bool isShow = false;
  static WDScreenButtonCallBack? _callBack;
  static GlobalKey<NavigatorState>? _globalKey;

  static double _dx = 30;
  static double _dy = 100;
  static Widget? _buttonChild;
  ///是否初始化
  static bool isInit = false;

  ///显示/隐藏按钮
  static changeStatus(bool status){
    isShow = status;
    Future.delayed(Duration(milliseconds: 330)).then((value) {
      _overlayEntry?.markNeedsBuild();
    });
  }
  static initConfig(GlobalKey<NavigatorState> globalKey,{double left = 30, double top = 100,
    bool isShowBtn = false,Widget? buttonChild,WDScreenButtonCallBack? callBack}){
    if(isInit){
      return;
    }
    isShow = isShowBtn;
    _callBack = callBack;
    _dx = left;
    _dy = top;
    _buttonChild = buttonChild;
    _globalKey = globalKey;
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _init();
    });
  }

  ///初始化
  static _init()  {
    _overlayEntry?.remove();
    _overlayEntry = null;
    _overlayEntry = OverlayEntry(
        builder: (BuildContext context) => Positioned(
          top:  _dy,
          left: _dx,
          child: GestureDetector(
              onTap: () {
                if (_callBack != null) {
                  _callBack!();
                }
              },
              child: Offstage(
                offstage: !isShow,
                child: Draggable(
                    onDragUpdate: (DragUpdateDetails details){
                    },
                    onDragEnd: (DraggableDetails details) {
                      ///拖动结束
                      _dx = details.offset.dx;
                      _dy = details.offset.dy;
                      if (_dx < 30) {
                        _dx = 30;
                      } else if (_dx > MediaQuery.of(context).size.width - 30) {
                        _dx = MediaQuery.of(context).size.width-30;
                      }
                      if (_dy < 100) {
                        _dy = 100;
                      }else if (_dy > MediaQuery.of(context).size.height - 100) {
                        _dy = MediaQuery.of(context).size.height - 100;
                      }
                      _overlayEntry?.markNeedsBuild();
                    },
                    childWhenDragging: SizedBox.shrink(),
                    feedback: _buttonChild ?? Icon(Icons.pest_control_sharp,size: 40,color: Colors.blueAccent,),
                    child:_buttonChild ?? Icon(Icons.pest_control_sharp,size: 40,color: Colors.blueAccent)),
              )
          ),
        )
    );
    if (_globalKey?.currentState?.overlay != null) {
      _globalKey!.currentState!.overlay!.insert(_overlayEntry!);
      isInit = true;
    }
  }


}

4. 如何使用WDScreenButton

1. 在需要使用的页面引入WDScreenButton：

import 'xxxx/wd_screen_button.dart';

2. 在页面初始化阶段进行配置：

WDScreenButton.initConfig(
  globalKey,
  left: 30,
  top: 100,
  isShowBtn: true,
  buttonChild: Icon(Icons.add, size: 36, color: Colors.white),
  callBack: () {
    // 点击按钮触发的操作
  },
);

5. 结语

WDScreenButton为Flutter开发者提供了一种简单、灵活的方式来创建自定义可拖动悬浮按钮，为应用增添了更多的交互元素和个性化定制空间。我相信，WDScreenButton将成为您开发畅、具有吸引力的应用界面的得力助手。