Question

am试图创建一个带有图标的下拉按钮。.我希望整个下拉菜单都带有下划线，并且我想从资产中设置图标，而不是从图标设置..再加上我想管理其高度.. < / p>

如何实现所有这些？

现在正在做什么：

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

并获得以下结果：

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

该怎么做？

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

如何自定义下拉按钮

1 个答案: