Accordion

Use Accordion to show expandable sections and reveal detailed content only when users need it.

Embedded previews are for quick reference. For exact rendering and interaction details, open Widgetbook.

Usage

Padding(
    padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
    child: FluttyAccordion(
      items: [
        FluttyAccordionItem(
          title: 'Accordion 1',
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 2',
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 3',
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
      ],
    ),
  );

Subtitles

Padding(
    padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
    child: FluttyAccordion(
      items: [
        FluttyAccordionItem(
          title: 'Accordion 1',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 2',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 3',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
      ],
    ),
  );

Allow Multiple

If you set 'selectionMode' to multiple, then the Accordion will allow multiple items to be expanded at the same time.

Padding(
    padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
    child: FluttyAccordion(
      allowMultipleOpen: true,
      items: [
        FluttyAccordionItem(
          title: 'Accordion 1',
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 2',
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 3',
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
      ],
    ),
  );

Compact

Padding(
    padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
    child: FluttyAccordion(
      isCompact: true,
      items: [
        FluttyAccordionItem(
          title: 'Accordion 1',
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 2',
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 3',
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
      ],
    ),
  );

Variants

Accordion has 4 variants: light, shadow, bordered and splitted.

Light

Padding(
    padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
    child: FluttyAccordion(
      variant: FluttyAccordionVariant.light,
      items: [
        FluttyAccordionItem(
          title: 'Accordion 1',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 2',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 3',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
      ],
    ),
  );

Bordered

Padding(
    padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
    child: FluttyAccordion(
      variant: FluttyAccordionVariant.bordered,
      items: [
        FluttyAccordionItem(
          title: 'Accordion 1',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 2',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 3',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
      ],
    ),
  );

Splitted

Padding(
    padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
    child: FluttyAccordion(
      variant: FluttyAccordionVariant.splitted,
      items: [
        FluttyAccordionItem(
          title: 'Accordion 1',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 2',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 3',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
      ],
    ),
  );

Default Expanded

Padding(
    padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
    child: FluttyAccordion(
      defaultExpandedKey: 1,
      items: [
        FluttyAccordionItem(
          title: 'Accordion 1',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 2',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 3',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
      ],
    ),
  );

Disabled Key

Padding(
    padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
    child: FluttyAccordion(
      disabledKeys: [1],
      items: [
        FluttyAccordionItem(
          title: 'Accordion 1',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 2',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 3',
          subtitle: "Press to expand",
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
      ],
    ),
  );

Start Content

Padding(
    padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
    child: FluttyAccordion(
      items: [
        FluttyAccordionItem(
          title: "Alex Smith",
          subtitle: "6 unread messages",
          startContent: FluttyAvatar(
            size: FluttyAvatarSize.sm,
            radius: RadiusVariant.lg,
            isBordered: true,
            color: ColorVariant.success,
            src: 'https://i.pravatar.cc/150?u=a042581f4e29026024d',
          ),
          child: Text(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
            " sed do eiusmod tempor incididunt ut labore et dolore"
            " magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"
            " ullamco laboris nisi ut aliquip ex ea commodo consequat.",
          ),
        ),
        FluttyAccordionItem(
          title: "Jamie Taylor",
          subtitle: "6 unread messages",
          startContent: FluttyAvatar(
            size: FluttyAvatarSize.sm,
            radius: RadiusVariant.lg,
            isBordered: true,
            color: ColorVariant.primary,
            src: 'https://i.pravatar.cc/150?u=a042581f4e29026704d',
          ),
          child: Text(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
            " sed do eiusmod tempor incididunt ut labore et dolore"
            " magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"
            " ullamco laboris nisi ut aliquip ex ea commodo consequat.",
          ),
        ),
        FluttyAccordionItem(
          title: "Morgan Lee",
          subtitle: "6 unread messages",
          startContent: FluttyAvatar(
            size: FluttyAvatarSize.sm,
            radius: RadiusVariant.lg,
            isBordered: true,
            color: ColorVariant.warning,
            src: 'https://i.pravatar.cc/150?u=a04258114e29026702d',
          ),
          child: Text(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
            " sed do eiusmod tempor incididunt ut labore et dolore"
            " magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation"
            " ullamco laboris nisi ut aliquip ex ea commodo consequat.",
          ),
        ),
      ],
    ),
  );

Custom Indicators

Padding(
    padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
    child: FluttyAccordion(
      items: [
        FluttyAccordionItem(
          title: 'Accordion 1',
          subtitle: "Press to expand",
          indicator: HeroIcons.sun.solid,
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 2',
          subtitle: "Press to expand",
          indicator: HeroIcons.moon.solid,
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
        FluttyAccordionItem(
          title: 'Accordion 3',
          subtitle: "Press to expand",
          indicator: HeroIcons.bugAnt.solid,
          child: Text(
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
          ),
        ),
      ],
    ),
  );

API

FluttyAccordion

Prop

Type

FluttyAccordionItem

Prop

Type

On this page