Dependent flutter dropdownbutton with firestore

Question

Can you please share an example of cascading dropdown backed by firestore in flutter? I need the code. Thanks

Answer 1

Please check the below code

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