在flutter中的DropDownButton左侧添加图标(展开) [英] Adding icon to left of DropDownButton (expanded) in flutter

问题描述

我想在 DropDownButton 的左侧添加图标，但是找不到解决方法.我想要实现的是这样的:

I want to add icon to left of DropDownButton but can't find a way to do so. What I want to achieve is like this:

我尝试了以下代码，但是将图标放置在不需要的位置，并且它还会覆盖箭头图标:

I have tried following code but it places icon to right where I don't want it and it also overrides arrow icon:

 `@override
  Widget build(BuildContext context) {
  return Scaffold(
  body: Container(
    margin: EdgeInsets.only(top: 64.0, left: 16.0, right: 16.0),
    color: Colors.white,
    child: DropdownButton(
      icon: Icon(
        Icons.person,
        color: Colors.redAccent,
        size: 20.09,
      ),
      isExpanded: true,
      items: _studentList.map((val) {
        return DropdownMenuItem(
          value: val,
          child: Text(val),
        );
      }).toList(),
      value: _currentSelectedItem,
      onChanged: (value) {
        setState(() {
          _currentSelectedItem = value;
        });
      },
    ),
  ),
);
  }`

以上代码的输出如下:

我还尝试将 Icon()和 DropDownButton()放置在 Row()小部件内，但这不允许> DropDownButton()即可扩展到全宽.

I have also tried to place Icon() and DropDownButton() inside Row() widget but that does not allow the DropDownButton() to expand to full width.

任何帮助将不胜感激.

谢谢

推荐答案

没有用于按所需方式添加图标的特定属性，但是您始终可以在代码中进行查找并进行一些调整.使用以下代码将 Icon()放置在 DropDownButton()按钮的顶部.

There is no specific attribute for adding icon the way you want but you can always work around your code and find some tweaks. Use the following code which will place you Icon() on top of your DropDownButton() button.

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

这篇关于在flutter中的DropDownButton左侧添加图标(展开)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！