First, custom filter box button view, layout is very simple, a listView can be done. 1. Add a selectedModel property to the data Model to record the currently selected filters (currently radio only). 2. When the number of buttons is less than 3, the maximum width of the button is 1/3 of the screen width; If the value is smaller than the screen width, the value is 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; }); }));Copy the code

Define filter data display list view. Define a mask layer on the remaining view with a black and transparent background, and then display the listView on the Container. The listView displays the filtered data content. Visibility controls whether the overall view is visible. The code is 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]); }); }),),),),);Copy the code

General idea is above two points, have a question welcome to leave a comment. Later will join the animation effect, will also be attached to the specific project links, please look forward to!