Flutter悬浮窗组件之实现快捷换肤、切换语言等开发调试功能模块

2023-11-13

一、最近开发一个App具有黑白两个主题和切换语言的功能,所以在开发的时候一个页面总是要不断的去切换主题和语言来查看功能是否正常。

为了提高这个开发效率突然想到可以在应用上增加一个悬浮窗组件然后实现主题切换和语言切换的功能,这样在任意一个页面就可以快速的查看效果。不用来回切换到设置页面内去进行切换了。

二、 实现的效果

悬浮窗组件也可以随意进行拖动,打开一个新的页面悬浮窗也始终是在最顶部的

这里稍微参考了一下滴滴的Dokit-Flutter悬浮窗实现

三、功能实现

  • 创建一个DeveloperWidget继承StatefulWidget组件即可
  • 要达到悬浮窗的效果这里需要使用系统的Overlay组件

具体实现代码

///省略部分代码
@override
Widget build(BuildContext context) {
  return Directionality(
    textDirection: TextDirection.ltr,
    child: Overlay(
      initialEntries: [
        OverlayEntry(
          builder: (c) {
            return widget.child;
          },
        ),
        OverlayEntry(
          builder: (c) {
            return Positioned(
              left: _offset.dx,
              top: _offset.dy,
              child: Draggable(
                childWhenDragging: Container(),
                feedback: _developerWidget(),
                child: _developerWidget(),
                onDragEnd: (DraggableDetails detail) {
                  setState(() {
                    _offset = detail.offset;
                  });
                },
              ),
            );
          },
        ),
      ],
    ),
  );
}
///悬浮窗组件内具体自己要实现的功能组件,此处省略
Widget _developerWidget(){

}
  • 最外层使用了Directionality组件,这个是必须要的;因为我们这个组件最终是如下使用的,让MaterialApp成为这个DeveloperWidget组件的子元素
DeveloperWidget(
  child: MaterialApp(
    localizationsDelegates: const [
      GlobalMaterialLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate
    ],
    home: MainPage(),
  ),
);
  • 如果不让MaterialApp成为子元素,那么在跳转一个新的页面时;我们的悬浮窗就不能在最顶层了

悬浮窗拖动功能实现

  • 拖动就可以直接使用系统的Draggable组件来进行处理 非常的方便

四、这样一个简单的悬浮窗组件就实现了, 这里我只需要实现切换主题和切换语言的功能;如果你的App也有类似这样的需求你也可以把功能添加进悬浮窗内这样就可以快速轻松开发了。

