How to add Dropdown Button Widget in Flutter App

In this example, we are going to show you how to add DropdownButton, add items inside it, or style the dropdown button like adding background color, border, border-radius. See the examples below:

How to add DropdownButton:

DropdownButton(
    value: "New York",
    items: [ //add items in the dropdown 
      DropdownMenuItem(
        child: Text("New York"),
        value: "New York"
      ),

      DropdownMenuItem(
        child: Text("Tokyo"),
        value: "Tokyo",
      ),

      DropdownMenuItem(
        child: Text("Moscow"),
        value: "Moscow",
      )
    ],
    onChanged: (value){ //get value when changed
        print("You selected $value");
    },
)

Be careful, if you haven't set function to onChanged, the dropdown will be disabled. 

Dropdown Button Output

Dropdown Menu when Button pressed

How to Populate Dropdown Items from Array List:

List<String> countries = ["Canada", "Russia", "USA", "China", "United Kingdom", "USA", "India"];

DropdownButton(
    value: countries[0],
    items: countries.map((country){
        return DropdownMenuItem( 
            child: Text(country),
            value: country,
        );
    }).toList(),
    onChanged: (country){
       print("You selected: $country");
    },
)

How to Make Dropdown Items Unique from Array List:

List<String> countries = ["Canada", "Russia", "USA", "China", "United Kingdom", "USA", "India"];
var seen = Set<String>();
List<String> uniquelist = countries.where((country) => seen.add(country)).toList();

DropdownButton(
    value: uniquelist[0],
    items: uniquelist.map((country){
        return DropdownMenuItem( 
            child: Text(country),
            value: country,
        );
    }).toList(),
    onChanged: (country){
       print("You selected: $country");
    },
)

Country List Dropdown Button:

Unique Items on Dropdown Button:

You may encounter errors while adding DropdownButton, see our previous post where we have solved different kinds of errors that occurred while adding DropdownButton.

How to Style Dropdown Button:

DecoratedBox(
  decoration: BoxDecoration( 
     color:Colors.lightBlue, //background color of dropdown button
     border: Border.all(color: Colors.black38, width:3), //border of dropdown button
     borderRadius: BorderRadius.circular(20), //border raiuds of dropdown button
  ),
  
  child:Padding(
    padding: EdgeInsets.only(left:30, right:30),
     child:DropdownButton(
      value: "New York",
      items: [ //add items in the dropdown 
        DropdownMenuItem(
          child: Text("New York"),
          value: "New York"
        ),

        DropdownMenuItem(
          child: Text("Tokyo"),
          value: "Tokyo",
        ),
      ],
      onChanged: (value){ //get value when changed
          print("You selected $value");
      },
      icon: Padding( //Icon at tail, arrow bottom is default icon
        padding: EdgeInsets.only(left:20),
        child:Icon(Icons.arrow_circle_down_sharp)
      ), 
      iconEnabledColor: Colors.white, //Icon color
      style: TextStyle(  //te
         color: Colors.white, //Font color
         fontSize: 20 //font size on dropdown button
      ),
      dropdownColor: Colors.redAccent, //dropdown background color
     )
  )
)

Dropdown Button Output:

Dropdown Menu Items Output:

Read more about styling DropdownButton: How to Style DropdownButton in Flutter

In this way, you can add a static DropdownButton or Dynamic Dropdown Button where you can add Items from Array List or JSON, and style it according to your own preference in Flutter app.