Как сделать всплывающую кнопку меню, например, кнопку с плавающим действием?

Question

Я хочу иметь кнопку на панели приложений, которая показывает мне еще три кнопки, когда я нажимаю на нее, как плавающее действие с FAB, но которая расположена на панели приложений.

как в правом верхнем углу

Я перепробовал множество вариантов, таких как кнопки с плавающим действием, IconButtons и 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

фрагмент кода

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