Menú
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.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación 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 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.
Use ThemedTable2<T> in a layrz Flutter widget. Apply when displaying a list of domain objects in a table with sort, search, multiselect, and row actions.
| name | themed-search-input |
| description | 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. |
Dart syntax: This library requires Dart ≥ 3.10. Use dot shorthand for all enum values (e.g.
.col6,.start,.left) — never write the fully-qualified form (Sizes.col6,WrapAlignment.start).
Full constructor and property reference: read
references/api.mdin this skill's directory.
asField: trueNot a form widget — no errors, isRequired, or validation. Do not pass context.getErrors() to it.
ThemedSearchInput(
value: searchQuery,
labelText: context.i18n.t('general.search'),
onSearch: (value) {
searchQuery = value;
if (context.mounted) setState(() {});
},
)
ThemedSearchInput(
value: searchQuery,
labelText: context.i18n.t('general.search'),
asField: true,
maxWidth: 300,
onSearch: (value) {
searchQuery = value;
if (context.mounted) setState(() {});
},
)
OverlayEntry with scale animation. Escape or tap-outside closes it.SizedBox(height: 40, width: maxWidth) — no overlay.position: .left → overlay expands leftward (button on the right edge of toolbar). .right → expands rightward.debounce fires onSearch after delay. Enter fires immediately and closes the overlay.value is non-nullable String — always init to ''.// Toolbar search on right edge — expands leftward
Row(
children: [
const Spacer(),
ThemedSearchInput(
value: query,
labelText: context.i18n.t('general.search'),
position: .left,
onSearch: (value) {
query = value;
if (context.mounted) setState(() {});
},
),
],
)
// Synchronous search (no debounce)
ThemedSearchInput(
value: query,
labelText: context.i18n.t('general.search'),
asField: true,
maxWidth: 400,
debounce: null,
onSearch: (value) {
query = value;
if (context.mounted) setState(() {});
},
)
// Custom trigger widget
ThemedSearchInput(
value: query,
labelText: context.i18n.t('general.search'),
customChild: ThemedButton(
label: context.i18n.t('general.search'),
icon: LayrzIcons.solarOutlineMagnifer,
style: ThemedButtonStyle.outlined,
onTap: () {},
),
onSearch: (value) {
query = value;
if (context.mounted) setState(() {});
},
)