搜索插件、代码仓与 APP 分类

o_popup 封面
插件详情v1.0.1

o_popup

覆盖在内容上的弹出层,点击返回按钮时会关闭并回到打开位置,或回到指针接触屏幕的位置。这意味着弹出层支持点击手势。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
41
喜欢数
26
Pub 分数
140

安装插件

flutter pub add o_popup

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

o_popup 是一个 Flutter 包,提供了一个叠加内容小部件,可通过按返回按钮或返回指针最初触碰屏幕的位置来关闭。它支持点击手势,非常适合对用户输入有自然响应的交互式弹窗。弹窗会平滑地动画进入并返回到原始位置,从而在各个平台上提升用户体验。它特别适用于上下文菜单、工具提示或针对 Android、iOS、Web、macOS、Windows 和 Linux 应用的临时覆盖层。

适合场景

  • 上下文操作菜单
  • 工具提示和提示
  • 临时信息叠加
  • 基于手势的弹出窗口
  • 无完整模态的类似模态交互
  • 快速设置面板

主要特点

  • 返回时自动关闭
  • 返回触摸点以取消
  • 平滑动画
  • 跨平台支持
  • 轻触手势识别
  • 可自定义的覆盖内容

适合对象

  • 开发交互式 UI 的开发者
  • 需要轻量级弹窗的应用
  • 跨平台移动和Web应用
  • 以用户体验为中心的界面,带有手势反馈
  • 简单的模态替代方案

使用建议

  • 可能需要仔细的定位逻辑
  • 不适合复杂的嵌套对话
  • 性能取决于叠加层的复杂性
  • 高级布局的自定义功能有限
  • 最好与简单、短暂的内容一起使用

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

License: MIT style: effective dart Travis CI


Description

An overlaid content, which closes itself into opening place (on back button) or into the position where the pointer contacted the screen. It means, popup supports tap gesture!

Implementation

First of all, you need to install the package.

The second step is to create a popup. I recommend to use OPopupTrigger class in order to simply create the popup as in the example. It pushes OPopupOverlay widget into Navigation stack, thus a user can dismiss the popup by back button or by tapping anywhere on a screen. In the OPopupTrigger class you can also set barrierDismissible to false (to prevent dismissing popup by taping anywhere) and for example create a button, which pops the popup from Navigator stack (Navigator.of(context).pop()) in order to close the popup - like buttons in the example.

Customization

If you do not want to use OPopupContent class as a content of a popup triggered by OPopupTrigger you should skip popupHeader and popupActionRow fields and set your own widget to popupContent field. It gives you an ability to fully customize the content of the popup: size, alignment etc.

You can also overwrite OPopupContent (create a class which extends OPopupContent), customize it inside your own class and set your version of OPopupContent to OPopupTrigger.popupContent (also do not set popupHeader and popupActionRow in order to omit original OPopupContent).

Documentation

Extended documentation is available on pub.dev.

Commercial Use

If you use this code in commercial project, please donate me via GitHub Sponsors. I do the same for packages which I use, because it ensures stable development for all of us!

所属分类

源码仓库

使用此插件的项目

暂无相关数据。