flutter | 悬浮窗解决方案 flutter_floating

简介: flutter | 悬浮窗解决方案 flutter_floating

Floating 是一个灵活且强大的悬浮窗解决方案


特性


全局的悬浮窗管理机制

支持各项回调监听,如移动、按下等

支持自定义是否保存悬浮窗的位置信息

支持单页面及全局使用,可插入 N 个悬浮窗

支持自定义禁止滑动区域,例如在 距离顶部 50 到底部的区域内滑动等

完善的日志系统,可查看不同悬浮窗对应的 Log

支持自定义位置方向及悬浮窗的各项指标

支持越界回弹,多指触摸移动,自适应屏幕旋转以及小窗口等情况

自适应悬浮窗大小


打开方式


项目迁移至 flutter3.0,3.0 以下可能无法使用,请自行升级flutters SDK


flutter_floating: ^1.0.1 
I/flutter (24648): Floating_Log 1 : 按下 X:0.0 Y:150.0
I/flutter (24648): Floating_Log 1 : 抬起 X:0.0 Y:150.0
I/flutter (24648): Floating_Log 1 : 移动 X:0.36363636363636687 Y:150.0
I/flutter (24648): Floating_Log 1 : 移动 X:0.36363636363636687 Y:149.63636363636363
I/flutter (24648): Floating_Log 1 : 移动 X:0.7272727272727337 Y:149.63636363636363
I/flutter (24648): Floating_Log 1 : 移动 X:1.0909090909091006 Y:149.27272727272725
I/flutter (24648): Floating_Log 1 : 移动 X:1.4545454545454675 Y:149.27272727272725
I/flutter (24648): Floating_Log 1 : 移动 X:1.4545454545454675 Y:148.90909090909088
I/flutter (24648): Floating_Log 1 : 移动 X:0.0 Y:145.9999999999999
I/flutter (24648): Floating_Log 1 : 移动结束 X:0.0 Y:145.9999999999999


I/flutter (24648): Floating_Log 1645091422285 : 按下 X:342.72727272727275 Y:480.9090909090909
I/flutter (24648): Floating_Log 1645091422285 : 抬起 X:342.72727272727275 Y:480.9090909090909
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:480.5454545454545
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:480.18181818181813
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:479.81818181818176
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:479.4545454545454
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:479.090909090909
I/flutter (24648): Floating_Log 1645091422285 : 移动 X:342.72727272727275 Y:478.72727272727263


使用方式


可选参数


///[child]需要悬浮的 widget
///[slideType],可参考[FloatingSlideType]
///
///[top],[left],[left],[bottom] 对应 [slideType],
///例如设置[slideType]为[FloatingSlideType.onRightAndBottom],则需要传入[bottom]和[right]
///
///[isPosCache]启用之后当调用之后 [Floating.close] 重新调用 [Floating.open] 后会保持之前的位置
///[isSnapToEdge]是否自动吸附边缘,默认为 true ,请注意,移动默认是有透明动画的,如需要关闭透明度动画,
///请修改 [moveOpacity]为 1
///[slideTopHeight] 滑动边界控制,可滑动到顶部的距离
///[slideBottomHeight] 滑动边界控制,可滑动到底部的距离
Floating(
  Widget child, {
  FloatingSlideType slideType = FloatingSlideType.onRightAndBottom,
  double? top,
  double? left,
  double? right,
  double? bottom,
  double moveOpacity = 0.3,
  bool isPosCache = true,
  bool isShowLog = true,
  bool isSnapToEdge = true,
  this.slideTopHeight = 0,
  this.slideBottomHeight = 0,
})


全局悬浮窗


全局的悬浮窗通过 FloatingManager 进行管理


创建悬浮窗


floatingOne = floatingManager.createFloating(
        "1",///key
        Floating(const FloatingIncrement(),
            slideType: FloatingSlideType.onLeftAndTop,
            isShowLog: false,
            slideBottomHeight: 100));


通过 FloatingManager 获取 key 对应的悬浮窗


