如何在Flutter中实现Dropdown的这种设计

Question

我想实现下拉菜单的这种设计，但是不确定如何获得这种下拉菜单

 Container(
             padding: EdgeInsets.all(10.0),
             child: DropdownButtonHideUnderline(
               child: DropdownButton<String>(
                  items:_locations.map((String val){
                    return DropdownMenuItem<String>(
                      value: val,
                      child: Container(
                          margin: EdgeInsets.only(left: 10.0,right: 10.0),
                          child: new Text(val)
                      ),
                    );
                  }).toList(),
                  hint:Text(_SelectdType),
                  onChanged:(String val){
                    _SelectdType = val;
                    setState(() {});
                  }
           ),
             ),
           )

Answer 1

在hint对DropdownButton与child该DropdownMenuItem只是部件和其他事物一样，所以你可以把你想要的任何存在。

本示例使用Map来提供文本和图标：

final Map<String, IconData> _data = Map.fromIterables(
    ['First', 'Second', 'Third'],
    [Icons.filter_1, Icons.filter_2, Icons.filter_3]);
String _selectedType;
IconData _selectedIcon;
...

Container(
  padding: EdgeInsets.all(10.0),
  child: DropdownButtonHideUnderline(
    child: DropdownButton<String>(
        items: _data.keys.map((String val) {
          return DropdownMenuItem<String>(
            value: val,
            child: Row(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 10.0),
                  child: Icon(_data[val]),
                ),
                Text(val),
              ],
            ),
          );
        }).toList(),
        hint: Row(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 12.0),
              child:
                  Icon(_selectedIcon ?? _data.values.toList()[0]),
            ),
            Text(_selectedType ?? _data.keys.toList()[0]),
          ],
        ),
        onChanged: (String val) {
          setState(() {
            _selectedType = val;
            _selectedIcon = _data[val];
          });
        }),
  ),
),