如何在颤振中显示来自 botton 的下拉列表 [英] how to show list of dropdown from botton in flutter

问题描述

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

容器(高度:55.0，宽度:MediaQuery.of(context).size.width *0.43,孩子:DropdownButtonFormField(装饰:输入装饰(错误文本:_validatedrop?'这是必填字段': 空值，focusBorder: OutlineInputBorder(borderSide: BorderSide(color: Color(int.parse(textfieldBorderColor)))),边框:轮廓输入边框(边界半径:BorderRadius.all(Radius.circular(10.0))),错误边界:大纲输入边界(边界边:边界边(颜色:Colors.red，宽度:5))，),项目:性别列表.map>((字符串值) {return DropdownMenuItem(值:值，子:文本(值))；}).toList(),提示:文本(男"，样式:GoogleFonts.montserrat(颜色:颜色(int.parse(hinttextColor))),),onChanged:(值)异步{设置状态((){this.selectedGender = 值！;如果(this.selectedGender =="){_validatedrop = 真；} 别的 {_validatedrop = 假；}});},)),

它的输出看起来像这样

我想要这样的输出，它应该从下面开始

如果有人知道怎么做，请帮忙.

解决方案

试试下面的代码希望对你有帮助.您必须使用

I want to start the list of dropdown from its bottom, here my dropdown code

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

its output look like this

and i want its output like this, it should start from below

Please help if anyone know how to do this.

解决方案

Try below code hope its helpful to you . you must used dropdown_below from here

Create your list

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

One varibale and list our value

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

Create initState() and dispose() method:

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

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

Add your selected gender value in dropdown

  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;
  }

Your Widget:

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

Your result screen->

这篇关于如何在颤振中显示来自 botton 的下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！