Flutter dropdown alignment not proper

Question

I want the dropdown like this with flutter

Expected:

with flutter dropdownformfield I'm able to do something like

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

Lemuel

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. – Crocidolite

It is overlapping even if I have only one menu item. – Lemuel

Please take reference from #59859534 – Overbid

Answer 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

Package: DropDownButton2

For reference: Refer this link

Sailesh