Search code examples
flutterflutter-layoutflutter-dependenciesflutter-animation

manage the position of showMenu in flutter


I have a GestureDetector and at the onPressed I have a showMenu, but I can't make the menu close to the button that I've created. Here is a screenshot

Here is my code: note that I've already used RelativeRect.fill for the position just to run the app.

ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: ColorConstants.kContainerColor,
                  shape:  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                onPressed: (){
                  showMenu(context: context, position: RelativeRect.fill, items: [
                    PopupMenuItem(child: Text('hello')),
                    PopupMenuItem(child: Text('hello')),
                    PopupMenuItem(child: Text('hello')),
                    PopupMenuItem(child: Text('hello')),
                  ]);
                }, child: Padding(
                  padding: const EdgeInsets.all(12),
                  child: SvgPicture.asset('images/menubar.svg',
                  color: Colors.white,
                  height: 27,
                  width: 27,)
                )),

Solution

  • This answer from Ayman can help you!

    He used PopupMenuButton instead of showMenu

    PopupMenuButton<int>(
        offset: const Offset(0, -380),
        itemBuilder: (context) => [
          PopupMenuItem<int>(
              value: 0,
              child: PopUpMenuTile(
                isActive: true,
                icon: Icons.fiber_manual_record,
                title:'Stop recording',
              )),
          PopupMenuItem<int>(
              value: 1,
              child: PopUpMenuTile(
                isActive: true,
                icon: Icons.pause,
                title: 'Pause recording',
              )),
          PopupMenuItem<int>(
              value: 2,
              child: PopUpMenuTile(
                icon: Icons.group,
                title: 'Members',
              )),
          PopupMenuItem<int>(
              value: 3,
              child: PopUpMenuTile(
                icon: Icons.person_add,
                title: 'Invite members',
              )),
        ],
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Icon(Icons.more_vert,
                color: Colors.white60),
            Text(translate('more'),
                style: Theme.of(context)
                    .textTheme
                    .caption)
          ],
        ),
      )