如何制作像浮动操作按钮这样的弹出菜单按钮？

Question

I want to have a Button at the appBar that shows me three further buttons when I click on it like a Floating Action with FAB, but which is positioned at the appBar.

like on the top right corner

I tried a lot of options like Floating Action buttons, IconButtons, and PopupMenuButton.

This is my best solution with a PopupMenuButton:

 PopupMenuButton<Choice>( icon: Icon( MyIcon.edit, size: 35, color: Colors.white, ), // child: IconButton( icon: Icon( // MyIcon.edit, // // color: Colors.white, // size: 35, color: Colors.white, // ),onPressed: _buildLayoutContainer, // ), elevation: 0, onSelected: choiceAction, itemBuilder: (BuildContext context) { return choices.map((Choice choice) { if (choice.text == null) { return PopupMenuItem<Choice>( value: choice, child: Row( children: <Widget>[ SizedBox( height: 50, width: 1, ), ], ), ); } else { return PopupMenuItem<Choice>( value: choice, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ SizedBox( width: 103, ), choice.text, SizedBox( width: choice.width, ), Column( children: <Widget>[ IconButton( icon: choice.icon, onPressed: () => _selectTransaction(context), ), SizedBox( height: choice.height, ) ], ), ], ), ); } }).toList(); }),

I did not find a way to align the icons vertically with the edit button on the top right corner and I could not do a backdrop with an elevation to focus at the three icons like for example in a Drawer Widget or like in picture 1. And this is how it looks:

Is there a more elegant way to make this kind of button, especially solving these two issues with the Backdrop and aligning?

I would love to hear some advice :)

Answer 1

PopupMenuButton support offset , you can use offset to adjust display position
You can reference https://medium.com/flutteropen/widgets-14-popupmenubutton-1f1437bbdce2

code snippet

PopupMenuButton<Choice>(
        offset: Offset(100, 100), 
        icon: Icon(

example from reference document

Widget _offsetPopup() => PopupMenuButton<int>(
          itemBuilder: (context) => [
                PopupMenuItem(
                  value: 1,
                  child: Text(
                    "Flutter Open",
                    style: TextStyle(
                        color: TEXT_BLACK, fontWeight: FontWeight.w700),
                  ),
                ),
                PopupMenuItem(
                  value: 2,
                  child: Text(
                    "Flutter Tutorial",
                    style: TextStyle(
                        color: TEXT_BLACK, fontWeight: FontWeight.w700),
                  ),
                ),
              ],
          icon: Icon(Icons.library_add),
          offset: Offset(0, 100),
        );