带有图标颤动的自定义下拉按钮

Question

我想制作这样的下拉按钮:

如何在下拉列表中添加图标。特别是在下拉按钮的左侧。

这是我的代码和视图：

String? dropdownValue;

  List<String> listPilihanstatus = [
    'Mitsubishi',
    'Yamaha',
    'Honda',
    'Nissan',
    'Hyundai',
  ];

DropdownButtonFormField<String>(
  hint: const Text('Select your vehicle'),
  value: dropdownValue,
  decoration: const InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
    ),
  ),
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
  items: listPilihanstatus.map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
),

Answer 1

将 DropdownMenuItem 中的子项从文本替换为 ListTile 如果您需要每个项目都有默认图标，则必须将 String 列表更改为 List> 像这样：

 List<Map<String, dynamic>> listPilihanstatus = [
  {'name': 'Mitsubishi', 'icon': Icons.safety_check},
  {'name': 'Yamaha', 'icon': Icons.access_alarm_outlined},
  {'name': 'Honda', 'icon': Icons.account_balance_sharp},
  {'name': 'Nissan', 'icon': Icons.sailing},
  {'name': 'Hyundai', 'icon': Icons.macro_off},
];

代码如下：

DropdownButtonFormField<String>(
                hint: const Text('Select your vehicle'),
                value: dropdownValue,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                  ),
                ),
                onChanged: (String? newValue) {
                  setState(() {
                    dropdownValue = newValue!;
                  });
                },
                items: listPilihanstatus
                    .map<DropdownMenuItem<String>>((e) => DropdownMenuItem(
                          child:ListTile(
                            title: Text(e['name']),
                            trailing: Icon(e['icon']),
                          ),
                          value: e['name'],
                        ))
                    .toList()),