How to create TextformField with Dropdown button to show list of icons and text in flutter

Question

I am new to Flutter, I want to create a dropdown list of icons and text in TextformField in Flutter. Like bank icon with its name. Please see the screenshot and suggest me any code. Thank you in advance. Please help.

Answer 1

Probably use DropdownButton class, https://api.flutter.dev/flutter/material/DropdownButton-class.html

On the documentation page you can see there is an example code that does not include an Icon.

You can add an icon to the dropdown items by changing the items parameter to have a Row wrapping an Icon and Text widget.

See: https://dartpad.dev/b742bde3465a616f8787c434415c9e3e?null_safety=true

 items: <String>['One', 'Two', 'Free', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Row(
            children: [
              Icon(Icons.close),
              Text(value),
            ],
          ),
        );
      }).toList(),

Answer 2

...
//custom object
class Item{
  String name; //set the item name
  Icon icon; //set corresponding icon
}
Item selectedItem;
List<Item> itemList = []; //create a list of the items, you need to add items into it first

DropdownButton<Item>(
                isExpanded: true,
                hint: new Text("Select Item"),
                value: selectedItem ,
                icon: Icon(Icons.arrow_drop_down_circle),
                iconSize: 24,
                elevation: 16,
                style: TextStyle(color: Colors.blueAccent),
                underline: Container(
                  height: 2,
                  color: Colors.blue,
                ),
                onChanged: (Item newValue) {
                  setState(() {
                    selectedItem = newValue;
                  });
                },
                items: itemList.map<DropdownMenuItem<Item>>((Item value) {
                  return DropdownMenuItem<Item>(
                    value: value,
                    child: Row(
                      //set alignment here
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Icon(value.icon), //in here you can display the icon
                        Text(value.name), //name of the item
                      ],
                  );
                }).toList(),
              )