Flutter 中使用图标的下拉列表

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

Answer 1

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'),
          ),
        ],
      )
    ],
  );

Answer 2

我猜弹出菜单按钮可能是你想要的。