如何使用下拉按钮创建 TextformField 以在颤动中显示图标和文本列表

问题描述

我是 Flutter 的新手，我想在 Flutter 的 TextformField 中创建图标和文本的下拉列表。像带有其名称的银行图标。请查看屏幕截图并建议我任何代码。先感谢您。请帮忙。

解决方法

可能使用 DropdownButton 类，https://api.flutter.dev/flutter/material/DropdownButton-class.html

在文档页面上，您可以看到不包含图标的示例代码。

您可以通过更改 items 参数来将图标添加到下拉项中，以让 Row 包装图标和文本小部件。

见：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(),

,

...
//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(),)