This project was writed with pure dart code,which means it's support both iOS and Android.

Related tags

Templates popup_menu
Overview

pub package

This project was writed with pure dart code,which means it's support both iOS and Android.

Screenshot

Todo

  • show/hide animation

Usage

You can find the demo at the 'example' folder.

First, you should set the context at somewhere in you code. Like below:

PopupMenu.context = context;
PopupMenu menu = PopupMenu(
      items: [
        MenuItem(title: 'Copy', image: Image.asset('assets/copy.png')), 
        MenuItem(title: 'Home', image: Icon(Icons.home, color: Colors.white,)), 
        MenuItem(title: 'Mail', image: Icon(Icons.mail, color: Colors.white,)), 
        MenuItem(title: 'Power', image: Icon(Icons.power, color: Colors.white,)),
        MenuItem(title: 'Setting', image: Icon(Icons.settings, color: Colors.white,)), 
        MenuItem(title: 'Traffic', image: Icon(Icons.traffic, color: Colors.white,))], 
      onClickMenu: onClickMenu, 
      stateChanged: stateChanged,
      onDismiss: onDismiss);

menu.show(rect: rect);

void stateChanged(bool isShow) {
  print('menu is ${ isShow ? 'showing': 'closed' }');
}

or

PopupMenu menu = PopupMenu(
        backgroundColor: Colors.teal,
        lineColor: Colors.tealAccent,
        maxColumn: 3,
        items: [
          MenuItem(title: 'Copy', image: Image.asset('assets/copy.png')),
          MenuItem(
              title: 'Home',
              textStyle: TextStyle(fontSize: 10.0, color: Colors.tealAccent),
              image: Icon(
                Icons.home,
                color: Colors.white,
              )),
          MenuItem(
              title: 'Mail',
              image: Icon(
                Icons.mail,
                color: Colors.white,
              )),
          MenuItem(
              title: 'Power',
              image: Icon(
                Icons.power,
                color: Colors.white,
              )),
          MenuItem(
              title: 'Setting',
              image: Icon(
                Icons.settings,
                color: Colors.white,
              )),
          MenuItem(
              title: 'PopupMenu',
              image: Icon(
                Icons.menu,
                color: Colors.white,
              ))
        ],
        onClickMenu: onClickMenu,
        onDismiss: onDismiss);
    menu.show(widgetKey: btnKey2);
