メニュー
Build resizable panel layouts with ShadResizablePanelGroup and ShadResizablePanel; horizontal/vertical axis, defaultSize, minSize, maxSize, showHandle. Use when adding resizable split panes or panel groups 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-resizable |
| description | Build resizable panel layouts with ShadResizablePanelGroup and ShadResizablePanel; horizontal/vertical axis, defaultSize, minSize, maxSize, showHandle. Use when adding resizable split panes or panel groups in a Flutter shadcn_ui app. |
ShadResizablePanelGroup contains ShadResizablePanel children. Each panel has id, defaultSize (fraction 0–1), optional minSize and maxSize, and child. Use axis: Axis.vertical for vertical splits. Nest ShadResizablePanelGroup inside a panel for nested layouts. Set showHandle: true to show the resize handle; optional handleIcon or handleIconSrc to customize. Double-click the handle to reset to default size.
ShadResizablePanelGroup(
children: [
ShadResizablePanel(
id: 0,
defaultSize: .5,
minSize: .2,
maxSize: .8,
child: Center(child: Text('One', style: theme.textTheme.large)),
),
ShadResizablePanel(
id: 1,
defaultSize: .5,
child: ShadResizablePanelGroup(
axis: Axis.vertical,
children: [
ShadResizablePanel(
id: 0,
defaultSize: .3,
child: Center(child: Text('Two', style: theme.textTheme.large)),
),
ShadResizablePanel(
id: 1,
defaultSize: .7,
child: Align(child: Text('Three', style: theme.textTheme.large)),
),
],
),
),
],
)
ShadResizablePanelGroup(
axis: Axis.vertical,
children: [
ShadResizablePanel(
id: 0,
defaultSize: 0.3,
minSize: 0.1,
child: Center(child: Text('Header', style: theme.textTheme.large)),
),
ShadResizablePanel(
id: 1,
defaultSize: 0.7,
minSize: 0.1,
child: Center(child: Text('Footer', style: theme.textTheme.large)),
),
],
)
ShadResizablePanelGroup(
showHandle: true,
children: [
ShadResizablePanel(id: 0, defaultSize: .5, minSize: .2, child: ...),
ShadResizablePanel(id: 1, defaultSize: .5, minSize: .2, child: ...),
],
)
Wrap the group in a bordered container (e.g. DecoratedBox + ClipRRect with theme.radius) for a clean look.