As per image I want popup in app-bar in flutter

CodePudding user response：

Try the below code and you will store the SVG image in image directory

actions[
    Padding(
          padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 5),
          child: GestureDetector(
              child: SvgPicture.asset(
                "images/three_dot.svg",
                height: 30,
                color: Colors.white,
              ),
              onTapDown: (details) {
                _showPopUpMenu(details.globalPosition);
              }),
        )
]

popUpMenu:

_showPopUpMenu(Offset offset) async {
    final screenSize = MediaQuery.of(context).size;
    double left = offset.dx;
    double top = offset.dy;
    double right = screenSize.width - offset.dx;
    double bottom = screenSize.height - offset.dy;

    await showMenu<MenuItemType>(
      context: context,
      position: RelativeRect.fromLTRB(left, top, right, bottom),
      items: MenuItemType.values
          .map((MenuItemType menuItemType) =>
              PopupMenuItem<MenuItemType>(
                value: menuItemType,
                child: Text(getMenuItemString(menuItemType)),
              ))
          .toList(),
    ).then((MenuItemType item) {
      if (item == MenuItemType.EDIT) {
       // here set your route 
      }

    });
  }

And your enum data for popup menu

import 'package:flutter/foundation.dart';

enum MenuItemType {
  EDIT,
  DUPLICATE
}


getMenuItemString(MenuItemType menuItemType) {
  switch (menuItemType) {
    case MenuItemType.EDIT:
      return "Edit";
    case MenuItemType.DUPLICATE:
      return "Duplicate";
  }
}

CodePudding user response：

Please refer to below code

Widget popMenus({
  List<Map<String, dynamic>> options,
  BuildContext context,
}) {
  return PopupMenuButton(
    iconSize: 24.0,
    padding: EdgeInsets.zero,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    icon: Icon(
      Icons.more_horiz_rounded,
      color: Colors.black,
      size: 24.0,
    ),
    offset: Offset(0, 10),
    itemBuilder: (BuildContext bc) {
      return options
          .map(
            (selectedOption) => PopupMenuItem(
              height: 12.0,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    selectedOption['menu'] ?? "",
                    style: TextStyle(
                      fontSize: ScreenUtil().setSp(14.0),
                      fontWeight: FontWeight.w400,
                      fontStyle: FontStyle.normal,
                      color: Colors.blue,
                    ),
                  ),
                  (options.length == (options.indexOf(selectedOption)   1))
                      ? SizedBox(
                          width: 0.0,
                          height: 0.0,
                        )
                      : Padding(
                          padding: EdgeInsets.symmetric(
                            vertical: 8.0,
                          ),
                          child: Divider(
                            color: Colors.grey,
                            height: ScreenUtil().setHeight(1.0),
                          ),
                        ),
                ],
              ),
              value: selectedOption,
            ),
          )
          .toList();
    },
    onSelected: (value) async {},
  );
}

class PopUpmenusScreen extends StatefulWidget {
  const PopUpmenusScreen({Key key}) : super(key: key);

  @override
  _PopUpmenusScreenState createState() => _PopUpmenusScreenState();
}

class _PopUpmenusScreenState extends State<PopUpmenusScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Examples"),
        actions: [
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0,),
            child: popMenus(
              context: context,
              options: [
                {
                  "menu": "option 1" ?? '',
                  "menu_id": 1,
                },
                {
                  "menu": "option 2" ?? "",
                  "menu_id": 2,
                },
                {
                  "menu": "option 3" ?? "",
                  "menu_id": 3,
                },
                {
                  "menu": "option 4" ?? "",
                  "menu_id": 4,
                },
              ],
            ),
          )
        ],
      ),
    );
  }
}

Solution 2:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Examples"),
        actions: [
          IconButton(
            icon: Icon(
              Icons.more_horiz,
              color: Colors.black,
              size: 20.0,
            ),
            onPressed: () {},
          )
        ],
      ),
    );
  }