本文源代码下载地址

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter悬浮窗组件之实现快捷换肤、切换语言等开发调试功能模块 的相关文章

  • Android 通知栏和标题栏的大小?

    android 有没有办法获取通知栏和标题栏的大小 目前我通过以下方式获取显示宽度和高度 Display display getWindowManager getDefaultDisplay int width display getWid
  • 造型 Sherlock ActionMode 背景

    似乎无法设置 ActionMode 背景的样式 我已经覆盖了操作栏背景 但设置 ActionMode 背景似乎不起作用
  • 恐慌:缺少“x86”CPUS 的模拟器引擎程序

    我正在尝试运行我的第一个 Android Hello World 程序 但在这样做时 Android studio 给出了一个错误 以下是所有详细信息 IDE Android Studio 操作系统 OSX 版本 10 9 5 命令 Use
  • setRotation(90) 以肖像模式拍照不适用于三星设备

    根据文档 设置旋转 90 http developer android com reference android hardware Camera Parameters html setRotation 28int 29应旋转捕获的 JPE
  • onCheckedChanged 自动调用

    我在回收器视图中有一个开关 从数据库检索数据后 数据显示在回收器视图中 当回收器视图打开时 我读取数据库 如果数据库中的字段为 Y 我启用开关 否则禁用开关 现在的问题是 onCheckedchanged 监听器也被调用 我希望仅当用户手动
  • Android:View类中getTag()和setTag()的用途

    public void setTag final Object tag mTag tag public Object getTag return mTag 这是 Android 中 View 类的两个方法 以下分别是这两种方法的官方文档 R
  • 如何在gradle中执行jar文件?

    当我使用 ant 构建我的 android 项目时 我需要这样的任务
  • 隐藏加载失败的图片

    我有一个 Android 应用程序 它生成一些在本地 Webkit 视图中呈现的 HTML HTML 生成的细节实际上并不那么重要 除了 大部分来自一个地方 我无法改变它 HTML 周围的模板 包括页眉 页脚 HEAD 等 CSS 和 Ja
  • 如何隐藏 Android Spinner 中的一项

    我正在寻找一种方法来隐藏 Android 旋转小部件中的一个项目 这将允许您模拟没有选择任何项目的微调器 并确保始终为每个选择的项目调用 onItemSelected 回调 如果隐藏项目是 当前 项目 通常 微调器中始终有一项不会生成回调
  • 如何在 Windows 中压缩 apk 文件

    我已经签署并打包了 Xamarin 应用程序因此使用 Visual Studio 创建了 apk 文件 如何在 Windows 中压缩对齐此文件 确保您拥有Android SDK 构建工具安装然后检查你的SDK安装在哪里我的安装在哪里C P
  • intel x86 模拟器加速器(HAXM 安装程序)修订版 6.0.5 显示与 Windows 不兼容

    This a screenshot of the sdk manager message showing the emulator as incompatible with windows 我使用的是android studio 目前版本2
  • android:web服务图像替换为本地文件夹中的图像

    我进入了 Android 聊天应用程序的最后阶段 我在使用图像和网络服务时遇到了一些问题 因此 当我选择图像并将该图像发送到 Web 服务时 我从服务获取 URL 我如何将该网址转换为本地文件夹中的图像 我很困惑如何才能使其发挥作用 我想在
  • C# Response.Write pdf 不适用于 Android 浏览器

    我目前在 Android 环境中使用 pdf 导出时遇到了巨大的问题 我正在使用报告查看器控件将报告呈现为字节数组 接下来我使用response binarywrite方法将字节流输出到浏览器 这适用于所有浏览器以及 iPhone 和 iP
  • Cordova 的内容安全策略未加载外部脚本和样式表(404 错误)

    我目前将 Cordova 的 Content Security Policy 元标记设置为 如果我运行 Android 模拟器 我会看到以下错误 拒绝加载样式表 https min css https min css 因为它违反了以下内容安
  • 以编程方式列出意图过滤器

    在 android Activity 中 有没有一种方法可以以编程方式列出它已注册的活动
  • 运行adb命令时出现错误3221226356

    我在使用 Android ADB 时开始发现问题 本质上 在 Windows 10 计算机上 如果我在命令行运行 adb exe P 5037 s emulator 5554 shell getprop ro build version s
  • 在 SQLite 中加密数据

    如何加密我的数据 就我研究的解决方案而言 有两种方法 使用android提供的算法加密数据 我使用android提供的 Cipher 来加密我的数据 但我在检索大量记录的数据时遇到问题 导致应用程序的性能显着降低 我对整个数据库进行了编码
  • 无法从新版 Google 相册应用中同时选择照片和视频

    Google 相册更新后 我无法同时选择视频和照片 如果我使用单个 视频 或 图像 意图 它会像平常一样工作 在视频 照片意图中 它忽略第二个参数 如果第一个是视频 它将是视频意图 如果它是照片 您将建议选择照片 Intent intent
  • Android 折叠工具栏在折叠时没有隐藏其他元素

    我在 Android 上有一个布局 支持设计折叠工具栏 其中包含 TextView 但是当我折叠工具栏时 一些带有工具栏标题的 TextView 我想隐藏所有其他内容 而不是工具栏和标题 这是我的布局
  • 如何调整图像大小而不模糊,或使用毕加索

    我需要帮助来改进我的代码 我在做什么 主活动中有一个按钮 单击时 用户选择图像 之后 图像通过意图传递到另一个活动 add image java 并显示在图像视图中 之后我将图像发送到服务器 我的问题 1 我想要将路径图像发送到第二个意图然