Comments
  • Listen to menu state

    Listen to menu state

    Hi, really love your package but there's no available method or functionality to listen to the open and close state of the popup menu in order to dynamically open or close the menu when required? Thanks

    feature 
    opened by kwado-tech 4
  • offset is wrong when arrow down

    offset is wrong when arrow down

    fixed:

    Offset _calculateOffset(BuildContext context) { double dx = _showRect.left + _showRect.width / 2.0 - menuWidth() / 2.0; if (dx < 10.0) { dx = 10.0; }

    double dy = _showRect.top - menuHeight();
    if (dy <= MediaQuery.of(context).padding.top + 10) {
      // The have not enough space above, show menu under the widget.
      dy = arrowHeight + _showRect.height + _showRect.top;
      _isDown = false;
    } else {
      /// #######需要加上这行代码,修复三角形的高度
      dy -= arrowHeight; 
      _isDown = true;
    }
    
    return Offset(dx, dy);
    

    }

    opened by nicorobine 3
  • userInfo missing in MenuItemProvider

    userInfo missing in MenuItemProvider

    The MenuItem has the userInfo property

    MenuItem({this.title, this.image, this.userInfo, this.textStyle});
    

    However this is missing in the OnClick.. MenuItemProvider

      void onPopMenuClick(MenuItemProvider item) {
    
        if (item.userIfno == "Note"){ \\ <<<<<<< MISSING......
          Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => NoteScreen(job_id: this.job.job_id, sys_track_id: 0,),
                    ),
                  );
        }
    
      }
    
    opened by pedromorgan 2
  • Multiple widgets used the same GlobalKey.

    Multiple widgets used the same GlobalKey.

    This error occur when try to showPopup with ListView.builder

      ListView.builder(
            itemCount: list.length,
            itemBuilder: (context, index) {
             return MaterialButton(
                key:  btnKey,
                child: ListTile(
                  title: Text("Title"),
                  subtitle: Text("Title"),
                  onTap: showPopup,
                ),
                onPressed: showPopup,
              );
            },
          )
    
    opened by pkmangukiya 1
  • demo caused an exception in dismiss function

    demo caused an exception in dismiss function

    flutter: menu is showing flutter: Menu is dismiss flutter: menu is closed flutter: ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════ flutter: The following assertion was thrown while handling a gesture: flutter: 'package:flutter/src/widgets/overlay.dart': Failed assertion: line 133 pos 12: '_overlay != null': flutter: is not true. flutter: flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially flutter: more information in this error message to help you determine and fix the underlying cause. flutter: In either case, please report this assertion by filing a bug on GitHub: flutter: https://github.com/flutter/flutter/issues/new?template=BUG.md flutter: flutter: When the exception was thrown, this was the stack: flutter: #2 OverlayEntry.remove (package:flutter/src/widgets/overlay.dart:133:12) flutter: #3 PopupMenu.dismiss (package:popup_menu/popup_menu.dart:329:12) flutter: #4 PopupMenu.buildPopupMenuLayout.. (package:popup_menu/popup_menu.dart:157:11) flutter: #5 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24) flutter: #6 TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:365:11) flutter: #7 TapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:312:7) flutter: #8 GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:156:27)

    opened by nicorobine 1
  • Close menu on gestures

    Close menu on gestures

    Thanks a whole lot for your quick responses and dedication to this project. I would suggest an improvement of closing the popup menu if other gestures like swipe/scroll (on page) occurs. This is because the menu only closes if a user taps on the menu item or outside the menu but not other gestures (like scroll through a list the menu still remains open). Thanks

    bug 
    opened by kwado-tech 1
  • 呼出菜单位置偏移

    呼出菜单位置偏移

    Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.18363.720], locale zh-CN)

    [√] Android toolchain - develop for Android devices (Android SDK version 29.0.2) [√] Android Studio (version 3.6) [√] Connected device (1 available)

    • No issues found!

    —————————— 呼出菜单会出现在页面左上角而不是在点击的widget上,context和key都使用了。

    opened by byteslaves 0
  • Last line of the menu is not drawn

    Last line of the menu is not drawn

    Hi, I'm creating a menu as follows:

                            PopupMenu menu = PopupMenu(
                                maxColumn: 6,
                                lineColor: Colors.grey,
                                items: repository.getAllUsers().map((e) => MenuItem(
                                    title: repository.getUserNameForId(e.id),
                                )).toList(),
                                onClickMenu: (item) {
    
                                }
                            );
                            menu.show(widgetKey: key);
    
    

    But the last line is not drawn. Please see attached: Screen Shot 2020-10-07 at 17 10 32

    This error occurs when creating all number of column number

    Please advise

    opened by dorsamet 0
  • offset.x is not suitable on somecase.

    offset.x is not suitable on somecase.

    The 'menu content' is a Positioned component, and it center.x was equals parent widget's center.x, so when parent's postion is closer to screen's right side, set Positioned's left = offset.dx will cause a part of menu content is hidden. I already change code to left = 10 on my project and feel better.

    opened by Moon1102 0
Owner
吴述军 Brant
iOS Developer, Former Android Developer, Love Flutter.
吴述军 Brant
🎬 A movie catalog app for both Android & IOS ~ Flutter.io project in Dart | Dart, Bloc, Movies

Movie Catalog App ?? Browse through movies from the YIFY api Getting Started For help getting started with Flutter, view our online documentation. Tod

Jonas De Vrient 49 Nov 21, 2022
Schedule & run Dart code in the background on both Android & iOS

flt_worker The flt_worker plugin allows you to schedule and execute Dart-written background tasks in a dedicated isolate, by utilizing the WorkManager

Yingxin Wu 26 Nov 27, 2022
A new flutter plugin with native wrappers that attempts to prove data transfer over sound by means of Frequency modulation

