【问题标题】:Dependent flutter dropdownbutton with firestore带有firestore的依赖颤动下拉按钮
【发布时间】:2021-01-19 21:59:38
【问题描述】:

您能否分享一个在 Flutter 中由 Firestore 支持的级联下拉列表的示例?我需要代码。 谢谢

【问题讨论】:

    标签: flutter cascade dropdownbutton


    【解决方案1】:

    请检查以下代码

    class ListBoxDTO {
      String iD;
      String name;
    
      ListBoxDTO({this.iD, this.name});
    
      ListBoxDTO.fromJson(Map<String, dynamic> json) {
        iD = json['ID'];
        name = json['name'];
      }
    
      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['ID'] = this.iD;
        data['name'] = this.name;
        return data;
      }
    }
    
    
    enum Loading {
      LOADING, SUCCESS, FAILED
    }
     
    
    
    class ListDropDown extends StatefulWidget {
      Function onChanged;
      String selectedOpt;
    
      ListDropDown({@required this.onChanged, @required this.selectedOpt,});
    
      @override
      _ListDropDownState createState() => _ListDropDownState();
    }
    
    class _ListDropDownState extends State<ListDropDown> {
      Loading listLoading = Loading.SUCCESS;
      List<DropdownMenuItem<String>> dropDownMenu = List<DropdownMenuItem<String>>();
      GlobalKey _dropDownKey = GlobalKey();
    
      @override
      void initState() {
        super.initState();
        getListData();
      }
    
      @override
      Widget build(BuildContext context) {
        return Container(constraints: BoxConstraints(minHeight: 40.0,maxHeight: 40.0),
          decoration: BoxDecoration(
              color: widget.fillColor != null ? Color(widget.fillColor) : Colors.transparent,
              border: Border.all(color: Colors.grey, width: 0.0),
              borderRadius: BorderRadius.all(Radius.circular(6.0))),
          padding: EdgeInsets.only(top: 0.0, bottom: 0.0, left: 8.0, right: 8.0),
          child: Row(
            children: <Widget>[
              loadingProgressIndicator(getListData, listLoading),
              Expanded(
                flex: 1,
                child: DropdownButton<String>(
                  underline: Container(),
                  key: _dropDownKey,
                  isExpanded: true,
                  items: dropDownMenu,
                  onChanged: widget.onChanged,
                  value: widget.selectedOpt,
                ),
              ),
            ],
          ),
        );
      }
    
      void getListData() {
        setState(() {
          listLoading = Loading.LOADING;
        });
        (Firebase Data Request).then((List<ListBoxDTO> list) {
          if (list == null) {
            setState(() {
              listLoading = Loading.FAILED;
            });
          } else if (list.length > 0) {
            setState(() {
              listLoading = Loading.SUCCESS;
            });
            _getMenu(list);
          } else {
            setState(() {
              listLoading = Loading.SUCCESS;
            });
          }
        });
      }
    
      void _getMenu(List<ListBoxDTO> options) {
        setState(() {
          if (options != null && options.length > 0) {
            options.forEach((data) => dropDownMenu.add(
              DropdownMenuItem<String>(
                value: "${data.iD}",
                child: getTextView(
                    context: context,
                    text: data.name.toString(),
                    maxLines: 1),
              ),
            ));
            setState(() {
              widget.onChanged(options[0].iD);
            });
          }
        });
      }
    
      Widget loadingProgressIndicator(Function functionName, Loading loading) {
        if (loading == Loading.LOADING) {
          return Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                width: 18.0,
                height: 18.0,
                child: CircularProgressIndicator(
                  strokeWidth: 1.5,
                ),
              ),
            ],
          );
        } else if (loading == Loading.SUCCESS) {
          return Container();
        } else {
          return IconButton(
            icon: Icon(
              Icons.warning,
              color: Colors.redAccent,
            ),
            onPressed: () {
              functionName();
            },
          );
        }
      }
    }
    

    【讨论】:

    • 感谢@Nilesh Senta 提供代码。但我非常抱歉我无法使用您的代码。您能否将完整的代码与导入文件等命名空间分享?
    猜你喜欢
    • 2019-01-31
    • 2020-12-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-18
    • 2021-09-17
    • 2018-11-23
    相关资源
    最近更新 更多