(credit for logo: internet)

Implementing dropdownbutton in Flutter

Flutter dropdown gives you the option to select the item from a list of items available when a user clicks on a button.

The dropdown button helps to save developers from space complexity issues, Mostly when you have a long list of items for selection better option is to put a dropdown box.

Here I showed an example of a dropdown button to select the bank from the list.

First, create a class BankListDataModel

In this class bank_name and bank_logo are two class variables. BankListDataModel(this.bank_name, this.bank_logo) this is the constructor of class BanlListDataModel

Second, Create a Stateful class HomePage

Here I declare _bankChoose object of BankListDataModel class to hold current bank selection from dropdown list. Initially, _bankChoose holds the first element of bankDataList.

bankDataList is the list of objects of class BankListDataModel.

This statement inside the initState() function shows that when we initiate application, dropdown button shows the first value from the list.

Now in code,

The widget shows a dropdown button mapping the values from BankListDataModel class.

items property shows dropdown button menu items.

onChanged event makes our dropdown button working, it calls the method _onDropDownItemSelected which takes a new selected item as a parameter, and inside setState() method this new value assigns to _bankChoose variable.

The most important part of the dropdown button is to show changed value in the dropdown, the statement next to onChanged() is,

which helps to display the selected value inside the dropdown button.

Now, be confident about DropDownButton widget and use it in your application. Keep Coding!

Thank you!

Full Stack | .NET Developer | Flutter Expert | Cloud Enthusiast | Coach and Trainer