Custom Dropdown Button With Icon Flutter

Question

I want to make dropdown button like this :

https://i.sstatic.net/UWAhX.png

How to add icon inside the dropdown. especially in left of dropdown button.

This is my code and view :

https://i.sstatic.net/K6HSx.jpg

https://i.sstatic.net/mvGHQ.jpg

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

replace the child in DropdownMenuItem from text to ListTile if you need every item have default icon you must be change the list of String to List<Map<String,dynamic>> like this :

 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},
];

and the code like :

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