Menu
Use ThemedDateTimePicker in a layrz Flutter widget. Apply when adding a single date+time selection field — opens a tabbed dialog with calendar and time picker.
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-datetime-picker |
| description | Use ThemedDateTimePicker in a layrz Flutter widget. Apply when adding a single date+time selection field — opens a tabbed dialog with calendar and time picker. |
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.
For date only → use ThemedDatePicker. For date+time in two separate sequential dialogs → use ThemedDateTimeSteppedPicker. For date+time ranges → use ThemedDateTimeRangePicker.
ThemedDateTimePicker(
labelText: context.i18n.t('entity.datetime'),
value: selectedDatetime,
errors: context.getErrors(key: 'datetime'),
onChanged: (value) {
selectedDatetime = value;
if (context.mounted) onChanged.call();
},
)
%I:%M %p). Set use24HourFormat: true for 24-hour (%H:%M).'$datePattern$patternSeparator$timePattern' — default '%Y-%m-%d %I:%M %p'.firstDay / lastDay constrain the calendar.value is TZDateTime, the result is returned in the same timezone.customChild wraps any widget in an InkWell that opens the dialog.label / labelText must be set — assert enforced.// 24-hour format
ThemedDateTimePicker(
labelText: context.i18n.t('entity.datetime'),
value: selectedDatetime,
use24HourFormat: true,
errors: context.getErrors(key: 'datetime'),
onChanged: (value) {
selectedDatetime = value;
if (context.mounted) onChanged.call();
},
)
// With date limits
ThemedDateTimePicker(
labelText: context.i18n.t('entity.scheduledAt'),
value: scheduledAt,
firstDay: DateTime.now(),
lastDay: DateTime.now().add(const Duration(days: 365)),
onChanged: (value) {
scheduledAt = value;
if (context.mounted) onChanged.call();
},
)
// Custom display format
ThemedDateTimePicker(
labelText: context.i18n.t('entity.datetime'),
value: selectedDatetime,
datePattern: '%d/%m/%Y',
use24HourFormat: true,
onChanged: (value) {
selectedDatetime = value;
if (context.mounted) onChanged.call();
},
)
// Disabled
ThemedDateTimePicker(
labelText: context.i18n.t('entity.datetime'),
value: selectedDatetime,
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').const SizedBox(height: 10).