메뉴
Show rich content in a popover with ShadPopover, ShadPopoverController; trigger button, toggle. Use when adding popovers, floating panels, or button-triggered overlay content 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-popover |
| description | Show rich content in a popover with ShadPopover, ShadPopoverController; trigger button, toggle. Use when adding popovers, floating panels, or button-triggered overlay content in a Flutter shadcn_ui app. |
ShadPopover displays rich content in a portal, triggered by a button (or other trigger). Use a ShadPopoverController() to control open/close; call popoverController.toggle from the trigger. Pass popover: (context) => ... returning the overlay widget (e.g. a SizedBox with form fields); child is the trigger widget.
final popoverController = ShadPopoverController();
// dispose: popoverController.dispose();
ShadPopover(
controller: popoverController,
popover: (context) => SizedBox(
width: 288,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text('Dimensions', style: textTheme.h4),
Text('Set the dimensions for the layer.', style: textTheme.p),
const SizedBox(height: 4),
// ... form rows with ShadInput, etc.
],
),
),
child: ShadButton.outline(
onPressed: popoverController.toggle,
child: const Text('Open popover'),
),
)
Dispose the controller in State.dispose.