huextrat / menu_button

Flutter plugin to display a popup menu button widget with handsome design and easy to use.
https://pub.dev/packages/menu_button
MIT License
65 stars 23 forks source link

Overlay opening to outside of screen #5

Closed lucas-sesti closed 4 years ago

lucas-sesti commented 4 years ago

Describe the bug I'm using your dependency but my dropdown button is in the end of screen, and when i open the dropdown, the dropdown open outside of screen, like this: image

To Reproduce Just put in the end of screen and try open

Smartphone (please complete the following information):

When i have free time, i'll try to see this bug and create pull request, but i don't have so much time now, if you have, can you fixed?

huextrat commented 4 years ago

I don't have too much time this week but maybe early next week :) I'll keep you informed

huextrat commented 4 years ago

@lucas-sesti I'm trying to reproduce the issue but I can't do it when I align the menu_button on the right side of the screen in a stack for example; it's well aligned at the edge.

Can you provide a code to easily reproduce the issue pls ?

lucas-sesti commented 4 years ago

Yes, i'll send a piece of code, wait a minute.

lucas-sesti commented 4 years ago
MenuButton(
          child: button,
          items: _items,
          topDivider: true,
          itemBuilder: (value) => Container(
            alignment: Alignment.center,
            padding: EdgeInsets.fromLTRB(Spacing.base * 3, Spacing.small,
                Spacing.base * 3, Spacing.small),
            child: LjText(
              value,
              options: LjTextOptions.smallCaption,
            ),
            color: Colors.white,
          ),
          toggledChild: Container(
            color: Colors.white,
            child: button,
          ),
          divider: Container(
            height: 1,
            color: theme.dividerColor,
          ),
          onMenuButtonToggle: (btnToggle) {
            // ... action when menu button toggle
          },
          onItemSelected: (value) async {
            // ... my code when my item have been selected
          },
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(24.0)),
              color: toggle ? theme.ljGrey[300] : Colors.white,
              boxShadow: [
                BoxShadow(
                    color: Colors.black.withOpacity(.1),
                    offset: Offset(0, 2),
                    blurRadius: 10,
                    spreadRadius: .5)
              ]),
        )

and my variable called button:

final Widget button = SizedBox(
      width: width,
      height: 40,
      child: Padding(
        padding:
            EdgeInsets.only(left: Spacing.small + 4, right: Spacing.small - 1),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Flexible(
              child: LjText(
                _itemSelecionado, 
                options: LjTextOptions.smallCaption,
                textOverflow: TextOverflow.ellipsis,
              ),
            ),
            FittedBox(
              fit: BoxFit.fill,
              child: Transform.rotate(
                angle: 90 * pi / 180,
                child: Icon(
                  Icons.arrow_forward_ios,
                  size: 12,
                  color: theme.ljGrey[600],
                ),
              ),
            ),
          ],
        ),
      ),
    )

And i have an example, its happening when my text is not big enough e.g: image

image

And when my option is confirmed: image

image

lucas-sesti commented 4 years ago

Hey, i created new pull request, fixing this issue, if you can see, i'll appreciate