Menu
Use ThemedMonthRangePicker in a layrz Flutter widget. Apply when adding a multi-month selection field — supports both arbitrary selection and consecutive range mode.
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
| name | themed-month-range-picker |
| description | Use ThemedMonthRangePicker in a layrz Flutter widget. Apply when adding a multi-month selection field — supports both arbitrary selection and consecutive range mode. |
Dart syntax: This library requires Dart ≥ 3.10. Use dot shorthand for all enum values (e.g.
.january) — never write the fully-qualified form (Month.january).
Full constructor and property reference: read
references/api.mdin this skill's directory.
consecutive: false (default) — pick any combination of months freelyconsecutive: true — two-tap mode: pick start month then end month; all months between are auto-filledFor a single month → use ThemedMonthPicker. For day-level ranges → use ThemedDateRangePicker.
ThemedMonthRangePicker(
labelText: context.i18n.t('entity.months'),
value: selectedMonths,
errors: context.getErrors(key: 'months'),
onChanged: (value) {
selectedMonths = value;
if (context.mounted) onChanged.call();
},
)
value is List<ThemedMonth> — defaults to const [].consecutive: true → first tap sets anchor, second tap completes range and auto-fills intermediate months.consecutive: true → only first and last selected months can be deselected (middle months are locked).minimum / maximum bound the selectable range.disabledMonths is ignored when consecutive: true.label / labelText must be set — assert enforced.// Consecutive range mode (two-tap: start → end)
ThemedMonthRangePicker(
labelText: context.i18n.t('entity.period'),
value: selectedMonths,
consecutive: true,
minimum: ThemedMonth(year: 2023, month: .january),
maximum: ThemedMonth(year: DateTime.now().year, month: Month.values[DateTime.now().month - 1]),
errors: context.getErrors(key: 'period'),
onChanged: (value) {
selectedMonths = value;
if (context.mounted) onChanged.call();
},
)
// Free multi-select (any months, any years)
ThemedMonthRangePicker(
labelText: context.i18n.t('entity.activeMonths'),
value: activeMonths,
disabledMonths: [
ThemedMonth(year: 2024, month: .august),
],
onChanged: (value) {
activeMonths = value;
if (context.mounted) onChanged.call();
},
)
// Disabled
ThemedMonthRangePicker(
labelText: context.i18n.t('entity.months'),
value: selectedMonths,
disabled: true,
)
ThemedMonth(year: 2025, month: .april)
ThemedMonth(year: DateTime.now().year, month: Month.values[DateTime.now().month - 1])
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').const SizedBox(height: 10).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.