plural_selectable

Description:

plural selectable

Plural Selectable #
#


You will now be able to make multiple selections within your model. And you will be able to create a widget of your own by customizing this selection style as you wish.


First of all, you must have a model and there is a variable requested from you in this model. Let's explain with an example


For example, you have a Map. There must be a list structure in this model, if you do not have a list, you will encounter an error. It doesn't matter if your list is empty. You have different models in this list. The thing to remember is that the different structures in this list model must be distinguished from each other, and each of them must have an id variable. With this id, it can be easily distinguished whether it is selected or not.
Remember, the ids in each list must be different.


Install #
In the pubspec.yaml of your project, add the following dependenciy:
dependencies:
plural_selectable: <latest_version>
copied to clipboard

Getting started #
#
{
"name":"--",
"list":[
{
"id":1,
"name": "---",
"value": "---",
}
{
"id":2,
"name": "---",
"value": "---",
}
],
}
copied to clipboard
List<SelectModel> modelList = [
SelectModel(id: 0, name: "test 1 select", list: [
InnerSelectModel(id: 0, value: "test 1 inner"),
InnerSelectModel(id: 1, value: "test 2 inner"),
InnerSelectModel(id: 2, value: "test 3 inner"),
]),
SelectModel(id: 1, name: "test 1 select", list: [
InnerSelectModel(id: 3, value: "test 3 inner"),
InnerSelectModel(id: 4, value: "test 4 inner"),
InnerSelectModel(id: 5, value: "test 5 inner"),
]),
];
copied to clipboard

After adding your model to the widget, you must specify which list is selectable.

selectList: map,
innerList: (model) => model["list"],
// This model returns your original model and waits for you to display your selectable list.
// each model returns by traversing your list structure.
copied to clipboard
Selectable<Map>(
selectList: map,
innerList: (model) => model["list"],
builder: (context, model) {
return SelectableHeader(
title: Text("${model["name"]}"),
);
},
innerBuilder: (context, inner, index) {
return InnerSelect(
leading: Text("${inner[index]["value"]}"),
);
},
onSelect: (model, isSelect) {},
selected: selected,
)
copied to clipboard
Selected #
If there are previously selected structures in the model you have. And you want to show that they are selected in the widget.
selected: [1,3,5]
copied to clipboard
As you can see above, you can specify that they are selected by writing the selected ones as a list.
Selectable<SelectModel>(
parentList: modelList,
childList: (model) => model.list,
builder: (context, model, isSlected) {
return SelectableParent(
decoration: BoxDecoration(
color: isSlected ? Colors.green[400] : Colors.red,
borderRadius: BorderRadius.circular(10.0),
),
child: Stack(
children: [
Positioned(
bottom: 4.0,
left: 3.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Plural Selectable",
style: TextStyle(
color:
isSlected ? Colors.white : Colors.black,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
Text(
"Plural Selectable",
style: TextStyle(
color:
isSlected ? Colors.white : Colors.black45,
fontSize: 13.0,
fontWeight: FontWeight.w300,
),
),
],
),
),
],
),
);
},
childBuilder: (context, inner, index, isSelected) {
debugPrint("Check $isSelected");
return SelectableChild(
selected: isSelected,
leading: Text(
"${inner[index].value}",
style: TextStyle(
color: isSelected ? Colors.white : Colors.black,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
suffixIcon: const Icon(
Icons.done,
color: Colors.white,
),
margin: const EdgeInsets.symmetric(
horizontal: 30.0, vertical: 5.0),
);
},
onSelect: (selectedId, isSelect) {
debugPrint("Seçili olan id : $selectedId değeri : $isSelect");
},
selectedList: selected,
),
copied to clipboard