(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

class BankListDataModel {
String bank_name;
String bank_logo;
BankListDataModel(this.bank_name, this.bank_logo);
}

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

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
BankListDataModel _bankChoose;
List<BankListDataModel> bankDataList = [
BankListDataModel("SBI",
"https://www.kindpng.com/picc/m/83-837808_sbi-logo-state-bank-of-india-group-png.png"),
BankListDataModel("HDFC",
"https://www.pngix.com/pngfile/big/12-123534_download-hdfc-bank-hd-png-download.png"),
BankListDataModel("ICICI",
"https://www.searchpng.com/wp-content/uploads/2019/01/ICICI-Bank-PNG-Icon-715x715.png"),
];

@override
void initState() {
super.initState();
_bankChoose = bankDataList[0];
}

void _onDropDownItemSelected(BankListDataModel newSelectedBank) {
setState(() {
_bankChoose = newSelectedBank;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: Form(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.only(left: 15, top: 10, right: 15),
child: FormField<String>(
builder: (FormFieldState<String> state) {
return InputDecorator(
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 10, 20, 20),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0))),
child: DropdownButtonHideUnderline(
child: DropdownButton<BankListDataModel>(
style: TextStyle(
fontSize: 16,
color: Colors.grey,
fontFamily: "verdana_regular",
),
hint: Text(
"Select Bank",
style: TextStyle(
color: Colors.grey,
fontSize: 16,
fontFamily: "verdana_regular",
),
),
items: bankDataList
.map<DropdownMenuItem<BankListDataModel>>(
(BankListDataModel value) {
return DropdownMenuItem(
value: value,
child: Row(
children: [
new CircleAvatar(
backgroundImage:
NetworkImage(value.bank_logo),
),
SizedBox(
width: 15,
),
Text(value.bank_name),
],
),
);
}).toList(),
isExpanded: true,
isDense: true,
onChanged: (BankListDataModel newSelectedBank) {
_onDropDownItemSelected(newSelectedBank);
},
value: _bankChoose,
),
),
);
},
),
),
],
),
),
),
);
}
}

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.

@override
void initState() {
super.initState();
_bankChoose = bankDataList[0];
}

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

Now in code,

DropdownButton<BankListDataModel>

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.

void _onDropDownItemSelected(BankListDataModel newSelectedBank) {
setState(() {
_bankChoose = newSelectedBank;
});
}

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

value: _bankChoose,

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yogita Kumar

Yogita Kumar

311 Followers

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