How to implement dropdown lists in Flutter

To utilize dropdown records we can utilize the DropdownButton class in Flutter. DropdownButton requires a sort for the things on the rundown. For example, assuming we would have a rundown of Strings, we need to characterize that when setting up the rundown.

The explanation that the gadget is known as a DropdownButton and not DropdownList, is on the grounds that it really is an interactive gadget that shows the presently picked thing as a book. Likewise, it tends to be essentially styled like a catch.

To make a dropdown list in Flutter we can utilize the accompanying code:

dropdown list in Flutter we can use the following code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown list demo'),
      ),
      body: Container(
        child: Center(
          child: DropdownButton<String>(
            value: _chosenValue,
            items: <String>['Google', 'Apple', 'Amazon', 'Tesla']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }

The result will be the following:

We can without much of a stretch tweak the DropdownButton by styling the underline by characterizing a gadget.

Step by step instructions to eliminate the underline from Flutter DropdownButton

To eliminate the underline from the DropdownButton, we need to characterize it as an unfilled Container gadget. Like so:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown list demo'),
      ),
      body: Container(
        child: Center(
          child: DropdownButton<String>(
            value: _chosenValue,
            underline: Container(), // this is the magic
            items: <String>['Google', 'Apple', 'Amazon', 'Tesla']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }

It then looks like this:

How to add a custom icon to Flutter DropdownButton

What if we want to add a custom icon to the DropdownButton? Well, that’s quite easy as this widget is actually a button.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown list demo'),
      ),
      body: Container(
        child: Center(
          child: DropdownButton<String>(
            value: _chosenValue,
            underline: Container(
                // underline can be styled as well
                // height: 4.0,
                // color: Colors.blue,
                ), // this removes underline
            icon: Icon(Icons.arrow_downward),
            iconSize: 20.0, // can be changed, default: 24.0
            iconEnabledColor: Colors.blue,
            items: <String>['Google', 'Apple', 'Amazon', 'Tesla']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }

We added a custom icon and color and this is how it looks like now:

I trust you’re open to utilizing dropdown records in Flutter now. Assuming you have any inquiries, kindly let me know in the remark area. Play around with Flutter!