Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Implement Dropdown Menu on Elevated Button in Flutter

Elevated Button doesn't have any dropdown implementation, but with a little trick, you can implement Dropdown Menu on Elevated Button using Dropdown Menu. In this example, we are going to show to add Dropdown menu on Elevated Button. 

How to Add Dropdown Menu on Elevated Button:

ElevatedButton(
    style: ElevatedButton.styleFrom(primary: Colors.redAccent), //Elevated Button Background
    onPressed: (){}, //make onPressed callback empty
    child:DropdownButton(
      style: TextStyle(color: Colors.white), //Dropdown font color
      dropdownColor: Colors.redAccent, //dropdown menu background color
      icon: Icon(Icons.arrow_downward, color:Colors.white), //dropdown indicator icon
      underline: Container(), //make underline empty
      value: selectval,
      onChanged: (value){
        setState(() {
            selectval = value.toString();
        });
      },
      items: listitems.map((itemone){
          return DropdownMenuItem(
            value: itemone,
            child: Text(itemone)
          );
      }).toList(),
  ),
)

You can do the same with other Button widgets or any widget you want.

Full Code Example:

Elevated Button with Dropdown Dropdown Menu when Clicked on Elevated Button

In this way, you can implement the Dropdown Menu on Elevated Button in Flutter.

No any Comments on this Article


Please Wait...