Menu
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.
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 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(() {});
},
)