Positioning the menu of PopupMenuButton

Question

I am using PopupMenuButton in a flutter mobile app. I want to position the menu such that the calling button is centre aligned according to the screen. Below is how it currently shows on iPhone 12 Max Pro and iPhone 8. How can I get a consistent behaviour?

Updating the post to include code. I have tried to play around with the offset property however I couldn't figure out a way to correctly calculate the size of the popup menu once the button is pressed.

return PopupMenuButton(
  elevation: 50,
  color: Theme.of(context).colorScheme.button,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(25),
  ),
  child: SizedBox(
    width: 162,
    height: 49,
    child: ClipRRect(
      borderRadius: BorderRadius.circular(25),
      child: Container(
        color: Theme.of(context).colorScheme.button,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
          child: Row(
            children: [
              FaIcon(
                FontAwesomeIcons.lightPlus,
                color: Colors.white,
                size: 16,
              ),
              Spacer(),
              Text("New", style: Theme.of(context).textTheme.whiteLabels),
              Spacer(),
              FaIcon(
                FontAwesomeIcons.lightAngleUp,
                color: Colors.white,
                size: 20,
              ),
            ],
          ),
        ),
      ),
    ),
  ),
  itemBuilder: (context) => [
    PopupMenuItem(
        value: 1,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
          child: Row(
            children: [
              FaIcon(
                FontAwesomeIcons.lightEdit,
                color: Colors.white,
                size: 20,
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(12, 0, 0, 0),
                child: Text('Type Text', style: Theme.of(context).textTheme.whiteLabels.copyWith(fontSize: 16)),
              ),
            ],
          ),
        )),
    PopupMenuItem(
        value: 2,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
          child: Row(
            children: [
              FaIcon(FontAwesomeIcons.lightMicrophone, color: Colors.white, size: 20),
              Padding(
                padding: const EdgeInsets.fromLTRB(16, 0, 0, 0),
                child: Text(' Record Voice', style: Theme.of(context).textTheme.whiteLabels.copyWith(fontSize: 16)),
              ),
            ],
          ),
        )),
    PopupMenuItem(
        value: 3,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
          child: Row(
            children: [
              FaIcon(FontAwesomeIcons.lightCamera, color: Colors.white, size: 20),
              Padding(
                padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
                child: Text(' Take a Picture', style: Theme.of(context).textTheme.whiteLabels.copyWith(fontSize: 16)),
              ),
            ],
          ),
        )),
    PopupMenuItem(
        value: 4,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
          child: Row(
            children: [
              FaIcon(FontAwesomeIcons.lightVideo, color: Colors.white, size: 20),
              Padding(
                padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
                child: Text(' Record a Video', style: Theme.of(context).textTheme.whiteLabels.copyWith(fontSize: 16)),
              ),
            ],
          ),
        ))
  ],
);

Answer 1

Hmm, I am sure only one thing will help you out here is the offset property of popup-menu.

PopupMenuButton<int>(
  itemBuilder: (context) => [
    PopupMenuItem(
      value: 1,
      child: Text("Blashhhh", style: TextStyle(fontSize: 16.0)),
    ),
    PopupMenuItem(
      value: 2,
      child: Text("Blahhh 2", style: TextStyle(fontSize: 16.0)),
    ),
  ],
  initialValue: 0,
  onCanceled: () {
    print("You have canceled the menu selection.");
  },
  onSelected: (value) {
    switch(value){
      case 1:
        //do something
        break;
      case 2:
        //do something
        break;
      default: { print("Invalid choice"); }
      break;
    }
  },
  child: Container(
      padding: EdgeInsets.only(top: 10.0, bottom: 10.0, left: 13.0, right: 13.0),
      alignment: Alignment.centerLeft,
      color: Colors.white,
      child: Text("Share it", style: TextStyle(fontSize: 16.0))
  ),
  offset: Offset(0, -90),
),

Now as you can see I have set offset to -90 but you will need to calculate the width of screen based on that define the half to it and place the menu around that output and check.

double width = MediaQuery. of(context). size. width;

Hope this will help you out.

Answer 2

try to share the specific code for more accurate answers.

However i think this can be solved by using [align] widget

Or else try with [center] widget

try with padding or mainaxisalignment or crossaxisalignment or safearea if possible.

reply back which method worked for you or how did you solved the issue.