dart - 如何自定义下拉按钮

Question

我正在尝试创建一个带有图标的下拉按钮..我希望整个下拉列表都带有下划线，并且我想从我的资产而不是图标中设置图标..另外我想管理它的高度..

如何实现这一切？

现在正在做的是：

  Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    new InputDecorator(
                      decoration: const InputDecoration(
                        icon: const Icon(
                          Icons.flag,
                          color: Color(0xFF49C275),
                        ),
                      ),
                      child: DropdownButtonHideUnderline(
                        child: new DropdownButton<Gender>(
                          hint: new Text("المدينة"),
                          value: selectedGender,
                          onChanged: (Gender newValue) {
                            setState(() {
                              selectedGender = newValue;
                            });
                          },
                          items: genders.map((Gender gender) {
                            return new DropdownMenuItem<Gender>(
                              value: gender,
                              child: new Text(
                                gender.gender,
                                style:
                                    new TextStyle(color: Color(0xFF707070)),
                              ),
                            );
                          }).toList(),
                        ),
                      ),
                    ),
                  ],
                ),

并得到这个结果：

当我希望它看起来像这样时：

这个怎么做？

标签： dartflutter

Answer 1

 Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                new InputDecorator(
                  decoration: const InputDecoration(
                    // use prefixIcon instead of icon  
                    prefixIcon: const Icon(  
                      Icons.flag,
                      color: Color(0xFF49C275),
                    ),
                  ),
                  child: DropdownButtonHideUnderline(
                    child: new DropdownButton<Gender>(
                      hint: new Text("المدينة"),
                      value: selectedGender,
                      onChanged: (Gender newValue) {
                        setState(() {
                          selectedGender = newValue;
                        });
                      },
                      items: genders.map((Gender gender) {
                        return new DropdownMenuItem<Gender>(
                          value: gender,
                          child: new Text(
                            gender.gender,
                            style:
                                new TextStyle(color: Color(0xFF707070)),
                          ),
                        );
                      }).toList(),
                    ),
                  ),
                ),
              ],
            ),