DropDown Flutter 的自定义装饰答案

【问题标题】：Custom Decoration for DropDown FlutterDropDown Flutter 的自定义装饰
【发布时间】：2021-11-12 10:58:54
【问题描述】：

谁能帮我从这些 textField 获得相同的样式到我的 DropDown 小部件？

这是 textField 小部件

TextFormField(
        obscureText: obscureText,
        controller: controller,
        style: TextStyle(color: Colors.white),
        decoration: InputDecoration(
            contentPadding:
                EdgeInsets.symmetric(vertical: 0, horizontal: 12),
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.purple[800])),
            border: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.purple[800])),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.purple[800], width: 2.0),
            )),
        validator: validator),

这是我的下拉菜单：

DropdownButton(
                    value: professionChoosed,
                    onChanged: (newValue) {
                      setState(() {
                        professionChoosed = newValue;
                      });
                    },
                    items: professionList.map((valueItem) {
                      return DropdownMenuItem(
                        value: valueItem,
                        child: Text(valueItem),
                      );
                    }).toList(),
                  ),

这是模拟器的预览： simulator screenshot

【问题讨论】：

stackoverflow.com/questions/53150219/…i.stack.imgur.com/lRr1j.png
你想要哪种装修？
@RavindraS.Patil ，我想在上面添加一个标签，并使下拉列表的宽度与之前的输入相同
@AnmolMishra 是的，我已经完成了圆角，但仍然无法使宽度与其他输入相同。

标签： flutter

【解决方案1】：

使用 DropdownButtonFormField 代替 DropdownButton

     DropdownButtonFormField(
                decoration: const InputDecoration(
                contentPadding:
                    EdgeInsets.symmetric(vertical: 0, horizontal: 12),
                enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.purple[800])),
                border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.purple[800])),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.purple[800], width: 2.0),
                )),
                    value: professionChoosed,
                    onChanged: (newValue) {
                      setState(() {
                        professionChoosed = newValue;
                      });
                    },
                    items: professionList.map((valueItem) {
                      return DropdownMenuItem(
                        value: valueItem,
                        child: Text(valueItem),
                      );
                    }).toList(),
                  ),

【讨论】：

这太棒了，但我想它应该是第 2 行的“新”而不是“常量”。
"const" 存在是因为 InputDecoration 中提供的值不是动态的，它们是常量（静态）。如果您觉得这很有用，也可以标记为答案。谢谢
好，最后一个问题，如何更改所选选项的文本颜色？
完成了。我刚刚添加了这种样式：TextStyle(color: Colors.white)。感谢您的帮助。
很高兴为您提供帮助:)

【解决方案2】：

试试下面的代码希望它对你有帮助。参考官方文档here下拉

 InputDecorator(
    decoration: const InputDecoration(border: OutlineInputBorder()),
    child: DropdownButtonHideUnderline(
      child: DropdownButton<String>(
        value: dropdownValue,
        isDense: true,
        isExpanded: true,
        onChanged: (String? newValue) {
          setState(() {
            dropdownValue = newValue!;
          });
        },
        items: <String>['One', 'Two', 'Free', 'Four']
            .map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      ),
    ),
  ),

您的结果屏幕 ->

【讨论】：

谢谢。我去了上面的解决方案。感谢您的宝贵时间。
欢迎 @LearningCode 享受 Flutter 编码

【解决方案3】：

您可以使用我的 DropdownButton2 包中的 DropdownButtonFormField2。它与 DropdownButtonFormField 相同，但更可定制，并且在按钮下方有稳定的下拉菜单。试试看！

包：DropdownButton2

【讨论】：