Many iOS users have used this feature:

In the wechat chat window, long press a message, the pop-up box pops up, and select copy, forward… And so on.

Based on this requirement, I packaged a “WPopupMenu”.

WPopupMenu

Without further ado, above:

The constructor

As usual, let’s look at the constructor first:

WPopupMenu({
  @required this.onValueChanged,
  @required this.actions,
  @required this.child,
  this.pressType = PressType.longPress,
  this.pageMaxChildCount = 5,}) :assert(onValueChanged ! =null),
assert(actions ! =null && actions.length > 0),
assert(child ! =null);
Copy the code

Explain the parameters:

  1. Hanged: onValueChanged: callback if an action is selected, returns an int, if not selected, returns null if blank is clicked
  2. Actions: The type is a List, which is the “forward, copy” and so forth you see above
  3. Child: Say no more
  4. PressType: Click event. There are two types: long press or click event
  5. PageMaxChildCount: The popup box can have a maximum of several actions, default is 5, if the last page is less than 5, then the remaining several will equal the space (the same logic as wechat).

How to use

Directly in the need to use the control on the place, you can use, simple code as follows:

WPopupMenu(
  onValueChanged: (int value) {
    /// showSnackBar
  },
  actions: actions,
  child: Container(
    / / / omit...),),Copy the code

The code file is called “widget_w_popup_menu.dart”,

The Demo is popup_route_page.dart.

The last

Stay tuned for an article on the packaging logic for this component.

There are a few things left undone about this component:

  1. Popup box below the triangle
  2. It should pop down at the top

The full code has been uploaded to GitHub: github.com/wanglu1209/…