Add: Popup style widget

Author: pdliuw

lib/component/main/MainPage.dart

@@ -63,6 +63,7 @@ class _MainState extends State<MainPage> {
       "Progress",
       "Segment",
       "DropDown",
+      "Popup",
     ];
     return _sortTitles;
   }
@@ -86,6 +87,7 @@ class _MainState extends State<MainPage> {
       "/MainProgressPage",
       "/SegmentPage",
       "/DropDownPage",
+      "/MainPopupPage",
     ];
     return _sortRouteNames;
   }

lib/main.dart

@@ -23,6 +23,7 @@ import 'package:flutter_app_sample/sample/drag/DragListPage.dart';
 import 'package:flutter_app_sample/sample/ink/ink_page.dart';
 import 'package:flutter_app_sample/sample/notifier/CardInfoPage.dart';
 import 'package:flutter_app_sample/sample/notifier/CardMainPage.dart';
+import 'package:flutter_app_sample/sample/popup/main_popup_page.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:provider/provider.dart';
 
@@ -120,6 +121,7 @@ class Test extends StatelessWidget {
               "/MainProgressPage": (_) => MainProgressPage(),
               "/SegmentPage": (_) => SegmentPage(),
               "/DropDownPage": (_) => DropDownPage(),
+              "/MainPopupPage": (_) => MainPopupPage(),
             },
           );
         },

lib/sample/popup/main_popup_page.dart

@@ -0,0 +1,158 @@
+import 'package:flutter/material.dart';
+import 'package:popup_menu/popup_menu.dart';
+
+///
+/// MainPopupPage
+class MainPopupPage extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return _MainPopupState();
+  }
+}
+
+///
+/// _MainPopupState
+class _MainPopupState extends State<MainPopupPage> {
+  GlobalKey btnKey = GlobalKey();
+  GlobalKey btnKey2 = GlobalKey();
+  GlobalKey btnKey3 = GlobalKey();
+
+  GlobalKey btnKey1Right = GlobalKey();
+  GlobalKey btnKey2Right = GlobalKey();
+  GlobalKey btnKey3Right = GlobalKey();
+
+  @override
+  Widget build(BuildContext context) {
+    PopupMenu.context = context;
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("Popup"),
+      ),
+      body: Row(
+        children: <Widget>[
+          Spacer(),
+          Column(children: <Widget>[
+            Spacer(),
+            RaisedButton.icon(
+              key: btnKey,
+              onPressed: () {
+                _createMenu(btnKey);
+              },
+              icon: Icon(Icons.folder_open),
+              label: Text("left top"),
+            ),
+            Spacer(),
+            RaisedButton.icon(
+              key: btnKey2,
+              onPressed: () {
+                _createMenu(btnKey2);
+              },
+              icon: Icon(Icons.folder_open),
+              label: Text("left center"),
+            ),
+            Spacer(),
+            RaisedButton.icon(
+              key: btnKey3,
+              onPressed: () {
+                _createMenu(btnKey3);
+              },
+              icon: Icon(Icons.folder_open),
+              label: Text("left bottom"),
+            ),
+            Spacer(),
+          ]),
+          Spacer(),
+          Spacer(),
+          Column(children: <Widget>[
+            Spacer(),
+            RaisedButton.icon(
+              key: btnKey1Right,
+              onPressed: () {
+                _createMenu(btnKey1Right);
+              },
+              icon: Icon(Icons.folder_open),
+              label: Text("right top"),
+            ),
+            Spacer(),
+            RaisedButton.icon(
+              key: btnKey2Right,
+              onPressed: () {
+                _createMenu(btnKey2Right);
+              },
+              icon: Icon(Icons.folder_open),
+              label: Text("right center"),
+            ),
+            Spacer(),
+            RaisedButton.icon(
+              key: btnKey3Right,
+              onPressed: () {
+                _createMenu(btnKey3Right);
+              },
+              icon: Icon(Icons.folder_open),
+              label: Text("right bottom"),
+            ),
+            Spacer(),
+          ]),
+          Spacer(),
+        ],
+      ),
+    );
+  }
+
+  _createMenu(GlobalKey globalKey) {
+    PopupMenu menu = PopupMenu(
+        backgroundColor: Colors.teal,
+        lineColor: Colors.tealAccent,
+        maxColumn: 3,
+        items: [
+          MenuItem(title: 'Copy', image: Image.asset('assets/avatar.jpg')),
+          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: globalKey);
+  }
+
+  void onClickMenu(MenuItemProvider item) {
+    print('Click menu -> ${item.menuTitle}');
+  }
+
+  void onDismiss() {
+    print('Menu is dismiss');
+  }
+
+  void stateChanged(bool isShow) {
+    print('menu is ${isShow ? 'showing' : 'closed'}');
+  }
+}

pubspec.yaml

@@ -77,6 +77,9 @@ dependencies:
 
   # navigation bar
   curved_navigation_bar: ^0.3.2
+
+  # popup menu
+  popup_menu: ^1.0.5
 dev_dependencies:
   flutter_test:
     sdk: flutter