liodali/checkbox_grouped
flutter widget that grouping checkbox
github へ移動してダウンロードcheckbox_grouped
* 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
Getting Started
Installing
Add the following to your pubspec.yaml
file:
dependencies:
checkbox_grouped: ^2.0.0
Simple Usage
Creating a basic SimpleGroupedCheckbox
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,
)
Declare GroupController to get selection and enabled/disabled Items
GroupController controller = GroupController();
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. |
Get current selection
final selectedItems = controller.selectedItem;
enable items
controller.enableAll();
disable all items
controller.disableAll();
enabled items
controller.enabledItemsByValues(List<T> values);
controller.enabledItemsByTitles(List<String> itemsTitles);
disable item
controller.disabledItemsByValues(List<T> values);
controller.disabledItemsByTitles(List<String> items)
listener to changed values
listener will be removed automatically when widget call dispose
controller.listen((v) {
print("$v");
});
select/selectValues
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]);
selectAll/selectValues
select all or some items in multiple selection group
controller.selectAll();
or
controller.selectValues([values]);
deselectAll/deselectValues
deselect all or some items in multiple selection group
controller.deselectAll();
or
controller.deselectValues([values]);
NOTICE
- those method
disabledItems
andenabledItems
has been removed - if you are using complex object in values , you need to implement operator == and hashcode
SimpleGroupedCheckbox
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 . |
Customisable Checkbox Grouped
Creating a basic CustomGroupedCheckbox
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),
)
Declare CustomGroupController to get selection ,enabled/disable items
CustomGroupController controller = CustomGroupController();
Get current selection
final selectedItem = controller.selectedItem;
enable items
controller.enabledItems([value]);
disable items
controller.disabledItems([value]);
listen to changed values
controller.listen((value){
print(value);
})
CustomGroupedCheckbox
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 |
CustomGroupedCheckbox.grid
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 |
Chip grouped Usage
Creating a basic SimpleGroupedChips
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,
),
),
)
Declare GroupController to get selection and enabled/disabled Items
GroupController controller = GroupController();
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. |
Get current selection
final selectedItems = controller.selectedItem;
enabled items
controller.enabledItemsByValues(List<T> values);
controller.enabledItemsByTitles(List<String> itemsTitles);
disable item
controller.disabledItemsByValues(List<T> values);
controller.disabledItemsByTitles(List<String> items)
SimpleGroupedChip
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 |
Switch grouped Usage
Creating a basic SimpleGroupedSwitch
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,
),
)
Declare GroupController to get selection and enabled/disabled Items
GroupController controller = GroupController();
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. |
Get current selection
final selectedItems = controller.selectedItem;
enabled items
controller.enabledItemsByValues(List<T> values);
controller.enabledItemsByTitles(List<String> itemsTitles);
disable item
controller.disabledItemsByValues(List<T> values);
controller.disabledItemsByTitles(List<String> items)
SimpleGroupedSwitch
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 |
showDialogGroupedCheckbox
display groupedCheckbox inside dialog
return values selected
Creating a basic showDialogGroupedCheckbox
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)
)
showDialogGroupedCheckbox
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 . |
ListGroupedCheckbox
display list of groupedCheckbox
return all values selected
Declare ListGroupController to get all item selected or get item selected by group index
ListGroupController controller = ListGroupController();
ListGroupController
Properties | Description |
---|---|
isMultipleSelectionPerGroup |
(List |
initSelectedValues |
(List) A Initialize list of values on each group of checkbox that will be selected in group. |
Get current selection
- get all selection
final selectedItems = controller.allSelectedItems;
- get all selection by group
final selectedItems = controller.selectedItemsByGroupIndex(indexGroup);
enable items
controller.enableAll(int indexGroup);
disable all items
controller.disableAll(int indexGroup);
enabled items
controller.enabledItemsByValues(int indexGroup,List<T> values);
controller.enabledItemsByTitles(int indexGroup,List<String> itemsTitles);
disable item
controller.disabledItemsByValues(int indexGroup,List<T> values);
controller.disabledItemsByTitles(int indexGroup,List<String> items)
Creating a basic ListGroupedCheckbox
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,
},
)
ListGroupedCheckbox
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
Declare ListGroupController to get all item selected or get item selected by group index
ListGroupController controller = ListGroupController();
ListCustomGroupController
Properties | Description |
---|---|
isMultipleSelectionPerGroup |
(List |
initSelectedValuesByGroup |
(List) A Initialize list of values on each group of checkbox that will be selected in group. |
Get current selection
- get all selection
- list
final selectedItems = controller.allSelectedItems;
- map
final selectedItems = controller.mapSelectedItems;
- get all selection by group
final selectedItems = controller.selectedItemsByGroupIndex(indexGroup);
ListCustomGroupedCheckbox
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 |
basic example
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
![](/images/banner-woo.jpg)
関連する liodali/checkbox_grouped 優れたプロジェクトの推薦ダウンロード
AppFlowy
47859
AppFlowy is an open-source alternative to Notion. You are in charge of your data and customizations. Built with Flutter and Rust.
localsend
33797
An open-source cross-platform alternative to AirDrop
spotube
23772
🎧 Open source Spotify client that doesn't require Premium nor uses Electron! Available for both desktop & mobile!
revanced-manager
15035
💊 Application to use ReVanced on Android
gsy_github_app_flutter
14559
Flutter 超完整的开源项目,功能丰富,适合学习和日常使用。GSYGithubApp系列的优势:我们目前已经拥有Flutter、Weex、ReactNative、kotlin 四个版本。 功能齐全,项目框架内技术涉及面广,完成度高,持续维护,配套文章,适合全面学习,对比参考。跨平台的开源Github客户端App,更好的体验,更丰富的功能,旨在更好的日常管理和维护个人Github,提供更好更方便的驾车体验Σ( ̄。 ̄ノ)ノ。同款Weex版本 : https://github.com/CarGuo/GSYGithubAppWeex 、同款React Native版本 : https://github.com/CarGuo/GSYGithubApp 、原生 kotlin 版本 https://github.com/CarGuo/GSYGithubAppKotlin
dio
12249
A powerful HTTP client for Dart and Flutter, which supports global settings, Interceptors, FormData, aborting and canceling a request, files uploading and downloading, requests timeout, custom adapters, etc.
gopeed
11832
A modern download manager that supports all platforms. Built with Golang and Flutter.
bloc
11441
A predictable state management library that helps implement the BLoC design pattern
getx
9899
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.
flame
8846
A Flutter based game engine.
flutter_deer
7595
🦌 Flutter 练习项目(包括集成测试、可访问性测试)。内含完整UI设计图,更贴近真实项目的练习。Flutter practice project (including integration testing and accessibility testing). Contains complete UI design drawings for a more realistic practice project.
fish-redux
7343
An assembled flutter application framework.
fl_chart
6451
FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
pixez-flutter
6360
一个支持免代理直连及查看动图的第三方Pixiv flutter客户端
Flutter-Responsive-Admin-Panel-or-Dashboard
6355
Responsive Admin Panel or Dashboard using Flutter
aidea
6021
AIdea 是一款支持 GPT 以及国产大语言模型通义千问、文心一言等,支持 Stable Diffusion 文生图、图生图、 SDXL1.0、超分辨率、图片上色的全能型 APP。
riverpod
5828
A reactive caching and data-binding framework. Riverpod makes working with asynchronous code a breeze.
pikapika
5463
美观易用且无广告的漫画和游戏客户端,同时支持MacOS,Windows,Android,iOS。
provider
5029
InheritedWidgets, but simple
getwidget
4416
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.