Accordion

An Accordion is a vertically stacked UI element that expands or collapses to reveal or hide content.

Use Accordions to organize content into digestible sections, especially when space is limited or when users may only need to view one section at a time—ideal for FAQs, settings panels, or step-by-step content.

Common alternative names:
Expandable Panel, Collapsible Section

---

Variants

Simple

Basic accordion with a clean, minimalist design.

Preview

Code

Accordion(
  items: [
    AccordionItem(
      title: 'What is accordion in UI design?',
      content: 'An accordion is a vertically stacked list of items that can be expanded or collapsed to reveal more information.',
    ),
    AccordionItem(
      title: 'How does it work?',
      content: 'Click on any header to expand or collapse its content.',
    ),
  ],
)

---

Card Style

Accordion items with elevated card-like appearance.

Preview

Code

Accordion(
  type: AccordionType.card,
  items: [
    AccordionItem(
      title: 'What is accordion in UI design?',
      content: 'An accordion is a vertically stacked list of items that can be expanded or collapsed to reveal more information.',
    ),
    AccordionItem(
      title: 'How does it work?',
      content: 'Click on any header to expand or collapse its content.',
    ),
  ],
)

---

Properties

Property	Type	Description
items	List<AccordionItem>	Required. List of accordion items to display.
type	AccordionType	Style of the accordion (simple, card). Default: simple.
expandAll	bool	Whether all items should be expanded by default. Default: false.
borderRadius	BorderRadius	Border radius of the accordion items. Default: 8px.
dividerColor	Color?	Color of the divider between items (simple style only).
headerBackgroundColor	Color?	Background color of the header sections.
headerTextStyle	TextStyle?	Text style for the header titles.
contentBackgroundColor	Color?	Background color of the content sections.
contentTextStyle	TextStyle?	Text style for the content text.
expandIcon	IconData	Icon shown when item is collapsed. Default: Icons.expand_more
collapseIcon	IconData	Icon shown when item is expanded. Default: Icons.expand_less
customExpandIcon	Widget?	Custom widget to replace default expand icon.
customCollapseIcon	Widget?	Custom widget to replace default collapse icon.
iconColor	Color?	Color of the expand/collapse icons.
padding	EdgeInsetsGeometry	Padding around the header. Default: vertical: 16px
contentPadding	EdgeInsetsGeometry	Padding around the content. Default: all sides: 16px
animationDuration	Duration	Duration of expand/collapse animation. Default: 300ms