How to customize the dropdownlist in flutter , like flikart dropdownlist

Question

I want to dropdownlist but i'm not able to do following things.

• change the width of the dropdownbutton
• make the dropdownlist to start at the dropdownbutton's height , not above it as default
• adjust the height of the dropdownmenuitem

Want i want is

What i have is

The code goes like

                                                child: ButtonTheme(
                                                  alignedDropdown: true,
                                                  child: DropdownButtonHideUnderline(
                                                    child: DropdownButton<String>(
                                                        // isDense: true,
                                                        // isExpanded: true,
                                                        itemHeight: null,
                                                        // menuMaxHeight: 10,
                                                        alignment: AlignmentDirectional.center,
                                                        elevation: 0,
                                                        value: selectedQuantity,
                                                        selectedItemBuilder: (BuildContext context) {
                                                          return _dropDownQuantities.map<Widget>((String item) {
                                                            return Container(
                                                              alignment: Alignment.center,
                                                              // color: Colors.green,
                                                              child: Text(
                                                                'Qty: $item',
                                                                style: TextStyle(fontSize: 14),
                                                              ),
                                                            );
                                                          }).toList();
                                                        },
                                                        items: _dropDownQuantities.map((e) {
                                                          return DropdownMenuItem(
                                                            alignment: AlignmentDirectional.topStart,
                                                            child: Container(
                                                                child: Column(
                                                              children: [Container(child: Text(e))],
                                                            )),
                                                            value: e,
                                                          );
                                                        }).toList(),
                                                        hint: Text("Qty: 1 "),
                                                        onChanged: (value) {
                                                          setState(() {
                                                            selectedQuantity = value!;
                                                          });
                                                        }),
                                                  ),
                                                ),

Answer 1

Use DropdownButton2 to achieve that.

1. Use buttonWidth property to change the width of the dropdownbutton.
2. Use offset property to change the position of the dropdown menu. You should add button's height to the dy offset to make it start at the dropdownbutton's height like this: Offset(0.0, "button's height")
3. Use itemHeight property to adjust the height of the dropdownmenuitem.

Disclaimer: I am the author of the package mentioned above.