spinner_box 0.0.3 spinner_box: ^0.0.3 copied to clipboard
The drop-down criteria filter box supports single selection, multiple selection, and user-defined filtering content.
The main purpose of writing is to produce components that are easy to use and have a low amount of code. Different from other filter components (' Stack 'Overlay'), this project uses the route jump 'Navigator.push', which can be used anywhere in the component tree, regardless of how the filter popover works.
'Stack' : The highest level tree of the page needs to be wrapped to realize the display of pop-up content. Normally speaking, the amount of code writing is relatively large, and the configuration is also more;
'Overlay' : This component view has a high level, which is a good choice for the top layer content display (Toast), but because of the high level, if you want to continue to display other selected input content after the pop-up box is displayed, it will block the display of input action page (such as keyboard, or other 'Navigator.push').
Spinner Box #
Features #
- Quickly builds conditional filters in the form of lists or button sets;
- Support additional components (input boxes, selectors, etc.) after button sets;
- Supports the customization of the content of the pop-up;
To do #
- Extend the custom theme configuration, including but not limited to buttons, check;
- Optimize the use of some types;
images #
Installation #
See the installation instructions on pub.
More details are available ./example #
Simple use #
SpinnerBox.rebuilder(
titles: const ['单选条件', '单选条件'],
builder: (notifier) {
return [
SpinnerFilter(
data: _condition1,
onCompleted: (result, name, data) {
notifier.updateName(name);
setState(() {
_result = result;
_condition1 = data;
});
},
).heightPart,
...
];
},
),
Update the title or highlighting of the selected item #
notifier.updateName(name);
or
notifier.setHighlight(true)
Sets the width of the pop-up #
SpinnerBox.builder(
titles: const ['Builder', 'width-full'],
builder: (notifier) {
return [
SpinnerPopScope(
width: 150, < ------- fixed width
offsetX: 30, < ------- offset
child: ValueListenableBuilder(
valueListenable: _condition2,
builder: (context, value, child) {
...
}),
),
SpinnerPopScope(
width: double.infinity, < ------- screen width
child: ValueListenableBuilder(
valueListenable: _condition2,
builder: (context, value, child) {
...
}),
)
];
},
)
Interception #
SpinnerFilter(
data: _condition3,
onItemIntercept: (group, index) { < ----- click event interception
if (group.key == 'text2' && index == 2) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('欸~ 就是选不了~')),
);
return true;
}
return false;
},
onCompleted: (result, name, data) {
...
},
).heightPart,
Custom splicing options #
SpinnerFilter(
data: _condition3,
attachment: [ < ----- custom components
_InputAttach(data: _condition3),
_PickerAttach(data: _condition3)
],
onCompleted: (result, name, data) {
...
},
).heightPart,
class _InputAttach extends AttachmentView {
_InputAttach({required super.data});
final textEditing = TextEditingController();
@override
String get groupKey => 'text1'; < --- association option grouping
@override
String get extraName => '输入标题';
@override
Widget build(BuildContext context) {
textEditing.text = extraData ?? '';
return Container(
height: 38,
color: Colors.black12,
child: CupertinoTextField(
controller: textEditing,
placeholder: '输入框',
onChanged: (value) {
updateExtra(value);
},
),
);
}
@override
void reset() {
super.reset();
textEditing.clear();
}
}