How to make menu appear below dropdownmenubutton in flutter

Viewed 133

I have set menuMaxHeight as it was taking up a lot of screen. My menu appears above the menubutton.

Here is the widget

DropdownButtonHideUnderline(
      child: DropdownButton<String>(
        menuMaxHeight: 300,
        //isDense: true,
        hint: Text("State",style: TextStyle(color: Color(0xFF8B8B8B),fontSize: 15),),
        //alignment: Alignment.bottomLeft,
        value: stateValue,
       // elevation: 2,
       //underline: null,
       isExpanded: true,
       style: const TextStyle(color: Colors.black),
        onChanged: (String? newValue) {
          setState(() {
            stateValue = newValue!;
          });
        },
        items: <String>['AL' ,'AK' ,'AZ' ,'AR' ,'CA' ,'CZ' ,'CO' ,'CT' ,'DE' ,'DC' ,'FL' ,'GA' ,'GU' ,'HI' ,'ID' ,'IL' ,'IN' ,'IA' ,'KS' ,'KY' ,'LA' ,'ME' ,'MD' ,'MA' ,'MI' ,'MN' ,'MS' ,'MO' ,'MT' ,'NE' ,'NV' ,'NH' ,'NJ' ,'NM' ,'NY' ,'NC' ,'ND' ,'OH' ,'OK' ,'OR' ,'PA' ,'PR' ,'RI' ,'SC' ,'SD' ,'TN' ,'TX' ,'UT' ,'VT' ,'VI' ,'VA' ,'WA' ,'WV' ,'WI' ,'WY' ,'null']
            .map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      ),
    ),
  ),
)

Is there a way to make menu appear below the button. I have seen documentation but have not been able to find a way for it. Thanks!

1 Answers

You can achieve that using DropdownButton2. It's based on Flutter's core DropdownButton with steady dropdown menu below the button and many other options you can customize to your needs.

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

Related