10

I want the dropdown like this with flutter

Expected:

dropdown

with flutter dropdownformfield I'm able to do something like

enter image description here

As you can see, When I click the dropdown button, the menu items are overlapping the button. Please find the code below

DropdownButtonFormField(
                            isExpanded: false,
                            isDense: true,
                            items:  classes.map((category) {
                                    return new DropdownMenuItem(
                                        value: category,
                                        child: Row(
                                          children: <Widget>[
                                            Text(category),
                                          ],
                                        ));
                                  }).toList()
                                ,
                            onChanged: (newValue) {
                              // do other stuff
                              
                            },
                            value: _classroom,
                            decoration: InputDecoration(
                              contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                              enabledBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(color: Colors.white)),
                              hintText: "Select Class",
                              hintStyle: TextStyle(
                                color: Colors.grey[600],
                              ),
                            ),
                          )

is this achievable with dropdown widget? if not, how can i design custom dropdown widget?

Thanks

Community
  • 1
  • 1
Abbas Ali
  • 151
  • 10
  • 2
    Flutter does show the dropdown menu below the menu button by default. The reason it's overlapping in this case is because you have so many items in the menu that it can't fit them all on the screen which pushes the menu up to be able to show more of them. How you want to change this behavior is up to you. If you want to customize your own dropdown menu, the code for the menu is open source and you can see it by right-clicking on the `DropdownButtonFormField` class in your code and selecting "Go to source" (or whatever the equivalent is for your IDE). Copy it into a new class and edit at will. – Abion47 Feb 15 '20 at 00:08
  • 1
    It is overlapping even if I have only one menu item. – Abbas Ali Feb 15 '20 at 09:46
  • Please take reference from https://stackoverflow.com/questions/59859034/how-to-open-dropdown-dialog-below-dropdownbutton-like-spinner-in-flutter – Abhishek Karad Jan 05 '23 at 12:15

1 Answers1

1

Use flutter's dropdownbutton2 ,In which you the menuitems are aligned from the bottom of the button, and you can even verywell customize the menu items

enter image description here

Package: DropDownButton2

For reference: Refer this link

krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88