Flutter DropDownButton Examples

DropdownButton widget consists a list of DropdownMenuItem. It shows the currently selected item and an arrow that opens a menu for selecting another item.

A simple DropdownButton

A simple widget consists of list of String and its respective value.

String _selectedValue;

DropdownButton<String>(
  value: _selectedValue,
  isExpanded: true,
  items: [
    DropdownMenuItem<String>(
      value: "anime",
      child: Text(
        "Anime",
        style: TextStyle(color: Colors.red),
      ),
    ),
    DropdownMenuItem<String>(
      value: "manga",
      child: Text(
        "Manga",
        style: TextStyle(color: Colors.blue),
      ),
    ),
  ],
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
  hint: Text(
    "Category",
  ),
)

Set DropdownButton values from a list

The list can be a list of primitive Data Types or Object.

final List<String> categories = ['Favorite', 'Happy', 'Sad', 'Angry'];
String _selectedValue;

DropdownButton<String>(
  value: _selectedValue,
  isExpanded: true,
  items: categories.map((e)  {
    return DropdownMenuItem<String>(
      value: e,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Icon(Icons.label),
          Text(e)
        ],
      ),
    );
  }).toList(),
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
  hint: Text(
    "Category",
  ),
)