如何根据设计使Flutter中的Custom下拉按钮？

编程问答 2022-08-16

问题描述

我正在制作一个必须在其中显示下拉按钮的UI，如下所示：

enter image description here

当我们按下下拉按钮时，它会打开并显示如下选项：

enter image description here

您能帮我解决这个问题吗，并检查我的代码，使我如何制作第一张照片中显示的下拉按钮。

但是我的下拉按钮看起来像这样：

enter image description here

下拉按钮中使用的下拉选项： 

class DropDownConstants {
static const List<String> dropdownNotes = [
    "House","Flat"
  ];
}

我的下拉按钮代码： 

  class HADropDown extends StatefulWidget {
      final Function(String) premisesTypeChanged;
      final String premisesTypeHint;
      final String premisesTypeReceived;
    
      HADropDown({this.premisesTypeChanged,this.premisesTypeReceived,this.premisesTypeHint,this.showError});
    
      @override
      _HADropDownState createState() => _HADropDownState();
    }
    
    class _HADropDownState extends State<HADropDown> {
      final List<String> subjects = [];
    String selectedSubject;
    
      @override
      void initState() {
       DropDownConstants.dropdownNotes.forEach((val){
          subjects.add(val);
        });
       if(widget.premisesTypeReceived!=null && widget.premisesTypeReceived.length>2){
         if(widget.premisesTypeReceived==subjects[0]){
           selectedSubject = subjects[0];
         }
         if(widget.premisesTypeReceived==subjects[1]){
           selectedSubject = subjects[1];
         }
         if(widget.premisesTypeReceived==subjects[2]){
           selectedSubject = subjects[2];
         }
         if(widget.premisesTypeReceived==subjects[3]){
           selectedSubject = subjects[3];
         }
         if(widget.premisesTypeReceived==subjects[4]){
           selectedSubject = subjects[4];
         }
         if(widget.premisesTypeReceived==subjects[5]){
           selectedSubject = subjects[5];
         }
       }else{
         if(widget.premisesTypeReceived=='0'){
           selectedSubject = subjects[0];
         }
         if(widget.premisesTypeReceived=='1'){
           selectedSubject = subjects[1];
         }
         if(widget.premisesTypeReceived=='2'){
           selectedSubject = subjects[2];
         }
         if(widget.premisesTypeReceived=='3'){
           selectedSubject = subjects[3];
         }
         if(widget.premisesTypeReceived=='4'){
           selectedSubject = subjects[4];
         }
         if(widget.premisesTypeReceived=='5'){
           selectedSubject = subjects[5];
         }
       }
        super.initState();
    
    
      }
    
    
      @override
      void dispose() {
        subjects.clear();
        selectedSubject='';
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Material(
          color: Colors.transparent,child: Column(mainAxisSize: MainAxisSize.min,crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
              Container(
                height: 60,decoration: Boxdecoration(
                    color: Colors.transparent,borderRadius: BorderRadius.all(
                      Radius.circular(30),),border:widget.showError?Border.all(
                      color: ColorsConstant.RED_COLOR,): Border.all(
                        color: ColorsConstant.PRIMARY_COLOR,padding: EdgeInsets.symmetric(horizontal: 16),child: Row(
                  children: <Widget>[
                    Container(margin:EdgeInsets.symmetric(horizontal: 16),child: Icon(
    MyFlutterApp.asterisk,color: Colors.red,size: 10,);),//It is a custom icon dowloaded from Fluttericon
                    Expanded(
                      child: DropdownButtonHideUnderline(
                        child: ButtonTheme(
                          buttonColor: Colors.transparent,child: DropdownButton<String>(
                            isDense: true,hint: Text(widget.premisesTypeHint),icon: Icon(
                              Icons.keyboard_arrow_down,color: ColorsConstant.HINT_COLOR,value: selectedSubject,elevation: 0,isExpanded: true,onChanged: (value) {
                              setState(() {
                                selectedSubject = value;
                              });
                              widget.premisesTypeChanged(value);
                            },items: subjects.map<DropdownMenuItem<String>>((value) {
                              return DropdownMenuItem(
                                child:
                                    Text(
                                  value,style: TextStyle(
                                    color: ColorsConstant.HINT_COLOR,value: value,);
                            }).toList(),],);
      }
    
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dartdropdowndropdownwidget