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",
  ),
)

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close