UI error if widget is inside Expanded

[mishatron]

I want MenuButton to expand the available width. But if I put it in Expanded - it is broken down

[lucas-sesti]

I have the same problem but, i resolved my problem using media query and calculate the correctly width, i don't know if this resolve your problem..

[mishatron]

this is the last variant, becuase I have not only this widget in the row. Should be fixed

[huextrat]

Yes I had that problem too, I'll have some time to watch next week. Can you put a code to reproduce the problem so the resolution will be more efficient. Thanks

[dipcse07]

@huextrat have you also updated for this one too?? cause i am having this problem too .. :(

[huextrat]

@dipcse07 No i'm working on it this afternoon to find a suitable solution. Can you confirm the the issue is on the child & toggledChild property ?

[dipcse07]

yes on the drop down menu items or the child items . wait a second i will add two screen shot..

[dipcse07]

When there is only 2 button items then there is another two button area in the drop down menu items before even selecting the button items..i guess.. please ignore the text that is under the menu button items..

When there is 4 button items then after selecting one button item it shows the remaining 3 button item with extra another area for button item please ignore the text that is under the menu button items..

these are the problems i am having..

[huextrat]

@dipcse07 Okay that sounds like another problem that I think is solved in the latest master version. Can you confirm by retrieving master?

[dipcse07]

okay.. i am upgrading..

[huextrat]

@dipcse07 v1.2.0+1 should solve your problem

[dipcse07]

umm unfortunately nope.. :(

it shows like this now :(

[huextrat]

@dipcse07 Ok and you are using an Expanded widget or not ?

[dipcse07]

if i have understood currectly i am not for menu button... i have only used which is given in the how to use section of the pub.dev for this packages..

I am using column so is it occuring for using column?

here is the code:

 body: Container(
          alignment: Alignment.center,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[

              MenuButton(
                child: SizedBox(
                  width: 83,
                  height: 40,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 16, right: 11),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Flexible(

                          child: Text(
                            selectedItem,
                            style: TextStyle(color: Colors.black),
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        SizedBox(
                            width: 12,
                            height: 17,
                            child: FittedBox(
                                fit: BoxFit.fill,
                                child: Icon(
                                  Icons.arrow_drop_down,
                                  color: Colors.grey,
                                )
                            )
                        ),
                      ],
                    ),
                  ),
                ),// Widget displayed as the button
                items: ['button1','button2'],// List of your items
                topDivider: true,
                selectedItem: selectedItem,
                popupHeight: 200, // This popupHeight is optional. The default height is the size of items
                scrollPhysics: AlwaysScrollableScrollPhysics(), // Change the physics of opened menu (example: you can remove or add scroll to menu)
                itemBuilder: (value) => Container(
                    width: 83,
                    height: 40,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: Text(value)
                ),// Widget displayed for each item
                toggledChild: Container(
                  color: Colors.white,
                  child: SizedBox(
                    width: 83,
                    height: 40,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 16, right: 11),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Flexible(

                            child: Text(
                              selectedItem,
                              style: TextStyle(color: Colors.black),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          SizedBox(
                              width: 12,
                              height: 17,
                              child: FittedBox(
                                  fit: BoxFit.fill,
                                  child: Icon(
                                    Icons.arrow_drop_down,
                                    color: Colors.grey,
                                  )
                              )
                          ),
                        ],
                      ),
                    ),
                  ),// Widget displayed as the button,
                ),
                divider: Container(
                  height: 1,
                  color: Colors.grey,
                ),
                onItemSelected: (value) {
                  setState(() {
                    selectedItem = value;
                    print(selectedItem);
                  });

                  // Action when new item is selected
                },
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey[300]),
                    borderRadius: const BorderRadius.all(Radius.circular(3.0)),
                    color: Colors.white
                ),
                onMenuButtonToggle: (isToggle) {
                  print(isToggle);
                },
              ),

[huextrat]

@mishatron @lucas-sesti menu_button: 1.2.1 should solve the issue when you have MenuButton in Expanded widget. I'm gonna close the issue please tell me if you still have the problem.

@dipcse07 Your problem looks like it's not related to this issue, please open a new one with code sample and same screenshot as above ;) Thanks

[dipcse07]

okay i will do that now..