带箭头的颤动弹出窗口

Question

我在下面附上了一张照片，我需要一个弹出窗口小部件，如下图所示，我是新手，并且已经研究了现有的小部件，但似乎找不到任何类似的东西。有人可以指导我如何创建这个吗？

谢谢

Answer 1

请检查此包https://github.com/chinabrant/popup_menu
\n如果它不符合您的要求，您可以 fork 并执行您自己的操作。

\n\n

绘制三角形在这里\n https://github.com/chinabrant/popup_menu/blob/master/lib/triangle_painter.dart

\n\n

完整代码

\n\n

import \'package:flutter/material.dart\';\nimport \'package:popup_menu/popup_menu.dart\';\nimport \'package:popup_menu_example/gesture_demo.dart\';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  // This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: \'Flutter Demo\',\n      home: MyHomePage(title: \'Popup Menu Example\'),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  MyHomePage({Key key, this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n  PopupMenu menu;\n  GlobalKey btnKey = GlobalKey();\n  GlobalKey btnKey2 = GlobalKey();\n\n  @override\n  void initState() {\n    super.initState();\n\n    menu = PopupMenu(items: [\n      // MenuItem(title: \'Copy\', image: Image.asset(\'assets/copy.png\')),\n      // MenuItem(title: \'Home\', image: Icon(Icons.home, color: Colors.white,)),\n      MenuItem(\n          title: \'Mail\',\n          image: Icon(\n            Icons.mail,\n            color: Colors.white,\n          )),\n      MenuItem(\n          title: \'Power\',\n          image: Icon(\n            Icons.power,\n            color: Colors.white,\n          )),\n      MenuItem(\n          title: \'Setting\',\n          image: Icon(\n            Icons.settings,\n            color: Colors.white,\n          )),\n      MenuItem(\n          title: \'PopupMenu\',\n          image: Icon(\n            Icons.menu,\n            color: Colors.white,\n          ))\n    ], onClickMenu: onClickMenu, onDismiss: onDismiss, maxColumn: 1);\n  }\n\n  void stateChanged(bool isShow) {\n    print(\'menu is ${isShow ? \'showing\' : \'closed\'}\');\n  }\n\n  void onClickMenu(MenuItemProvider item) {\n    print(\'Click menu -> ${item.menuTitle}\');\n  }\n\n  void onDismiss() {\n    print(\'Menu is dismiss\');\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    PopupMenu.context = context;\n\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(widget.title),\n        actions: <Widget>[\n          // action button\n          IconButton(\n           key: btnKey,\n            icon: Icon(Icons.access_time),\n            onPressed: () {\n              maxColumn();\n            },\n          ),\n          IconButton(\n            key: btnKey2,\n            icon: Icon(Icons.memory),\n            onPressed: () {\n              maxColumn();\n            },\n          )\n        ],\n      ),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.spaceAround,\n          children: <Widget>[\n            Container(\n              child: GestureDetector(\n                onLongPress: () {\n                  //maxColumn();\n                },\n                child: MaterialButton(\n                  height: 45.0,\n                  //key: btnKey,\n                  child: Text(\'Show Menu\'),\n                ),\n              ),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n\n  void onGesturesDemo() {\n    Navigator.push(\n      context,\n      MaterialPageRoute(builder: (context) => GestureDemo()),\n    );\n  }\n\n  void checkState(BuildContext context) {\n    final snackBar = new SnackBar(content: new Text(\'\xe8\xbf\x99\xe6\x98\xaf\xe4\xb8\x80\xe4\xb8\xaaSnackBar!\'));\n\n    Scaffold.of(context).showSnackBar(snackBar);\n  }\n\n  void maxColumn() {\n    PopupMenu menu = PopupMenu(\n        // backgroundColor: Colors.teal,\n        // lineColor: Colors.tealAccent,\n        maxColumn: 3,\n        items: [\n          MenuItem(title: \'Copy\', image: Image.asset(\'assets/copy.png\')),\n          // MenuItem(\n          //     title: \'Home\',\n          //     // textStyle: TextStyle(fontSize: 10.0, color: Colors.tealAccent),\n          //     image: Icon(\n          //       Icons.home,\n          //       color: Colors.white,\n          //     )),\n          // MenuItem(\n          //     title: \'Mail\',\n          //     image: Icon(\n          //       Icons.mail,\n          //       color: Colors.white,\n          //     )),\n          MenuItem(\n              title: \'Power\',\n              image: Icon(\n                Icons.power,\n                color: Colors.white,\n              )),\n          MenuItem(\n              title: \'Setting\',\n              image: Icon(\n                Icons.settings,\n                color: Colors.white,\n              )),\n          MenuItem(\n              title: \'PopupMenu\',\n              image: Icon(\n                Icons.menu,\n                color: Colors.white,\n              ))\n        ],\n        onClickMenu: onClickMenu,\n        stateChanged: stateChanged,\n        onDismiss: onDismiss);\n    menu.show(widgetKey: btnKey);\n  }\n\n  //\n  void customBackground() {\n    PopupMenu menu = PopupMenu(\n        // backgroundColor: Colors.teal,\n        // lineColor: Colors.tealAccent,\n        // maxColumn: 2,\n        items: [\n          MenuItem(title: \'Copy\', image: Image.asset(\'assets/copy.png\')),\n          MenuItem(\n              title: \'Home\',\n              // textStyle: TextStyle(fontSize: 10.0, color: Colors.tealAccent),\n              image: Icon(\n                Icons.home,\n                color: Colors.white,\n              )),\n          MenuItem(\n              title: \'Mail\',\n              image: Icon(\n                Icons.mail,\n                color: Colors.white,\n              )),\n          MenuItem(\n              title: \'Power\',\n              image: Icon(\n                Icons.power,\n                color: Colors.white,\n              )),\n          MenuItem(\n              title: \'Setting\',\n              image: Icon(\n                Icons.settings,\n                color: Colors.white,\n              )),\n          MenuItem(\n              title: \'PopupMenu\',\n              image: Icon(\n                Icons.menu,\n                color: Colors.white,\n              ))\n        ],\n        onClickMenu: onClickMenu,\n        stateChanged: stateChanged,\n        onDismiss: onDismiss);\n    menu.show(widgetKey: btnKey2);\n  }\n}\n

\n\n

\n