القائمة
Use ThemedDynamicAvatarInput in a layrz Flutter widget. Apply when adding a flexible avatar field that lets the user choose from URL, base64 image upload, icon, or emoji.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف 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-dynamic-avatar-input |
| description | Use ThemedDynamicAvatarInput in a layrz Flutter widget. Apply when adding a flexible avatar field that lets the user choose from URL, base64 image upload, icon, or emoji. |
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.
AvatarInput?For icon-only → use ThemedIconPicker. For emoji-only → use ThemedEmojiPicker. For avatar image upload only → use ThemedAvatarPicker.
ThemedDynamicAvatarInput(
labelText: context.i18n.t('entity.avatar'),
value: selectedAvatar,
errors: context.getErrors(key: 'avatar'),
onChanged: (avatar) {
selectedAvatar = avatar;
if (context.mounted) onChanged.call();
},
)
ThemedTabView) with one tab per enabled type plus an always-present none tab.[AvatarType.url, AvatarType.base64, AvatarType.icon, AvatarType.emoji].AvatarType.none is always prepended automatically — no need to add it to enabledTypes.onChanged fires immediately when the user picks a value in any tab — no separate Save/Cancel.value.type against enabledTypes.label / labelText must be set — assert enforced.| Type | Content |
|---|---|
none | No avatar; always shown |
url | Text input for an image URL |
base64 | File picker → base64 image upload |
icon | Searchable Layrz icon grid |
emoji | Group-filtered emoji grid |
// Icon or emoji only
ThemedDynamicAvatarInput(
labelText: context.i18n.t('layer.avatar'),
value: selectedAvatar,
enabledTypes: [AvatarType.icon, AvatarType.emoji],
onChanged: (avatar) {
selectedAvatar = avatar;
if (context.mounted) onChanged.call();
},
)
// Full avatar with all types
ThemedDynamicAvatarInput(
labelText: context.i18n.t('asset.avatar'),
value: selectedAvatar,
errors: context.getErrors(key: 'avatar'),
onChanged: (avatar) {
selectedAvatar = avatar;
if (context.mounted) onChanged.call();
},
)
// Disabled
ThemedDynamicAvatarInput(
labelText: context.i18n.t('entity.avatar'),
value: selectedAvatar,
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).ThemedIconPicker or ThemedEmojiPicker on the same form field — the avatar input already has those tabs built in.