Drop Down List in Flutter using an Icon

Question

I want to implement the Dropdown List in Flutter for a particular Icon and applying GestureDetector on it in the AppBar. The code for it is,

AppBar(
   actions: <Widget>[
      Padding(
        padding: const EdgeInsets.fromLTRB(4.0, 4.0, 0, 4.0),
        child: Image.network(
            "Some Image Url"),
      ),
   GestureDetector(
        onTap: () {
//       I want to implement the Dropdown List here.
        },
        child: Padding(
          padding: const EdgeInsets.all(0.0),
          child: Icon(Icons.arrow_drop_down),
        ),
      ),
     ],
    )

What you mean by drop down list in Flutter without using `DropdownButton` ? Are you looking for [ExpansionTile](https://flutter.dev/docs/catalog/samples/expansion-tile-sample)? — John Joe, Feb 22 '20 at 14:55
I tried using the Dropdown Button, but it was taking space and the UI was not looking good, so I want to implement with this Icon only. — Devansh Baldwa, Feb 22 '20 at 15:08
I don't think you can do that without using `dropDownButton`. — John Joe, Feb 22 '20 at 16:56
There might be a possible way out to this problem. Lets wait and see what others have to respond — Devansh Baldwa, Feb 22 '20 at 16:57
Also, please answer if you know, how can I use the DropdownButton with it not taking any space i.e. it should just take the space of the the down arrow on which I can click to get the DropdownList... — Devansh Baldwa, Feb 22 '20 at 17:00
You can do more if you customize it. See details [here](https://stackoverflow.com/a/64751399/9405238). — Doan Bui, Nov 09 '20 at 12:13

score 5 · Accepted Answer · answered Mar 12 '21 at 14:41

The easiest way is to use PopupMenuButton. example code:

AppBar(
    title: Text('Awesome appbar'),
    actions: [
      IconButton(
        icon: Icon(MdiIcons.pencil),
        iconSize: 21,
        onPressed: () {
          print('I want to edit');
        },
      ),
      PopupMenuButton<String>(
        icon: Icon(Icons.filter_list),
        onSelected: (String result) {
          switch (result) {
            case 'filter1':
              print('filter 1 clicked');
              break;
            case 'filter2':
              print('filter 2 clicked');
              break;
            case 'clearFilters':
              print('Clear filters');
              break;
            default:
          }
        },
        itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
          const PopupMenuItem<String>(
            value: 'filter1',
            child: Text('Filter 1'),
          ),
          const PopupMenuItem<String>(
            value: 'filter2',
            child: Text('Filter 2'),
          ),
          const PopupMenuItem<String>(
            value: 'clearFilters',
            child: Text('Clear filters'),
          ),
        ],
      ),
      PopupMenuButton<String>(
        onSelected: (String result) {
          switch (result) {
            case 'option1':
              print('option 1 clicked');
              break;
            case 'option2':
              print('option 2 clicked');
              break;
            case 'delete':
              print('I want to delete');
              break;
            default:
          }
        },
        itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
          const PopupMenuItem<String>(
            value: 'option1',
            child: Text('Option 1'),
          ),
          const PopupMenuItem<String>(
            value: 'option2',
            child: Text('Option 2'),
          ),
          const PopupMenuItem<String>(
            value: 'delete',
            child: Text('Delete'),
          ),
        ],
      )
    ],
  );

score 0 · Answer 2 · answered Feb 22 '20 at 17:56

0

I guess Popup Menu Button is probably what you want.

answered Feb 22 '20 at 17:56

John Joe

12,412
16
70
135

Even the Popup Menu Button will take space right? So how do I implement it on an Icon? – Devansh Baldwa Feb 28 '20 at 16:11

Drop Down List in Flutter using an Icon

2 Answers2

Linked