如何在flutter中显示按钮的下拉列表

Question

我想从底部开始下拉列表，这是我的下拉列表代码

Container(
                              height: 55.0,
                              width: MediaQuery.of(context).size.width *
                                  0.43,
                              child: DropdownButtonFormField<String>(
                                decoration: InputDecoration(
                                  errorText: _validatedrop
                                      ? 'This is the required field'
                                      : null,
                                      focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Color(int.parse(textfieldBorderColor)))),
                                  border: OutlineInputBorder(
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(10.0))),
                                  errorBorder: OutlineInputBorder(
                                      borderSide: BorderSide(
                                          color: Colors.red, width: 5)),
                                ),
                                items: genderlist
                                    .map<DropdownMenuItem<String>>(
                                        (String value) {
                                  return DropdownMenuItem<String>(
                                 
                                      value: value, child: Text(value));
                                }).toList(),
                                hint: Text(
                                  "Male",
                                  style: GoogleFonts.montserrat(
                                      color: Color(
                                          int.parse(hinttextColor))),
                                ),
                                onChanged: (value) async {
                                  setState(() {
                                    this.selectedGender = value!;

                                    if (this.selectedGender == "") {
                                      _validatedrop = true;
                                      
                                    } else {
                                      _validatedrop = false;
                                    }
                                  });
                                },
                              )),

它的输出看起来像这样

我希望它的输出像这样，它应该从下面开始

如果有人知道如何做到这一点，请帮忙。

Answer 1

尝试下面的代码希望对您有帮助。您必须使用此处的dropdown_below

创建您的列表

List genderList = [
    {'no': 1, 'gender': 'Male'},
    {'no': 2, 'gender': 'Female'},
    {'no': 3, 'gender': 'Other'}
  ];

一个变量并列出我们的价值

List<DropdownMenuItem<Object?>> _dropdownTestItems = [];
  var selectedGender;

创建 initState() 和 dispose() 方法：

  @override
  void initState() {
    _dropdownTestItems = buildDropdownTestItems(genderList);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

在下拉列表中添加您选择的性别值

  List<DropdownMenuItem<Object?>> buildDropdownTestItems(List genderList) {
    List<DropdownMenuItem<Object?>> items = [];
    for (var i in genderList) {
      items.add(
        DropdownMenuItem(
          value: i,
          child: Text(
            i['gender'],
            style: TextStyle(color: Colors.black),
          ),
        ),
      );
    }
    return items;
  }

您的小部件：

 Padding(
                padding: const EdgeInsets.all(8.0),
                child: DropdownBelow(
                  itemWidth: 100,
                  itemTextstyle: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w400,
                      color: Colors.black),
                  boxTextstyle: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w400,
                      color: Colors.white54),
                  boxPadding: EdgeInsets.fromLTRB(13, 12, 13, 12),
                  boxWidth: 100,
                  boxHeight: 45,
                  boxDecoration: BoxDecoration(
                    color: Colors.transparent,
                    border: Border.all(width: 1, color: Colors.black,),
                  ),
                  icon: Icon(
                    Icons.arrow_downward,
                    color: Colors.black,
                  ),
                  hint: Text(
                    'Gender',
                    style: TextStyle(
                      color: Colors.black,
                    ),
                  ),
                  value: selectedGender,
                  items: _dropdownTestItems,
                  onChanged: (selectedTest) {
                    setState(() {
                      selectedGender = selectedTest;
                    });
                  },
                ),
              ),

您的结果屏幕->

Answer 2

使用 DropDownButton2 包。访问 https://pub.dev/packages/dropdown_button2