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

Curved container showing white edges #24

Open jay2jp opened 3 years ago

jay2jp commented 3 years ago

I just upgraded my app to flutter 2.2 and I noticed a graphical issue with the package, we use a rounded container as a child and it seems that the background of the package is white, so now the corners of the container are showing where the curves are. This was not happening pre-flutter 2.2.

image

To Reproduce We just built a menubutton using this close

                          MenuButton(
                            child: Container(
                                decoration: BoxDecoration(
                                    color: BaseTheme.colorScheme().dropColor,
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(7))),
                                child: SizedBox(
                                  width: 121,
                                  height: 51,
                                  child: Padding(
                                    padding: const EdgeInsets.only(
                                        left: 16, right: 11),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: <Widget>[
                                        Flexible(
                                          child: Text(
                                            widget.selectedDay,
                                            textScaleFactor:
                                                MediaQuery.of(context)
                                                    .textScaleFactor
                                                    .clamp(1.0, 1.5),
                                            style: TextStyle(
                                                color: BaseTheme.colorScheme()
                                                    .dropTextColor,
                                                fontSize: 18,
                                                fontWeight: FontWeight.w500),
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                        SizedBox(
                                            width: 30,
                                            height: 30,
                                            child: FittedBox(
                                                fit: BoxFit.fill,
                                                child: Icon(
                                                  Icons.keyboard_arrow_down,
                                                  //Icons.arrow_drop_down,
                                                  size: 19,
                                                  color: Color(0xffD1DDE6),
                                                ))),
                                      ],
                                    ),
                                  ),
                                )), // Widget displayed as the button
                            items: <String>[
                              '1',
                              '2',
                              '3',
                              '4',
                              '5',
                              '6',
                              '7',
                            ], // List of your items
                            topDivider: true,
                            popupHeight: 200,
                            selectedItem: widget.selectedDay,

                            //dontShowTheSameItemSelected: true,
                            scrollPhysics:
                                AlwaysScrollableScrollPhysics(), // Change the physics of opened menu (example: you can remove or add scroll to menu)
                            itemBuilder: (value) => Container(
                              width: 121,
                              height: 51,
                              alignment: Alignment.centerLeft,
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 16),
                              child: Text(
                                value,
                                textScaleFactor: MediaQuery.of(context)
                                    .textScaleFactor
                                    .clamp(1.0, 1.5),
                                style: TextStyle(
                                    color: Color(0xFF8E8E8E),
                                    fontSize: 12,
                                    fontWeight: FontWeight.w800),
                              ),
                              decoration: BoxDecoration(
                                color: Color(0xFFF5F5F5),
                                //border: Border.all(width: 2, color: Color(0xFF79D7F7)),
                              ),
                            ), // Widget displayed for each item
                            toggledChild: Container(
                              color: BaseTheme.colorScheme().dropColor,
                              child: SizedBox(
                                width: 121,
                                height: 51,
                                child: Padding(
                                  padding: const EdgeInsets.only(
                                      left: 16, right: 11),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: <Widget>[
                                      Flexible(
                                        child: Text(
                                          widget.selectedDay,
                                          textScaleFactor:
                                              MediaQuery.of(context)
                                                  .textScaleFactor
                                                  .clamp(1.0, 1.5),
                                          style: TextStyle(
                                              color: Color(0xFFF5F5F5),
                                              fontSize: 18,
                                              fontWeight: FontWeight.w500),
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                      SizedBox(
                                          width: 30,
                                          height: 30,
                                          child: FittedBox(
                                              fit: BoxFit.fill,
                                              child: Icon(
                                                Icons.keyboard_arrow_up,
                                                //Icons.arrow_drop_down,
                                                size: 19,
                                                color: Colors.white,
                                              ))),
                                    ],
                                  ),
                                ),
                              ), // Widget displayed as the button,
                            ),
                            divider: Container(
                              height: 1,
                              color:
                                  BaseTheme.colorScheme().blueButtonTextColor,
                            ),
                            onItemSelected: (value) async {

                              setState(() {
                                widget.selectedDay = value;
                                //print(monthValue);
                              });

                              // Action when new item is selected
                            },
                            decoration: BoxDecoration(
                              //border: Border.all(color: Colors.grey[300]),
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(8.0)),
                              //color: Color(0xFF4E709F),
                              color: daysBackground,
                            ),
                            onMenuButtonToggle: (isToggle) {
                              //print(isToggle);
                              setState(() {
                                daysBackground = Color(0xFF4E709F);
                              });
                            },
                          ),