Flutter如何实现带左侧图标的自定义Dropdown Button

一、给下拉按钮本身左侧添加图标 #

直接借助DropdownButtonFormField的decoration属性里的prefixIcon就能实现，修改你的InputDecoration部分，添加图标组件即可：

DropdownButtonFormField<String>(
  hint: const Text('Select your vehicle'),
  value: dropdownValue,
  decoration: const InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
    ),
    // 添加左侧图标
    prefixIcon: Icon(Icons.car_rental, color: Colors.grey),
  ),
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
  items: listPilihanstatus.map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
),

二、给下拉选项的左侧添加图标 #

如果需要每个下拉选项左侧也带对应图标，可以把DropdownMenuItem的child改成Row组件，还能给不同品牌匹配专属图标：

先定义品牌与图标的映射关系：

final Map<String, IconData> vehicleIcons = {
  'Mitsubishi': Icons.directions_car,
  'Yamaha': Icons.motorcycle,
  'Honda': Icons.directions_car,
  'Nissan': Icons.directions_car,
  'Hyundai': Icons.directions_car,
};

再修改items生成逻辑：

items: listPilihanstatus.map<DropdownMenuItem<String>>((String value) {
  return DropdownMenuItem<String>(
    value: value,
    child: Row(
      children: [
        Icon(vehicleIcons[value], size: 18, color: Colors.grey),
        const SizedBox(width: 8), // 图标与文字的间距
        Text(value),
      ],
    ),
  );
}).toList(),

内容的提问来源于stack exchange，提问作者Asa Marsal