Data Presentation

Accordion

A vertically stacked set of interactive headings that reveal associated content sections when clicked. Each section can be expanded or collapsed independently.

API Reference

CLI

To generate a specific style for customization:

dart run forui style create accordion

Usage

FAccordion(...)

1FAccordion(
2 style: .delta(titlePadding: .value(.zero)),
3 children: [FAccordionItem(title: Text('Title'), child: SizedBox())],
4)

FAccordionItem(...)

1FAccordionItem(
2 style: const .delta(titlePadding: .value(.zero)),
3 title: const Text('Title'),
4 icon: const Icon(FLucideIcons.chevronDown),
5 initiallyExpanded: false,
6 child: const Text('Content'),
7)

Examples

With Max Number of Expanded Items

Time Picker

A time picker that allows a time to be selected. The picker supports arrow key navigation. Recommended for touch devices.

Avatar

A circular image component that displays user profile pictures with a fallback option. The Avatar component provides a consistent way to represent users in your application, displaying profile images with fallbacks to initials or icons when images are unavailable.

On this page

CLIUsageFAccordion(...)FAccordionItem(...)ExamplesWith Max Number of Expanded Items