2 Ways to add Icon on left of DropdownButton Flutter

Using icons at the start of widgets, such as buttons or labels, serves several purposes in user interface design.

Icons provide a visual representation of the action or purpose associated with the widget. For example, a trash can icon next to a delete button indicates that clicking the button will delete something. This visual cue helps users understand the functionality of the widget without reading the accompanying text.

Icons can convey meaning quickly and efficiently. Users can recognize and comprehend familiar icons almost instantly, leading to faster interaction with the interface. This is particularly important in scenarios where users need to make quick decisions or perform actions rapidly.

Add Icon Left on DropdownButton Flutter

Adding an icon to the left of a DropdownButton in Flutter is a common design choice that provides visual cues to users about the purpose of the dropdown. Here are a few reasons why developers might choose to add an icon to the left of a DropdownButton.

Today we will see how we can add icon on left of DropdownButton in flutter using DropdownButtonFormField widget and Stack Widget.

Method 1 : Use DropdownButtonFormField Widget

DropdownButtonFormField<String>(
         decoration: InputDecoration(
         prefixIcon: Icon(Icons.person),
         ),
         hint: Text('Please choose account type'),
         items: <String>['A', 'B', 'C', 'D'].map((String value) {
         return DropdownMenuItem<String>(
         value: value,
         child: new Text(value),
       );
      }).toList(),
     onChanged: (_) {},
),

Method 2 : Use Stack Widget

@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
  children: <Widget>[
    Container(
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey,
            blurRadius: 20.0,
            spreadRadius: 0.5,
            offset: Offset(1.0, 1.0),
          ),
        ],
      ),
      padding: EdgeInsets.only(left: 44.0),
      margin: EdgeInsets.only(top: 64.0, left: 16.0, right: 16.0),
      child: DropdownButton(
        isExpanded: true,
        items: your_list.map(
          (val) {
            return DropdownMenuItem(
              value: val,
              child: Text(val),
            );
          },
        ).toList(),
        value: _currentSelectedItem,
        onChanged: (value) {
          setState(() {
            _currentSelectedItem = value;
          });
        },
      ),
    ),
    Container(
      margin: EdgeInsets.only(top: 80.0, left: 28.0),
      child: Icon(
        Icons.person,
        color: Colors.redAccent,
        size: 20.0,
      ),
    ),
  ],
),
  );
}

You can also learn the 2 ways to change the width and padding of DropdownMenuItem