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

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