flutter 使用Overlay + GestureDetector 制作一个全局可拖拽悬浮按钮

最新推荐文章于 2024-04-09 07:49:16 发布

TreasureÂ°

最新推荐文章于 2024-04-09 07:49:16 发布

阅读量2.7k

点赞数 2

分类专栏： flutter dart 文章标签： dart flutter

本文链接：https://blog.csdn.net/weixin_43582313/article/details/111381528

版权

本文介绍如何在Flutter中利用Overlay和GestureDetector创建一个全局可拖动的悬浮按钮。通过Overlay实现悬浮效果，借助GestureDetector实现拖拽功能，确保按钮在所有页面上可见并能自由移动。

摘要由CSDN通过智能技术生成

使用Overlay + GestureDetector 制作一个全局可拖拽悬浮按钮

1.场景
2.思路
3.具体实现
- 1.全局悬浮按钮
- 2.拖拽

1.场景

现在需要做一个Test按钮，悬浮在所有页面之上，并且可以拖拽。

2.思路

1）悬浮按钮可以使用flutter提供的Overlay + OverlayEntry 组合实现

2）拖拽功能可以使用GestureDetector手势按钮或者Draggable实现（PS：我做了一版Draggable实现的，但是发现它会有原本的widget浮在原地，显然不是我要的效果）

3）点击的时候我是让它弹出一个底部弹框，这里你们可以自由发挥，本篇文章不做多余赘述

3.具体实现

app.dart/main.dart(应用程序入口)

@override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      home: PubScaffold(
        child: OKToast(
          child: MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.green,
            ),
            ...
          ),
        ),
      ),
    );
  }

这里的PubScaffold就是我封装的一个悬浮按钮组件，把它包裹在MaterialApp外面，就可以实现悬浮在所有的组件之上的一个按钮啦（当然也可以不是按钮，具体样式可以自己定义）。下面我们来看一下PubScaffold中的代码吧～

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:printer/foundation/method_channel/poooli_navigator.dart';

class PubScaffold extends StatefulWidget {
   
  final Widget child;
  PubScaffold({
   this.child});

  @override
  _PubScaffoldState createState() => _PubScaffoldState();
}

class _PubScaffoldState extends State<PubScaffold> {
   
  bool draggable = false;

  //静止状态下的offset
  Offset idleOffset = Offset(0, 0);
  //本次移动的offset
  Offset moveOffset = Offset(0, 0);
  //最后一次down事件的offset
  Offset lastStartOffset = Offset(0, 0);

  int count = 0;

  final List<String> testWidgetList = [
    '测试1',
    '测试2',
  ];

  testAppFun