菜单
Use ShadSelect for dropdown option lists; ShadOption, placeholder, selectedOptionBuilder, scrollable groups, ShadSelect.withSearch, ShadSelect.multiple, ShadSelectFormField. Use when adding dropdowns, single/multi select, or searchable select in a Flutter shadcn_ui app.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Build collapsible accordions with ShadAccordion and ShadAccordionItem; single or multiple open items. Use when adding expandable sections, FAQs, or vertically stacked reveal content in a Flutter shadcn_ui app.
Show callout alerts with ShadAlert and ShadAlert.destructive; icon, title, description. Use when displaying warnings, errors, or important messages in a Flutter shadcn_ui app.
Display user avatars with ShadAvatar; image URL with optional placeholder. Use when showing user profile images or fallback initials in a Flutter shadcn_ui app.
Display badges with ShadBadge; primary, secondary, destructive, outline variants. Use when showing tags, status labels, or count indicators in a Flutter shadcn_ui app.
Build breadcrumb navigation with ShadBreadcrumb, ShadBreadcrumbLink, ShadBreadcrumbDropdown, custom separator. Use when showing navigation path, hierarchy of links, or dropdown breadcrumb in a Flutter shadcn_ui app.
Use Shadcn UI buttons (ShadButton variants: primary, secondary, destructive, outline, ghost, link); leading icon, loading state, gradient and shadow. Use when adding buttons, CTAs, or button-style widgets in a Flutter shadcn_ui app.
| name | shadcn_ui-select |
| description | Use ShadSelect for dropdown option lists; ShadOption, placeholder, selectedOptionBuilder, scrollable groups, ShadSelect.withSearch, ShadSelect.multiple, ShadSelectFormField. Use when adding dropdowns, single/multi select, or searchable select in a Flutter shadcn_ui app. |
ShadSelect<T> displays a list of options triggered by a button. Provide options (list of ShadOption<T> or section headers like Padding with text), placeholder, selectedOptionBuilder: (context, value) => ..., and onChanged. Use initialValue or controlled state for selected value. Set minWidth/maxWidth/maxHeight as needed. For forms use ShadSelectFormField<T> with id, validator. Use allowDeselection: true to allow clearing the selection.
final fruits = {'apple': 'Apple', 'banana': 'Banana', ...};
ShadSelect<String>(
placeholder: const Text('Select a fruit'),
options: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
child: Text(
'Fruits',
style: theme.textTheme.muted.copyWith(
fontWeight: FontWeight.w600,
color: theme.colorScheme.popoverForeground,
),
textAlign: TextAlign.start,
),
),
...fruits.entries.map((e) => ShadOption(value: e.key, child: Text(e.value))),
],
selectedOptionBuilder: (context, value) => Text(fruits[value]!),
onChanged: print,
)
ShadSelectFormField<String>(
id: 'email',
minWidth: 350,
initialValue: null,
options: verifiedEmails
.map((email) => ShadOption(value: email, child: Text(email)))
.toList(),
selectedOptionBuilder: (context, value) =>
value == 'none' ? const Text('Select a verified email to display') : Text(value),
placeholder: const Text('Select a verified email to display'),
validator: (v) {
if (v == null) return 'Please select an email to display';
return null;
},
)
Use ShadSelect.withSearch. Pass onSearchChanged, searchPlaceholder, and filter options in state (e.g. wrap options in Offstage(offstage: !filtered.containsKey(key), child: ShadOption(...)) to avoid focus loss when results change).
Use ShadSelect.multiple. Pass selectedOptionsBuilder: (context, values) => ..., onChanged, and optionally allowDeselection: true, closeOnSelect: false to keep popover open after selection.
Scrollable option lists (grouped sections) and full search/multiple examples: reference.md.