Menu
Use ThemedMultiSelectInput in a layrz Flutter widget. Apply when adding a multiple-value picker field that opens a searchable dialog with checkboxes.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use ThemedTabView and ThemedTab in a layrz Flutter widget. Apply when adding horizontal tab navigation with Material 3 styling.
Use ThemedButton in a layrz Flutter widget. Apply when rendering any tappable action — primary/secondary CTAs, icon-only FABs, destructive actions, cooldown buttons, or the six semantic factories (.save, .cancel, .info, .show, .edit, .delete).
Use ThemedSearchInput in a layrz Flutter widget. Apply when adding a search bar — either a compact icon button that expands into an overlay, or a full-width inline field.
Use when migrating ThemedTable<T> (v1) to ThemedTable2<T> (v2) in a layrz Flutter widget. Apply when a widget uses the old ThemedTable API with onShow/onEdit/onDelete/onMultiDelete/ThemedColumn and needs to be updated.
Use ResponsiveCol in a layrz Flutter widget. Apply when defining a column's width at different breakpoints inside a ResponsiveRow.
Use ResponsiveRow in a layrz Flutter widget. Apply when wrapping ResponsiveCol children in a responsive 12-column grid container.
| name | themed-multi-select-input |
| description | Use ThemedMultiSelectInput in a layrz Flutter widget. Apply when adding a multiple-value picker field that opens a searchable dialog with checkboxes. |
Dart syntax: This library requires Dart ≥ 3.10. Use dot shorthand for all enum values — never write the fully-qualified form.
Full constructor and property reference: read
references/api.mdin this skill's directory.
List<T>CheckboxListTile or DropdownButton — always use this widget.For single-value selection → use ThemedSelectInput. For two-panel Available/Selected layout → use ThemedDualListInput.
ThemedMultiSelectInput<String>(
labelText: context.i18n.t('entity.tags'),
items: tags.map((t) => ThemedSelectItem(value: t.id, label: t.name)).toList(),
value: selectedTagIds,
errors: context.getErrors(key: 'tags'),
onChanged: (items) {
selectedTagIds = items.map((e) => e.value).nonNulls.toList();
if (context.mounted) onChanged.call();
},
)
onChanged receives List<ThemedSelectItem<T>>. Extract values with .map((e) => e.value).nonNulls.toList().
onChanged fires on every tap (real-time updates while dialog is open).waitUntilClosedToSubmit: true delays onChanged until Save is tapped — use when real-time updates are expensive.onChanged with the previous selection).autoclose: false (default) — user must tap Save to close.autoselectFirst: true auto-selects items[0] on init when value is empty.label / labelText must be set — assert enforced.// Batch submit (only fire onChanged on Save)
ThemedMultiSelectInput<String>(
labelText: context.i18n.t('entity.permissions'),
items: permissions.map((p) => ThemedSelectItem(value: p.id, label: p.name)).toList(),
value: selectedPermissionIds,
waitUntilClosedToSubmit: true,
errors: context.getErrors(key: 'permissions'),
onChanged: (items) {
selectedPermissionIds = items.map((e) => e.value).nonNulls.toList();
if (context.mounted) onChanged.call();
},
)
// Disabled
ThemedMultiSelectInput<String>(
labelText: context.i18n.t('entity.tags'),
items: tags.map((t) => ThemedSelectItem(value: t.id, label: t.name)).toList(),
value: selectedTagIds,
disabled: true,
)
onChanged with if (context.mounted) before calling the parent callback.context.i18n.t('entity.fieldName') for labelText — never hardcode strings.errors: context.getErrors(key: 'fieldName')..nonNulls to filter nulls from the mapped values.const SizedBox(height: 10).