A new flutter plugin with native wrappers that attempts to prove data transfer over sound by means of Frequency modulation

Chiziaruhoma Ogbonda 36 Aug 31, 2022
Xtyle means "Multilingual-style" - Flutter Package

Xtyle Xtyle means "Multilingual-style". As a design requirement, there are many requests for different fonts in English and native language. This pack

Theo / Taeyoon Kang 2 Sep 13, 2022
Telnyx flutter - A Flutter package for both android and iOS which helps developers with Telnyx API services

Telnyx Flutter A Flutter package for both android and iOS which helps developers

Kfir Matityahu 0 Jan 23, 2022
A grid that supports both dragging and tapping to select its items

drag_select_grid_view A grid that supports both dragging and tapping to select its items. Basic usage DragSelectGridView constructor is very similar t

Hugo Passos 121 Dec 11, 2022
Flutter plugin, support android/ios.Support crop, flip, rotate, color martix, mix image, add text. merge multi images.

image_editor The version of readme pub and github may be inconsistent, please refer to github. Use native(objc,kotlin) code to handle image data, it i

FlutterCandies 317 Jan 3, 2023
A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

PengHui Li 112 Nov 11, 2022
Flutterbodydetection - A flutter plugin that uses MLKit on iOS/Android platforms to enable body pose and mask detection using Pose Detection and Selfie Segmentation APIs for both static images and live camera stream.

body_detection A flutter plugin that uses MLKit on iOS/Android platforms to enable body pose and mask detection using Pose Detection and Selfie Segmen

null 18 Dec 5, 2022
Write iOS&Android Code using Dart. This package liberates you from redundant glue code and low performance of Flutter Channel.

Dart_Native Dart_Native operates as both a code generator tool and a bridge to communicate between Dart and native APIs. Replaces the low-performing F

DartNative 893 Jan 4, 2023
A mobile application for both android and ios made for work out and fitness purpose

It's a mobile application for both android and ios made for work out and fitness purpose with many features you can read about here, but it can be used under all subject you want, well architected code and organized !

Gwhyyy 20 Dec 18, 2022
Flutter Local Notifications - Learn how to implement local notifications into both Android and iOS using flutter_local_notifications plugin.

Flutter Local Notifications Example Flutter Local Notifications - Learn how to implement local notifications into both Android and iOS using flutter_l

Sandip Pramanik 12 Nov 29, 2022
A Flutter Accident reporting App working in both iOS and Android

Flutter Accident Reporting App A Flutter Accident reporting App working in both iOS and Android.This project total size of all Dart files is 4714 bite

sk shamimul islam 32 Oct 13, 2022
A horoscope forecasting application for both Android and iOS

Zodoscope A Horoscope Forcasting Application Built with Flutter, for Android and iOS API used: http://horoscope-api.herokuapp.com/ Key Features All Zo

null 15 Sep 25, 2022
A Basic Currency Converter made for both iOS and Android using the flutter.io platform

FlutterCurrencyConverter A Basic Currency Converter made for both iOS and Android using the flutter.io platform This app uses the ExchangeRate-API for

Carlo Gabriel Villalon Tapales 40 Nov 23, 2022
Notefy - Task Saving App for both Android and iOS

Assignment for Flutter Developers Goal of the assignment is to: -> Show the capa

Atabek 0 Jan 25, 2022
A Flutter plugin to get location updates in the background for both Android and iOS

Background Location A Flutter plugin to get location updates in the background for both Android and iOS (Requires iOS 10.0+). Uses CoreLocation for iO

Ali Almoullim 181 Jan 4, 2023
Klutter plugin makes it possible to write a Flutter plugin for both Android and iOS using Kotlin only.

The Klutter Framework makes it possible to write a Flutter plugin for both Android and iOS using Kotlin Multiplatform. Instead of writing platform spe

Gillian 33 Dec 18, 2022
TicTacToe Using flutter. For both android and ios

mt_tictactoe A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Asim Sidd 3 Nov 27, 2022