1. First, customize the button view of the filter box. The layout is very simple, and a listView can be done.
1. Added a selectedModel property to the data model to record the currently selected filter options (currently only supports single selection).
2. When the number of buttons is less than 3, the maximum width of the button is 1/3 of the screen width; when it is less than the screen width, it is the screen width/number of buttons.
The specific code is as follows:
var text = != null
?
: ?? "";
return Container(
padding: (horizontal: 20),
constraints: BoxConstraints(
maxWidth: (context). /
( > 3 ? 3 : ),
maxHeight: ),
color: ,
child: InkWell(
child: Row(
mainAxisAlignment: ,
children: [
Text(
text,
maxLines: 1,
overflow: ,
style: TextStyle(
fontSize: ,
color:
?
: ),
),
SizedBox(
width: 4,
),
== true
? Icon(Icons.keyboard_arrow_down,
color: )
: Icon(Icons.keyboard_arrow_up, color: ),
],
),
onTap: () {
setState(() {
if (_selectModel != null && _selectModel != model) {
_selectModel.isSelected = false;
}
= !;
_selectModel = model;
});
}));
2. Define the filter data display list view.
First, define a black transparent mask layer on the remaining view, and then display the listView on this layer of Container. The data displayed by the listView is the filtered specific data content. Visibility controls whether the overall view is visible, the specific code is as follows:
visible:
<FilterModelProvider>(context).isShowFilterOptionsView ??
false,
child: GestureDetector(
onTap: () {
<FilterModelProvider>(context, listen: false)
.hideFilterOptionsView();
},
child: Container(
color: Colors.black54,
child: Container(
margin: (
bottom: -
-
-
listViewHeight +
),
color: ,
child: (
padding: ,
itemCount: _dataList.length,
itemBuilder: (BuildContext context, int index) {
return InkWell(
child: Container(
height: ,
child: Column(
mainAxisAlignment: ,
// crossAxisAlignment: ,
children: [
Text(
_dataList[index].dictValue,
overflow: ,
maxLines: 1,
style: TextStyle(
fontSize: 16,
color: Colors.black87,
fontWeight: ),
),
Divider(
height: 1,
indent: 1,
)
],
),
),
onTap: () {
<FilterModelProvider>(context, listen: false)
.selectFilterOption(_dataList[index]);
},
);
}),
),
),
),
);
This is the article about the sample code of Flutter implementing custom filter boxes. For more related contents of Flutter custom filter boxes, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!