Sample code for Flutter to implement a custom filter box

Directory 1. First of all, customize the button view of the filter box. The layout is very simple, and one listView can be done. 2. Define a filtered data presentation list view.

1. First of all, customize the button view of the filter box. The layout is very simple, and one listView can be done.

1. Add an selectedModel attribute to the data model to record the currently selected filter items (currently only single selection is supported).
2. When the number of buttons is less than 3, the maximum width of buttons is 1/3 of the screen width; If it is less than the screen width, it is the screen width/number of buttons.

The specific code is as follows:

var text = model.selectedFilterModel != null
        ? model.selectedFilterModel.dictValue
        : model.name ?? "";
    return Container(
        padding: EdgeInsets.symmetric(horizontal: 20),
        constraints: BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width /
                (widget.dataList.length > 3 ? 3 : widget.dataList.length),
            maxHeight: widget.viewHeight),
        color: Colors.white,
        child: InkWell(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  text,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      fontSize: widget.textSize,
                      color: model.isSelected
                          ? widget.textSelectColor
                          : widget.textColor),
                ),
                SizedBox(
                  width: 4,
                ),
                model.isSelected == true
                    ? Icon(Icons.keyboard_arrow_down,
                        color: widget.textSelectColor)
                    : Icon(Icons.keyboard_arrow_up, color: widget.textColor),
              ],
            ),
            onTap: () {
              setState(() {
                if (_selectModel != null && _selectModel != model) {
                  _selectModel.isSelected = false;
                }
                model.isSelected = !model.isSelected;
                _selectModel = model;
              });
            }));

2. Define a filtered data presentation list view.

First, define a mask layer with black and transparent background on the remaining views, and then display the data displayed by listView and listView on this layer of Container as the specific data content of screening. Visibility controls whether the overall view is visible, as follows:

      visible:
          Provider.of<FilterModelProvider>(context).isShowFilterOptionsView ??
              false,
      child: GestureDetector(
        onTap: () {
          Provider.of<FilterModelProvider>(context, listen: false)
              .hideFilterOptionsView();
        },
        child: Container(
          color: Colors.black54,
          child: Container(
            margin: EdgeInsets.only(
                bottom: SizeFit.screenHeight -
                    widget.filterButtonViewHeight -
                    SizeFit.appBarHeight -
                    listViewHeight +
                    animation.value),
            color: Colors.white,
            child: ListView.builder(
                padding: EdgeInsets.zero,
                itemCount: _dataList.length,
                itemBuilder: (BuildContext context, int index) {
                  return InkWell(
                    child: Container(
                      height: widget.listHeight,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        // crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            _dataList[index].dictValue,
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                            style: TextStyle(
                                fontSize: 16,
                                color: Colors.black87,
                                fontWeight: FontWeight.normal),
                          ),
                          Divider(
                            height: 1,
                            indent: 1,
                          )
                        ],
                      ),
                    ),
                    onTap: () {
                      Provider.of<FilterModelProvider>(context, listen: false)
                          .selectFilterOption(_dataList[index]);
                    },
                  );
                }),
          ),
        ),
      ),
    );