Accordion Widget

Estimated reading: 5 minutes 39 views

The Accordion is a UI component that allows content to be expanded and collapsed vertically. It is commonly used to organize large amounts of information into manageable sections, improving readability and user experience.

Accordions are ideal for scenarios where users need to focus on one section at a time without being overwhelmed by all content at once.

Common Use Cases

  • FAQs (Frequently Asked Questions)
  • Settings and configuration panels
  • Form sections
  • Documentation or feature explanations
  • Collapsible dashboards or filters

Accordion Constructor

Dart
Accordion({
  Key? key,
  required List<AccordionItemData> items,
  bool singleCollapse = false,
  IconData? prefixIcon,
  IconData? suffixIcon,
  Color? headerColor,
  Color? headerTextColor,
})

Parameters Explanation

items (required)

Dart
required List<AccordionItemData> items,

Defines the content of the accordion.

Each AccordionItemData contains:

  • Title text
  • Content widget
  • Optional per-item configuration

This parameter determines how many accordion panels are rendered. Will be explained later.

singleCollapse

Dart
bool singleCollapse = false,

Controls the accordion behavior:

  • false (default): Multiple panels can be expanded at the same time.
  • true: Only one panel can be expanded at a time (classic accordion behavior).

Use true for FAQs or step-by-step guides.

prefixIcon

Dart
IconData? prefixIcon,

Optional icon displayed before the header text of each accordion item.

Useful for:

  • Visual hierarchy
  • Category indication
  • Improved scannability

suffixIcon

Dart
IconData? suffixIcon,

Optional icon displayed at the end of the header.

Commonly used for:

  • Expand/collapse indicators
  • Custom visual cues (e.g., arrows, plus/minus icons)

headerColor

Dart
Color? headerColor,

Sets the background color of the accordion header.

Useful for:

  • Highlighting sections
  • Matching brand or theme colors

headerTextColor

Dart
Color? headerTextColor,

Defines the text color of the accordion header.

Ensures proper contrast and readability when using custom header colors.

Basic Usage Example

Dart
Accordion(
  singleCollapse: true,
  prefixIcon: Icons.info_outline,
  suffixIcon: Icons.expand_more,
  headerColor: kPrimaryColor.withOpacity(0.1),
  headerTextColor: kPrimaryColor,
  items: [
    AccordionItemData(
      title: 'General Information',
      content: Text('This section contains general information.'),
    ),
    AccordionItemData(
      title: 'Advanced Settings',
      content: Text('This section contains advanced configuration options.'),
    ),
    AccordionItemData(
      title: 'Security',
      content: Text('This section contains security-related settings.'),
    ),
  ],
)

Multiple Expanded Panels Example

Dart
Accordion(
  singleCollapse: false,
  items: [
    AccordionItemData(
      title: 'Section A',
      content: Text('Content for section A'),
    ),
    AccordionItemData(
      title: 'Section B',
      content: Text('Content for section B'),
    ),
  ],
)

AccordionItemData

AccordionItemData represents a single expandable section inside an Accordion.
Each item controls its own header appearance and content, allowing fine-grained customization per section.

AccordionItemData Constructor

Dart
AccordionItemData({
  required String title,
  required Widget content,
  IconData? prefixIcon,
  IconData? suffixIcon,
  Color? headerColor,
  Color? headerTextColor,
})

Parameters Explanation

title (required)

Dart
required String title,

The text displayed in the accordion header.

Best practices:

  • Keep it concise and descriptive
  • Clearly indicate what content will be revealed when expanded

content (required)

Dart
required Widget content,

The widget displayed when the accordion item is expanded.

This can be:

  • Text
  • Column / Row
  • Forms
  • Lists
  • Any custom widget

This makes the accordion highly flexible for complex layouts.

prefixIcon

Dart
IconData? prefixIcon,

Optional icon displayed before the title of this specific accordion item.

Overrides the accordion-level prefixIcon if provided.

Useful for:

  • Differentiating sections visually
  • Indicating category or type of content

suffixIcon

Dart
IconData? suffixIcon,

Optional icon displayed at the end of the header for this item.

Overrides the accordion-level suffixIcon if provided.

Common use cases:

  • Custom expand indicators
  • Status icons (e.g., warning, info)

headerColor

Dart
Color? headerColor,

Background color of this accordion item’s header.

Overrides the global headerColor defined in Accordion.

Use this to:

  • Highlight important sections
  • Apply contextual styling per item

headerTextColor

Dart
Color? headerTextColor,

Text color of the header title for this item.

Overrides the global headerTextColor.

Ensures readability when using custom header backgrounds.

Example: Per-Item Custom Styling

Dart
Accordion(
  singleCollapse: true,
  items: [
    AccordionItemData(
      title: 'Profile Settings',
      prefixIcon: Icons.person_outline,
      headerColor: kPrimaryColor.withOpacity(0.1),
      headerTextColor: kPrimaryColor,
      content: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text('Username'),
          Text('Email'),
        ],
      ),
    ),
    AccordionItemData(
      title: 'Security',
      prefixIcon: Icons.lock_outline,
      headerColor: kWarningColor.withOpacity(0.1),
      headerTextColor: kWarningColor,
      content: Text('Change password and manage sessions'),
    ),
  ],
)

Find several use case examples in the demo, please navigate to:

Dart
Base UI → Accordions

Precedence Rules

When both accordion-level and item-level styles are defined:

  1. Item-level configuration wins
  2. Accordion-level configuration acts as a fallback

This allows:

  • Global consistency
  • Selective customization where needed

Best Practices

  • Use singleCollapse: true for linear or step-based content
  • Keep accordion titles short and descriptive
  • Avoid placing very complex widgets inside accordion headers
  • Ensure sufficient contrast when customizing header colors

Summary

The Accordion component in FlutKit provides a clean and flexible way to organize collapsible content. With support for single or multiple expanded panels, customizable icons, and header styling, it can be adapted to a wide range of UI and UX requirements.

Share this Doc

Accordion Widget

Or copy link

CONTENTS