(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!