Description:

group select

Multiple selection component with groupings
DEMO http://group-select.esquilodigital.com.br/#/
Getting started #
Import package
import 'package:group_select/group_select.dart';
copied to clipboard
Usage #
To use the component it is necessary to create a controller, and you can also specify a custom type for the controller and for the component.
final controller = SelectGroupController<int>(
lang: LangBadge.enUS,
multiple: false,
dark: false,
);

final groupController = SelectGroupController<String>();
copied to clipboard
The initalization component need to receive a controller:
// With items
GroupSelect<int>(
activeColor: Colors.red,
title: 'With items',
controller: controller,
items: [
Item(title: 'Item 1', value: 1),
Item(title: 'Item 2', value: 2),
Item(title: 'Item 3', value: 3),
Item(title: 'Item 4', value: 4),
Item(title: 'Item 5', value: 5),
],
),
copied to clipboard
The groups need of an unique id.
// With groups items
GroupSelect<String>(
title: 'With groups items',
activeColor: Colors.green,
controller: groupController,
onChange: (values) {
print(values);
}
groups: [
Group(
title: 'Grupo 1',
id: '2',
items: [
Item(title: 'Item 1', value: '1'),
Item(title: 'Item 2', value: '2'),
Item(title: 'Item 3', value: '3'),
Item(title: 'Item 4', value: '4'),
Item(title: 'Item 5', value: '5'),
],
),
Group(
title: 'Grupo 2',
id: '2',
items: [
Item(title: 'Item 1', value: '6'),
Item(title: 'Item 2', value: '7'),
Item(title: 'Item 3', value: '8'),
Item(title: 'Item 4', value: '9'),
Item(title: 'Item 5', value: '10'),
],
),
],
)
copied to clipboard
Properties #
Groups #
Groups receive items, and must have a unique id.
Group(
title: 'Grupo 2',
id: '2',

items: [
Item(title: 'Item 1', value: '6'),
Item(title: 'Item 2', value: '7'),
Item(title: 'Item 3', value: '8'),
Item(title: 'Item 4', value: '9'),
Item(title: 'Item 5', value: '10'),
],
),
copied to clipboard
Items #
Items can have a leading, that can be any widget:
Item(
title: 'Item 4',
value: '4',
leading: const Icon(Icons.circle),
);
Item(
title: 'Item 4',
value: '4',
leading: Image.asset('path/to/image'),
),
copied to clipboard
onChange #
It is always called when there is a change in the selected items:
GroupSelect<T>(
title: 'With groups items',
activeColor: Colors.green,
controller: groupController,
onChange: (dynamic values) {
print(values);
}
// ... code ommitted
)
copied to clipboard
activeColor #
It's possible change color active in badge and checkbox:
GroupSelect<String>(
title: 'With groups items',
activeColor: Colors.green,
);
copied to clipboard
dark #
Enable mode dark to component. example in LINK DEMO.
Controller #
Recover value selected. If multiple enable the value is a [List
dynamic get value
copied to clipboard
To clear a values use:
void resetValues()
copied to clipboard
Additional information #
CONTRIBUTORS:

Guilherme Barbosa: Linkedin
Lucas Firmino: Linkedin

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter