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

Question

我想在 appBar 上有一个 Button，当我点击它时，它会向我显示三个其他按钮，就像 FAB 的浮动操作一样，但它位于 appBar 上。

喜欢右上角

我尝试了很多选项，例如浮动操作按钮、图标按钮和 PopupMenuButton。

这是我使用 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();
              }),

我没有找到将图标与右上角的编辑按钮垂直对齐的方法，并且我无法做一个带有高度的背景来聚焦三个图标，例如在抽屉小部件中或如图 1 所示。 这就是它的外观：

有没有更优雅的方法来制作这种按钮，特别是解决背景和对齐这两个问题？

我很想听听一些建议:)

Answer 1

PopupMenuButton支持offset，可以使用offset调整显示位置
可以参考https://medium.com/flutteropen/widgets-14-popupmenubutton-1f1437bbdce2

代码sn-p

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

参考文档中的示例

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),
        );