随机推荐

  • java基于BufferedImage进行图片数字识别预处理

    参考文章链接 1 https blog csdn net kobesdu article details 8142068 2 https blog csdn net fjssharpsword article details 5265184
  • 从此刻开始走进HTML的大门!!!

    文章目录 什么是HTML呢 HTML的结构又是怎么样的呢 学习HTML的标签 标题标签 段落标签 文本格式化标签 换行标签 字符实体 容器标签 图片标签 超链接标签 列表标签 什么是HTML呢 HTML 英文全称是 Hyper Text M
  • kmeans算法和kmeans++

    kmeans算法及其优化改进 kmeans聚类算法 算法原理 kmeans的算法原理其实很简单 我用一个最简单的二维散点图来做解释 如上图 我们直观的看到该图可聚成两个分类 我们分别用红点和蓝点表示 下面我们模拟一下Kmeans是怎么对原始
  • 桌面研究-数据源

    文章目录 1 各国每年人口统计表 2 各国年龄结构表 3 国家简介 4 城镇化率 5 美国房屋统计数据 6 各国教育水平 7 住房类型 8 家庭结构 家庭人数 9 恩格尔系数 10 IMF 人均GDP PPP人均GDP 1 各国每年人口统计
  • 自动化测试需要学什么?二十八岁功能想转自动化现实吗?

    先回答一下后面那个问答 二十八岁还能从功能转自动化吗 很多接触软件测试都是从功能测试开始的 但是功能测试的薪资会比自动化少很多 所以就想要要学习自动化 从功能测试转到做自动化 其实这是完全来的及的 花上几个月时间学习自动化测试 造福以后 这
  • 智能化里面计算机网络设计思路,浅谈云机房网络的建设和维护及思路分析

    徐振宇 张欣 摘要 现代机房网络管理过程中 云技术的应用效果非常的显著 该文先对机房中的云技术应用实践中进行分析 并在此基础上就云机房网络的建设及其维护和设计思路 谈一下个人的观点和认识 以供参考 关键词 机房 云技术 网络建设 维护 设计
  • Blob 文件下载对应的常见 MIME 类型列表

    Blob 对象表示一个不可变 原始数据的类文件对象 它的数据可以按文本或二进制的格式进行读取 也可以转换成 ReadableStream 来用于数据操作 在 JS 中通常使用 Blob 进行文件下载保存 new 转换过程中需要指定下载文件
  • BurpSuite Proxy 给代理设置上层代理

    1 简单描述 正常情况而言 使用BurpSuite时数据包的经过流程为 浏览器 BurpSuite Repeater Intruder gt BurpSuite Proxy gt 目标服务器 这个时候其实还是本机发出的流量 我们想让流量由其
  • vue环境变量配置——process.env(详细)

    目录 一 背景 二 配置环境的实现原理 三 使用步骤 3 1安装依赖 3 2创建 env dev 和 env prod两个文件 3 3设置项目启动时默认的环境 3 4查看环境是否配置成功 一 背景 在用vue框架时 经常用到两种环境 一种是
  • 智能指针auto_ptr

    智能指针 auto ptr 这个名字听起来很酷是不是 其实auto ptr 只是C 标准库提供的一个类模板 它与传统的new delete控制内存相比有一定优势 但也有其局限 本文总结的8个问题足以涵盖auto ptr的大部分内容 1 au
  • DVWA-Brute Force

    Brute force 暴力破解 是一种试图通过尝试所有可能的组合 通常是密码 来获取敏感信息或破解加密的技术或方法 这种攻击方法通常被用来破解密码 对系统进行入侵或访问受限资源 暴力破解攻击的原理是通过迭代尝试各种可能的组合 例如密码字典
  • 2023前端面试题------JS 面试题(1)

    2023前端面试题 JS面试题 三 JS高频面试题 1 介绍JS有哪些内置对象 2 如何最小化重绘 repaint 和回流 reflow 3 Javascript作用域链 4 数据请求 5 跨域和同源策略 6 面向对象 7 闭包 8 数组去
  • rtp协议分析

    感谢原作者 http blog csdn net rootusers article details 41864387 网络模型 网络通信分为7层 OSI 是一个理论模型 由高到低分别是 应用层 文件传输 电邮 文件服务等 HTTP Tel
  • 【华为OD机试】响应报文时间【2023 B卷

    华为OD机试 真题 点这里 华为OD机试 真题考点分类 点这里 题目描述 IGMP 协议中 有一个字段称作最大响应时间 Max Response Time HOST收到查询报文 解折出 MaxResponsetime 字段后 需要在 0 M
  • wps插入图片显示不全、混乱

    问题如下 原因 格式混乱 解决办法 1 统一格式 使用格式刷统一文档的格式 2 Ctrl A 全选 重新选择行距 3 重新粘贴图片 选择嵌入型
  • 从0到1框架搭建,Python+Pytest+Allure+Git+Jenkins接口自动化框架(超细整理)

    目录 导读 前言 一 Python编程入门到精通 二 接口自动化项目实战 三 Web自动化项目实战 四 App自动化项目实战 五 一线大厂简历 六 测试开发DevOps体系 七 常用自动化测试工具 八 JMeter性能测试 九 总结 尾部小
  • Grokking the System Design Interview: 如何应对系统设计面试

    拥有良好的系统设计能力 是一个优秀程序员的必要素质 当然更重要的是 越来越多的公司在面试中考察系统设计能力 尤其是外企巨头 如谷歌 亚马逊 微软等 这些公司对于社招的软件工程师往往有这方面的要求 但是系统设计和算法题不一样 它考察的是程序员
  • Unit sshd.service could not be found.

    错误原因 刚安装了Ubuntu18 04系统 用Xshell连接服务器失败 因为服务器没有开启 可被远程连接的功能 指令输入 systemctl status sshd 然后出现了标题上的错误 解决方法 一 检测bug原因 ps e gre
  • 接口自动化入门-TestNg

    目录 1 TestNg介绍 2 TestNG安装 3 TestNG使用 3 1 编写测试用例脚本 3 2 创建TestNG xml文件 1 创建testng xml文件 2 修改testng xml 4 测试报告生成 1 TestNg介绍
  • Flutter悬浮窗组件之实现快捷换肤、切换语言等开发调试功能模块

    一 最近开发一个App具有黑白两个主题和切换语言的功能 所以在开发的时候一个页面总是要不断的去切换主题和语言来查看功能是否正常 为了提高这个开发效率突然想到可以在应用上增加一个悬浮窗组件然后实现主题切换和语言切换的功能 这样在任意一个页面就