Menu
Use ThemedDualListInput in a layrz Flutter widget. Apply when adding a two-panel list field where users move items between an "Available" and a "Selected" list.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
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-dual-list-input |
| description | Use ThemedDualListInput in a layrz Flutter widget. Apply when adding a two-panel list field where users move items between an "Available" and a "Selected" list. |
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> (IDs or values of selected items)For a compact multi-select dialog → use ThemedMultiSelectInput. For single-value selection → use ThemedSelectInput.
ThemedDualListInput<String>(
labelText: context.i18n.t('entity.items'),
items: sourceList.map((e) => ThemedSelectItem(value: e.id, label: e.name)).toList(),
value: selectedIds,
errors: context.getErrors(key: 'items'),
onChanged: (items) {
selectedIds = items.map((e) => e.value).nonNulls.toList();
if (context.mounted) onChanged.call();
},
)
kExtraSmallGrid), the lists stack vertically; height is multiplied by mobileScaleFactor.onChanged fires with the full list of selected ThemedSelectItem<T> — extract values with .map((e) => e.value).nonNulls.toList().compareFunction overrides item equality; default uses ==.availableListName / selectedListName customize the column headers.label / labelText must be set — assert enforced.// Custom list headers
ThemedDualListInput<String>(
labelText: context.i18n.t('asset.pois'),
items: pois.map((p) => ThemedSelectItem(value: p.id, label: p.name)).toList(),
value: selectedPoiIds,
availableListName: context.i18n.t('helpers.available'),
selectedListName: context.i18n.t('helpers.selected'),
errors: context.getErrors(key: 'pois'),
onChanged: (items) {
selectedPoiIds = items.map((e) => e.value).nonNulls.toList();
if (context.mounted) onChanged.call();
},
)
// Custom equality (e.g. comparing by a nested property)
ThemedDualListInput<MyModel>(
labelText: context.i18n.t('entity.items'),
items: sourceList.map((e) => ThemedSelectItem(value: e, label: e.name)).toList(),
value: selectedItems,
compareFunction: (a, b) => a?.id == b?.id,
onChanged: (items) {
selectedItems = items.map((e) => e.value).nonNulls.toList();
if (context.mounted) onChanged.call();
},
)
// Disabled
ThemedDualListInput<String>(
labelText: context.i18n.t('entity.items'),
items: sourceList.map((e) => ThemedSelectItem(value: e.id, label: e.name)).toList(),
value: selectedIds,
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).