group_select 1.5.1 copy "group_select: ^1.5.1" to clipboard
group_select: ^1.5.1 copied to clipboard

Package FLutter: Multiple selection component with groupings

Multiple selection component with groupings

DEMO http://group-select.esquilodigital.com.br/#/

Getting started #

Import package

import 'package:group_select/group_select.dart';

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>();

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),
    ],
),

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'),
            ],
        ),
    ],
)

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'),
    ],
),

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'),
),

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
)

activeColor #

It's possible change color active in badge and checkbox:

GroupSelect<String>(
    title: 'With groups items',
    activeColor: Colors.green,
);

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

To clear a values use:

void resetValues()

Additional information #

CONTRIBUTORS:

10
likes
140
pub points
46%
popularity

Publisher

verified publisherappinventorbrasil.com.br

Package FLutter: Multiple selection component with groupings

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter, flutter_mobx, mobx

More

Packages that depend on group_select