Positioning the menu of PopupMenuButton

user_904502 0
Viewed 2213

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?

iPhone 12 Max Pro

iPhone 8

How it should be aligned irrespective of the screen size

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)),
              ),
            ],
          ),
        ))
  ],
);
flutter-dependencies flutter
2 Answers

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.

user_62801560

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.

user_144660450
Related