メニュー
Show modal dialogs with showShadDialog, ShadDialog and ShadDialog.alert; title, description, actions, child content. Use when adding modals, confirmations, or alert dialogs 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-dialog |
| description | Show modal dialogs with showShadDialog, ShadDialog and ShadDialog.alert; title, description, actions, child content. Use when adding modals, confirmations, or alert dialogs in a Flutter shadcn_ui app. |
A modal dialog that interrupts the user. Use showShadDialog(context: context, builder: ...) and return a ShadDialog or ShadDialog.alert. Provide title, optional description, optional actions (list of widgets, e.g. buttons), and optional child for body content. Dismiss with Navigator.of(context).pop(...).
showShadDialog(
context: context,
builder: (context) => ShadDialog(
title: const Text('Edit Profile'),
description: const Text(
"Make changes to your profile here. Click save when you're done",
),
actions: const [ShadButton(child: Text('Save changes'))],
child: Container(
width: 375,
padding: const EdgeInsets.symmetric(vertical: 20),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
spacing: 16,
children: profile
.map(
(p) => Row(
children: [
Expanded(
child: Text(
p.title,
textAlign: TextAlign.end,
style: theme.textTheme.small,
),
),
const SizedBox(width: 16),
Expanded(
flex: 3,
child: ShadInput(initialValue: p.value),
),
],
),
)
.toList(),
),
),
),
);
Use ShadDialog.alert for confirmations; pass actions with Cancel and Continue (or similar) that call Navigator.of(context).pop(false) and Navigator.of(context).pop(true).
showShadDialog(
context: context,
builder: (context) => ShadDialog.alert(
title: const Text('Are you absolutely sure?'),
description: const Padding(
padding: EdgeInsets.only(bottom: 8),
child: Text(
'This action cannot be undone. This will permanently delete your account and remove your data from our servers.',
),
),
actions: [
ShadButton.outline(
child: const Text('Cancel'),
onPressed: () => Navigator.of(context).pop(false),
),
ShadButton(
child: const Text('Continue'),
onPressed: () => Navigator.of(context).pop(true),
),
],
),
);