floatingManager.getFloating("1");


关闭 key 对应的悬浮窗


floatingManager.closeFloating("1");


关闭所有悬浮窗


floatingManager.closeAllFloating();



单悬浮窗创建


单悬浮窗可用于某个页面中,页面退出后关闭即可。


class CustomPage extends StatefulWidget {
  const CustomPage({Key? key}) : super(key: key);
  @override
  _CustomPageState createState() => _CustomPageState();
}
class _CustomPageState extends State<CustomPage> {
  late Floating floating;
  @override
  void initState() {
    super.initState();
    floating = Floating(const FloatingIncrement(),
        slideType: FloatingSlideType.onLeftAndTop,
        isShowLog: false,
        slideBottomHeight: 100);
    floating.open();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("功能页面"),
      ),
      body: Container(),
    );
  }
  @override
  void dispose() {
    floating.close();
    super.dispose();
  }
}


添加悬浮窗各项回调


var oneListener = FloatingListener()
  ..openListener = () {
    print('显示1');
  }
  ..closeListener = () {
    print('关闭1');
  }
  ..downListener = (x, y) {
    print('按下1');
  }
  ..upListener = (x, y) {
    print('抬起1');
  }
  ..moveListener = (x, y) {
    print('移动 $x  $y  1');
  }
  ..moveEndListener = (x, y) {
    print('移动结束 $x  $y  1');
  };
floatingOne.addFloatingListener(oneListener);


其他使用方式


使用方式

悬浮窗对应方法

全局悬浮窗管理对应方法


相关文章
|
6月前
|
安全 数据安全/隐私保护 Android开发
Flutter应用程序加固的问题及解决方案
Flutter应用程序加固的问题及解决方案
112 0
|
Android开发 Windows
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(一)
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(一)
259 0
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(一)
|
1月前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
71 7
|
3月前
|
存储 缓存 搜索推荐
Flutter开发者必读:sp_util - SharedPreferences的终极解决方案
Flutter开发者必读:sp_util - SharedPreferences的终极解决方案
71 0
|
5月前
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
70 0
|
11月前
|
安全 数据安全/隐私保护 Android开发
🚀Flutter应用程序加固的问题及解决方案
在移动应用开发中,为了保护应用程序的安全性,开发者需要对应用进行加固。在使用Flutter技术进行应用程序开发时,也需要注意应用程序的安全问题和加固方案。本文将介绍在Flutter应用程序加固过程中可能出现的问题,并提供相应的解决方案。通过学习本文,开发者可以更好地保护Flutter应用程序的安全性,提供更加安全的应用程序给用户使用。
Flutter特别耗性能的组建以及解决方案
Flutter 中使用起来耗性能的组件主要有以下几个: 1. 频繁重绘的组件,如 AnimatedBuilder、AnimatedContainer、AnimatedOpacity 和 AnimatedPositioned 等。 2. 布局复杂的组件,如 Table、Wrap 和 Flow 等,因为它们需要进行大量计算来确定子控件的位置和大小。
Flutter特别耗性能的组建以及解决方案
【Flutter框架】Flutter项目对于手势的运用以及单独指针、消歧问题的解决方案
【Flutter框架】Flutter项目对于手势的运用以及单独指针、消歧问题的解决方案
|
开发工具 iOS开发 Perl
关于flutter_module嵌入ios原生项目报错:dyld: Library not loaded: @rpath/App.framework/App解决方案
上个星期,突然有一位做flutter开发的小伙伴添加了我的微信,说他的项目中报dyld: Library not loaded: @rpath/App.framework/App这个错误,说是采用我之前的文章Flutter-module嵌入iOS原生老项目中中的方法可以解决,但是他们是团队开发,路径写死对多人开发不够友好,问我有没有其他解决方案。
关于flutter_module嵌入ios原生项目报错:dyld: Library not loaded: @rpath/App.framework/App解决方案
|
API 开发工具 Android开发
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(二)
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(二)
337 0
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(二)