* grouped (checkbox/radioButton)
* customisable grouped checkbox
* grouped chips
* grouped switch
* recuperate the actual selection
* make multiple selection
* dialogGroupedCheckbox
* list of groupedCheckbox
* list of customisable groupedCheckbox
* select/deselect items pragrammatically
Add the following to your pubspec.yaml file:
dependencies:
checkbox_grouped: ^2.0.0
SimpleGroupedCheckbox<int>(
controller: controller,
itemsTitle: ["1" ,"2","4","5"],
values: [1,2,4,5],
groupStyle: GroupStyle(
activeColor: Colors.red,
itemTitleStyle: TextStyle(
fontSize: 13
)
),
checkFirstElement: false,
)GroupController controller = GroupController();| Properties | Description |
|---|---|
isMultipleSelection |
(bool) enable multiple selection in grouped checkbox (default:false). |
initSelectedItem |
(List) A Initialize list of values that will be selected in grouped. |
final selectedItems = controller.selectedItem; controller.enableAll(); controller.disableAll();controller.enabledItemsByValues(List<T> values); controller.enabledItemsByTitles(List<String> itemsTitles); controller.disabledItemsByValues(List<T> values);controller.disabledItemsByTitles(List<String> items)listener will be removed automatically when widget call dispose
controller.listen((v) {
print("$v");
});select one item in single selection or multiple selection
selectValues work only in group when isMultiSelection is true
controller.select(value);
or
controller.selectValues([value]);select all or some items in multiple selection group
controller.selectAll();
or
controller.selectValues([values]);deselect all or some items in multiple selection group
controller.deselectAll();
or
controller.deselectValues([values]);- those method
disabledItemsandenabledItemshas been removed - if you are using complex object in values , you need to implement operator == and hashcode
| Properties | Description |
|---|---|
controller |
(required) Group Controller to recuperate selectionItems and disable or enableItems. |
activeColor |
(deprecated) The color to use when a CheckBox is checked. |
itemsTitle |
(required) A list of strings that describes each checkbox button. Each label must be distinct. |
itemsSubTitle |
A list of strings that describes second Text. |
onItemSelected |
Callback fire when the user make selection |
disableItems |
Specifies which item should be disabled. The strings passed to this must match the Titles |
values |
(required) Values contains in each element. |
checkFirstElement |
make first element in list checked. |
isExpandableTitle |
enable group checkbox to be expandable . |
groupTitle |
Text title for group checkbox. |
groupTitleStyle |
(deprecated) TextStyle of title for group checkbox. |
helperGroupTitle |
(bool) hide/show checkbox in title to help all selection or de-selection,use it when you want to disable checkbox in groupTitle default:true . |
groupTitleAlignment |
(Alignment) alignment of group title in group checkbox. |
groupStyle |
(GroupStyle) the style that should be applied on GroupedTitle,ItemTile,SubTitle. |
CustomGroupedCheckbox<int>(
controller:customController,
groupTitle: "Custom GroupedCheckbox",
itemBuilder: (ctx,index,value,isDisabled){
return Card(
child: Row(
children: <Widget>[
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: Text("$index"),
),
),
Opacity(
opacity: v?1:0,
child: Icon(Icons.check,
color: Colors.green,
size: 24,
),
),
],
),
);
},
itemCount: 10,
values: List<int>.generate(10, (i)=>i),
) CustomGroupController controller = CustomGroupController();final selectedItem = controller.selectedItem; controller.enabledItems([value]); controller.disabledItems([value]);
controller.listen((value){
print(value);
})| Properties | Description |
|---|---|
controller |
(required) Custom Group Controller to recuperate selectionItems and disable or enableItems. |
groupTitle |
widget title for group checkbox. |
itemBuilder |
(required) Called to build children. |
values |
(required) Values contains in each element. |
disableItems |
(List) values that will be disabled |
itemExtent |
The extent the children are forced to have in the main axis |
isScroll |
(bool) To make list of item scrollable |
| Properties | Description |
|---|---|
controller |
(required) Custom Group Controller to recuperate selectionItems and disable or enableItems. |
groupTitle |
widget title for group checkbox. |
itemBuilder |
(required) Called to build children. |
values |
(required) Values contains in each element. |
isScroll |
(bool) To indicate that the list of children scrollable |
gridDelegate |
(SliverGridDelegate) a delegate that controls the layout of the children |
SimpleGroupedChips<int>(
controller: controller,
values: [1,2,3,4,5,6,7],
itemTitle: ["1" ,"2","4","5","6","7"],
chipGroupStyle: ChipGroupStyle.minimize(
backgroundColorItem: Colors.red[400],
itemTitleStyle: TextStyle(
fontSize: 14,
),
),
)GroupController controller = GroupController();| Properties | Description |
|---|---|
isMultipleSelection |
(bool) enable multiple selection in grouped checkbox (default:false). |
initSelectedItem |
(List) A Initialize list of values that will be selected in grouped. |
chipGroupStyle |
(ChipGroupStyle) A Initialize list of values that will be selected in grouped. |
final selectedItems = controller.selectedItem;controller.enabledItemsByValues(List<T> values); controller.enabledItemsByTitles(List<String> itemsTitles); controller.disabledItemsByValues(List<T> values);controller.disabledItemsByTitles(List<String> items)| Properties | Description |
|---|---|
controller |
(required) controller to recuperate selectionItems and disable or enableItems. |
itemsTitle |
(required) A list of strings that describes each chip button. Each label must be distinct. |
disabledItems |
Specifies which item should be disabled. The strings passed to this must match the Titles |
values |
(required) Values contains in each element. |
onItemSelected |
Callback when users make selection or deselection |
isScrolling |
enable horizontal scrolling. |
chipGroupStyle |
(ChipGroupStyle) the style that uses to customize item chip |
SimpleGroupedSwitch<int>(
controller: controller,
values: [1,2,4,5],
itemsTitle: ["1 " ,"2 ","4 ","5 ","6","7"],
groupStyle: SwitchGroupStyle(
itemTitleStyle: TextStyle(
fontSize: 16,
color: Colors.blue,
),
activeColor: Colors.red,
),
)GroupController controller = GroupController();| Properties | Description |
|---|---|
isMultipleSelection |
(bool) enable multiple selection in grouped checkbox (default:false). |
initSelectedItem |
(List) A Initialize list of values that will be selected in grouped. |
final selectedItems = controller.selectedItem;controller.enabledItemsByValues(List<T> values); controller.enabledItemsByTitles(List<String> itemsTitles); controller.disabledItemsByValues(List<T> values);controller.disabledItemsByTitles(List<String> items)| Properties | Description |
|---|---|
controller |
(required) Group Controller to recuperate selectionItems and disable or enableItems. |
itemsTitle |
(required) A list of strings that describes each chip button. Each label must be distinct. |
values |
(required) Values contains in each element. |
disableItems |
Specifies which item should be disabled. The value passed to this must match the values list |
onItemSelected |
Call when users make selection or deselection |
groupStyle |
(SwitchGroupStyle) the style that will customize text,switch |
display groupedCheckbox inside dialog return values selected
showDialogGroupedCheckbox(
context: context,
cancelDialogText: "cancel",
isMultiSelection: true,
itemsTitle: List.generate(15, (index) => "$index"),
submitDialogText: "select",
dialogTitle:Text("example dialog") ,
values: List.generate(15, (index) => index)
)| Properties | Description |
|---|---|
dialogTitle |
(required) Text Widget that describe Title of dialog. |
itemsTitle |
(required) Values contains in each element. |
values |
(required) list of values. |
initialSelectedValues |
list of initial values that you want to be selected. |
isDismissible |
enable multiple selection. |
cancelDialogText |
(string) label for cancelButton. |
submitDialogText |
(string) label for submitButton. |
isMultiSelection |
enable multiple selection. |
display list of groupedCheckbox return all values selected
ListGroupController controller = ListGroupController();| Properties | Description |
|---|---|
isMultipleSelectionPerGroup |
(List) enable multiple selection in each grouped checkbox. |
initSelectedValues |
(List) A Initialize list of values on each group of checkbox that will be selected in group. |
- get all selection
final selectedItems = controller.allSelectedItems;- get all selection by group
final selectedItems = controller.selectedItemsByGroupIndex(indexGroup); controller.enableAll(int indexGroup); controller.disableAll(int indexGroup);controller.enabledItemsByValues(int indexGroup,List<T> values); controller.enabledItemsByTitles(int indexGroup,List<String> itemsTitles); controller.disabledItemsByValues(int indexGroup,List<T> values);controller.disabledItemsByTitles(int indexGroup,List<String> items) ListGroupedCheckbox(
controller: listController,
groupTitles: List.generate(3, (index) => "groupe $index"),
values: List.generate(
3,
(i) =>
List.generate(5, (j) => "${(i + Random().nextInt(100)) * j}"),
),
titles: List.generate(
3,
(i) => List.generate(5, (j) => "Title:$i-$j"),
),
mapItemGroupedType: {
1: GroupedType.Chips,
},
)| Properties | Description |
|---|---|
controller |
(required) manage the ListGroupedCheckbox. |
groupTitles |
(required)Text title for group checkbox in each groupedCheckbox. |
titles |
(required) A list of list of strings that describes each checkbox button. Each label must be distinct in groupedCheckbox. |
values |
(required) Values contains in each element in each groupedCheckbox. |
subTitles |
A list of list strings that describes second Text in each groupedChckbox. |
isScrollable |
(bool) make the parent widget scrollable or disable it (default:true). |
onSelectedGroupChanged |
CallBack to get all selected items when users make select new items or deselect items |
disabledValues |
A nested list of string ,specifies which item should be disabled in each groupedCheckbox. The strings passed to this must match the Titles |
titleGroupedAlignment |
(Alignment) align text title of each group of checkbox |
titleGroupedTextStyle |
(TextStyle) style text title of each group |
mapItemGroupedType |
(Map) define type of each group can be chips/switch/(checkbox or radio) |
##ListCustomGroupedCheckbox
display list of groupedCheckbox return all values selected
ListGroupController controller = ListGroupController();| Properties | Description |
|---|---|
isMultipleSelectionPerGroup |
(List) enable multiple selection in each grouped checkbox. |
initSelectedValuesByGroup |
(List) A Initialize list of values on each group of checkbox that will be selected in group. |
- get all selection
- list
final selectedItems = controller.allSelectedItems;- map
final selectedItems = controller.mapSelectedItems;- get all selection by group
final selectedItems = controller.selectedItemsByGroupIndex(indexGroup);| Properties | Description |
|---|---|
controller |
(required) manage the ListGroupedCheckbox. |
children |
(required) list of CustomIndexedWidgetBuilder to return widget of items for each group,should be non null widgets |
groupTitles |
A list of String for group checkbox in each CustomGrouped. |
groupTitlesWidget |
A list of list of widgets that describes custom Title for each group. |
listValuesByGroup |
(required) Values contains in each element in each CustomGroupedCheckbox. |
isScrollable |
(bool) make the parent widget scrollable or disable it (default:true). |
onSelectedGroupChanged |
CallBack to get all selected items when one of item hit it make select new items or deselect items |
titleGroupedAlignment |
(Alignment) align text title of each group |
titleGroupedTextStyle |
(TextStyle) style text for title of each group |
final controller =
ListCustomGroupController(isMultipleSelectionPerGroup: [true, false]);
final data = [
List<_User>.generate(
10,
(i) => _User(
name: faker.person.name(),
email: faker.internet.email(),
),
),
List<String>.generate(
10,
(i) => faker.person.name(),
)
]
ListCustomGroupedCheckbox(
controller: controller,
onSelectedGroupChanged: (values) {
print(values);
},
isScrollable: true,
titleGroupedAlignment: Alignment.centerLeft,
groupTitles: ["Users", "Names"],
children: [
CustomIndexedWidgetBuilder(
itemBuilder: (ctx, index, selected, isDisabled) {
return Card(
margin: EdgeInsets.only(
top: 5.0,
bottom: 5.0,
),
child: ListTile(
tileColor: selected ? Colors.green[300] : Colors.white,
title: Text(
(data[0][index] as _User).name,
),
subtitle: Text(
(data[0][index] as _User).email,
),
trailing: Opacity(
opacity: selected ? 1 : 0,
child: Icon(
Icons.check,
color: Colors.white,
size: 24,
),
),
),
);
}),
CustomGridIndexedWidgetBuilder(
itemBuilder: (ctx, index, selected, isDisabled) {
return Card(
color: selected ? Colors.green[300] : Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
12.0,
),
),
margin: EdgeInsets.only(
top: 5.0,
bottom: 5.0,
),
child: Stack(
children: [
Center(
child: Text(
data[1][index],
maxLines: 3,
overflow: TextOverflow.fade,
),
),
Positioned(
top: 5,
right: 8,
child: Opacity(
opacity: selected ? 1 : 0,
child: Icon(
Icons.check,
color: Colors.white,
size: 24,
),
),
),
],
),
);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 5.0,
)
),
],
listValuesByGroup: data,
)
MIT Licences