Create a Dropdown in Flutter

Adding a dropdown in Flutter is a great way to keep your users happy and engaged. They can easily select the option they need, without having to search through long lists or menus. Plus, it’s easy to create and customize, so you can make it fit your app perfectly. In this tutorial, we’ll show you how to add a dropdown in Flutter.

Flutter’s DropDownButton widget is a material design button that lets the user select one value from an array of choices. It features both text input as well as icon representation, which can be changed at any time using ios header file options if desired.

You can use a DropDownButton to show the currently selected option or even include an arrow icon so users know how many options they’re selecting. When clicked, it opens up whatever list you want with just one tap!

String? _chosenCategory;

DropdownButton<String>(
  value: _chosenCategory,
  isExpanded: true,
  items: [
    DropdownMenuItem<String>(
      value: "java",
      child: Text(
        "Java",
        style: TextStyle(color: Colors.yellow, fontSize: 20.0),
      ),
    ),
    DropdownMenuItem<String>(
      value: "kotlin",
      child: Text(
        "Kotlin",
        style: TextStyle(color: Colors.orange, fontSize: 20.0),
      ),
    ),
  ],
  onChanged: (value) {
    setState(() {
      _chosenCategory = value;
    });
  },
  hint: Text(
    "Category",
  ),
)

final List<String> categories = ['Cool', 'Hot', 'Rainy', 'Cloudy', 'Confusing'];
String? _chosenValue;

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