long_press_preview 0.0.7
long_press_preview: ^0.0.7

Flutter Android iOS

Long press and show draggable dialog of any widget. Draggable dialog and multi gesture callback provides. Drag up or Drag down close dialog.

long_press_preview #

pub package

ezgif-6-a56436a2339f.gif

用于任意组件长按并展示可拖动弹窗
Long press and show draggable dialog of any widget.

可拖动弹窗以及多手势回调
Draggable dialog and multi gesture callback provides.

上拉或者松开关闭弹窗
Drag up or Drag down close dialog.

web demo preview #

https://a62527776a.github.io/flutter-longpress-preview-demo/index.html

example apk #

https://a62527776a.github.io/flutter-longpress-preview-demo/app-release.apk

install #

add next line to pubspec.yaml

long_press_preview: ^0.0.7
$ flutter pub get

How to use #

import 'package:long_press_preview/long_press_preview.dart';

包裹你的子组件并且构建你的弹窗样式 #

Wrap your child widget and build your dialog widget

LongPressPreview(
    child: Container(height: 30, width: 30, color: red),
    content: Container(height: 300, width: 300, child: Text('这是一个String')),
    // dialogSize: Size(300, 300), // Optional
    onFingerCallBack: onFingerCallBack,
    // 单击组件时回调,请不要自己嵌套GestureDetector组件
    // Call back when the widget is clicked, please do not nest GestureDetector widget yourself
    onTap: () => () => Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
)

onFingerCallBack 将会回调手势事件以及卸载实例的函数 #

onFingerCallBack Will callback gesture events and uninstall the instance

// This is when the fingers are released uninstall dialog and navigator to next page example
// 这是手指松开时卸载弹窗并且跳转到下一个页面的🌰
void onFingerCallBack(LongPressPreviewFingerEvent event, Function dispose) {
    switch (event) {
        // 弹窗创建时回调 (dispose函数是空的)
        // dialog create event callback (dispose function is empty)
        case LongPressPreviewFingerEvent.long_press_start:
        break;
        // 手指将弹窗滑动到上方时回调
        // Call back when you slide the dialog with your finger
        case LongPressPreviewFingerEvent.long_press_drag_top:
        break;
        // 手指松开的时候回调
        // finger leave screen callback
        case LongPressPreviewFingerEvent.long_press_end:
        dispose();
        Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
        break;
        // 手指滑动到底部时的回调(dispose函数是空的)
        // finger sliding to the bottom callback(dispose is empty)
        case LongPressPreviewFingerEvent.long_press_cancel:
        break;
        default:
    }
}

Quick reference #

PropertyWhat does it do(cn)What does it do(en)
child长按这个组件将弹窗口Long press on this widget will pop up dialog
content弹窗展示的内容display to user by content
onFingerCallBack手势的回调gesture callback
dialogSize弹窗的大小(可选 default 300x300)dialog size (optional default 300x300)
onTap单击组件时回调,请不要自己嵌套GestureDetector组件Call back when the widget is clicked, please do not nest GestureDetector widget yourself

onFingerCallBack params #

onFingerCallBack(LongPressPreviewFingerEvent event, Function dispose)

onFingerCallBack拥有两个参数 第一个参数类型是LongPressPreviewFingerEvent 这是一个枚举值 拥有long_press_start, long_press_end, long_press_cancel, long_press_drag_top四个值。 #

onFingerCallBack has tow param. One is LongPressPreviewFingerEvent. This is an enumeration with four types. long_press_start, long_press_end, long_press_cancel, long_press_drag_top

enum LongPressPreviewFingerEvent Property | What does it do(cn) | What does it do(en) ---------------- |---------------- | --------------- long_press_start | 创建弹窗时回调 | Callback when create dialog long_press_end | 松开手指时回调 | Callback when release your finger long_press_cancel | 滑到下方时回调 | Callback when slider to bottom long_press_drag_top | 滑到上方时回调 | Callback when slider to top

第二个参数是一个函数,当第一个参数的类型为LongPressPreviewFingerEven.long_press_drag_top or LongPressPreviewFingerEven.long_press_end,调用第二个参数将卸载弹窗的实例。否则将什么也不会发生。这用于您希望在拖动到上方或者长按结束时卸载弹窗并且做其他事情(比如说跳转到下一个页面) #

the second param is a function. when first params is LongPressPreviewFingerEven.long_press_drag_top or LongPressPreviewFingerEven.long_press_end, call the second param will uninstall dialog instance. Otherwise nothing will happen.This is used if you want to unload the pop-up window and do something else (such as jump to the next page) when you drag above or at the end of a long press

TODO:

  • 优化弹窗动画

  • onTap的触发在touch动画执行一遍后 而不是现在的50ms后

  • 优化一下touch动画

2
likes
80
pub points
23%
popularity

Long press and show draggable dialog of any widget. Draggable dialog and multi gesture callback provides. Drag up or Drag down close dialog.

Homepage

Documentation

API reference

Uploader

a13868300128a@gmail.com

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on long_press_preview