An easy way to provide a single or multiple choice chips

flutter_chips_choice

lite version of smart_select package, zero dependencies, an easy way to provide a single or multiple choice chips.

download

features

• select single or multiple choice
• display in scrollable or wrapped list
• build choice option from any list
• customizable choice widget

usage

for a complete usage, please see the example.

to read more about classes and other references used by chips_choice, see the documentation.

single choice

int tag = 1;
list<string> options = [
  'news', 'entertainment', 'politics',
  'automotive', 'sports', 'education',
  'fashion', 'travel', 'food', 'tech',
  'science',
];

// chipschoice<t>.single
chipschoice<int>.single(
  value: tag,
  options: chipschoiceoption.listfrom<int, string>(
    source: options,
    value: (i, v) => i,
    label: (i, v) => v,
  ),
  onchanged: (val) => setstate(() => tag = val),
);

multiple choice

list<string> tags = [];
list<string> options = [
  'news', 'entertainment', 'politics',
  'automotive', 'sports', 'education',
  'fashion', 'travel', 'food', 'tech',
  'science',
];

// chipschoice<t>.multiple
chipschoice<string>.multiple(
  value: tags,
  options: chipschoiceoption.listfrom<string, string>(
    source: options,
    value: (i, v) => v,
    label: (i, v) => v,
  ),
  onchanged: (val) => setstate(() => tags = val),
);

build options list

options property is list<chipschoiceoption<t>>, it can be input directly as in the example below, more info about chipschoiceoption can be found on the api reference

chipschoice<t>.single/multiple(
  ...,
  ...,
  options: <chipschoiceoption<t>>[
    chipschoiceoption<t>(value: 1, label: 'entertainment'),
    chipschoiceoption<t>(value: 2, label: 'education'),
    chipschoiceoption<t>(value: 3, label: 'fashion'),
  ],
);

options also can be created from any list using helper provided by this package, like the example below

list<map<string, string>> days = [
  { 'value': 'mon', 'title': 'monday' },
  { 'value': 'tue', 'title': 'tuesday' },
  { 'value': 'wed', 'title': 'wednesday' },
  { 'value': 'thu', 'title': 'thursday' },
  { 'value': 'fri', 'title': 'friday' },
  { 'value': 'sat', 'title': 'saturday' },
  { 'value': 'sun', 'title': 'sunday' },
];

chipschoice<t>.single/multiple(
  ...,
  ...,
  options: chipschoiceoption.listfrom<t, map<string, string>>(
    source: days,
    value: (index, item) => item['value'],
    label: (index, item) => item['title'],
  ),
);

scrollable or wrapped list

chipschoice<t>.single/multiple(
  ...,
  ...,
  iswrapped: false/true,
);