GSAccordion

The GSAccordion widget is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.

API Reference

This is an illustration of a Themed GSAccordion widget with default configuration.


    import 'package:gluestack_ui/gluestack_ui.dart';
    
    GSAccordion(
      animationDuration: Duration(milliseconds: 200),
      size: GSAccordionSizes.$md,
      type: GSAccordionTypes.multiple,
      variant: GSAccordionVariants.filled,
      isCollapsible: true,
      children: const [
        GSAccordionItem(
          title: GSAccordionTitle(text: 'How do I place an order?'),
          content: GSAccordionContent(
            text: "To place an order, simply select the products you want, proceed to checkout, provide shipping and payment information, and finalize your purchase.",
            ),
        ),
        GSAccordionItem(
          title: GSAccordionTitle(text: 'What payment options do you accept?'),
          content: GSAccordionContent(
            text: "We accept all major credit cards, including Visa, Mastercard, and American Express. We also support payments through PayPal.",
            ),
        ),
    ],
)

API Reference

Import

To use this widget in your project, include the following import statement in your file.

import "package:gluestack_ui/gluestack_ui.dart"

This section provides a comprehensive reference list for the widget parameters, detailing descriptions, properties, types, and default behavior for easy project integration.

GSAccordion

It inherits all the properties of Flutter's Container widget.

Parameters	Type	Default	Description
action	"single" \| "multiple"	"single"	Determines whether one or multiple items can be opened at the same time.
isCollapsible	bool	false	When action is "single" or "multiple", allows closing content when clicking trigger for an open item.
isDisabled	bool	false	When true, prevents the user from interacting with the accordion and all its items.
variant	"filled" \| "unfilled"	"unfilled"	It creates a box shadow around the accordion when variant is set to filled.
size	"$sm \| $md \| $lg"	"$md"	It defines the size of the accordion.

GSAccordionItem

Contains all the parts of a collapsible section. GSAccordionItem consists of GSAccordionTitle and GSAccordionContent which defines the title and content of GSAccordion widget.

GSAccordionTitle

It inherits all the properties of Flutter's Text widget.

GSAccordionContent

It inherits all the properties of Flutter's Text widget.

GSAccordionIcon

It inherits all the properties of Flutter Icon widget.

Features

Keyboard support for actions.
Option to add your styles or use the default styles.

Accessibility

We have outlined the various features that ensure the Accordion widget is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. Adheres to the WAI-ARIA design pattern

Keyboard

Space: When focused on a GSAccordion widget, pressing the spacebar triggers the expansion of the collapsed section.
Enter: When focused on a GSAccordion widget, pressing the enter triggers the expansion of the collapsed section.
Tab: Moves focus to the next focusable element.
Shift + Tab: Moves focus to the previous focusable element.

VoiceOver: When the GSAccordion Item is focused, the screen reader will announce the GSAccordion's title text and the state of the GSAccordion trigger (expanded or collapsed).

Examples

The Examples section provides visual representations of the different variants of the widget, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

GSAccordion with Rounded corners

The radius parameter can be used to create rounded corners for the GSAccordionItem widget.


  import 'package:gluestack_ui/gluestack_ui.dart';
    
  GSBox(
  style: GSStyle(width: 400, height: 350),
  child: const GSAccordion(
    size: GSAccordionSizes.$md,
    type: GSAccordionTypes.multiple,
    variant: GSAccordionVariants.filled,
    isCollapsible: true,
    prefixIconWhenTileExapanded: GSAccordionIcon(icon: Icons.remove),
    prefixIconWhenTileCollapsed: GSAccordionIcon(icon: Icons.add),
    itemPadding: EdgeInsets.all(12),
    children: [
      GSAccordionItem(
        radius: 12,
        title: GSAccordionTitle(
          text: 'How do I place an order?',
        ),
        content: GSAccordionContent(
          text:
              "To place an order, simply select the products you want, proceed to checkout, provide shipping and payment information, and finalize your purchase.",
        ),
      ),
      GSAccordionItem(
        radius: 12,
        title: GSAccordionTitle(text: 'What payment options do you accept?'),
        content: GSAccordionContent(
          text:
              "We accept all major credit cards, including Visa, Mastercard, and American Express.",
        ),
      ),
    ],
  ),
)

GSAccordion with Disabled item

You can disable an item by setting the isDisabled parameter to true. This will prevent the user from interacting with the accordion item and its content. You can also disable the whole accordion by setting the isDisabled parameter to true on the GSAccordion widget.


  import 'package:gluestack_ui/gluestack_ui.dart';
    
  GSBox(
  style: GSStyle(width: 400, height: 240),
  child: const GSAccordion(
    size: GSAccordionSizes.$md,
    type: GSAccordionTypes.multiple,
    variant: GSAccordionVariants.filled,
    isCollapsible: true,
    suffixIconWhenTileExpanded: GSAccordionIcon(icon: Icons.remove),
    suffixIconWhenTileCollapsed: GSAccordionIcon(icon: Icons.add),
    itemPadding: EdgeInsets.all(5),
    children: [
      GSAccordionItem(
        isDisabled: true,
        title: GSAccordionTitle(
          text: 'Disabled Item',
        ),
        content: GSAccordionContent(
          text: "Disabled item description...",
        ),
      ),
      GSAccordionItem(
        title: GSAccordionTitle(text: 'Is this accordion accessible?'),
        content: GSAccordionContent(
          text: "Yes, the accordion is accessible. It adheres to the WAI-ARIA design pattern. You can read more about it in the accessibility section of the docs.",
        ),
      ),
    ],
  ),
)

GSAccordion with Default value

Use the initialValues parameter to define the item that is open by default.


    import 'package:gluestack_ui/gluestack_ui.dart';

    GSBox(
        style: GSStyle(width: 400, height: 350),
        child: GSAccordion(
          size: GSAccordionSizes.$md,
          type: GSAccordionTypes.multiple,
          variant: GSAccordionVariants.filled,
          isCollapsible: true,
          suffixIconWhenTileExpanded: const GSAccordionIcon(icon: Icons.remove),
          suffixIconWhenTileCollapsed: const GSAccordionIcon(icon: Icons.add),
          itemPadding: const EdgeInsets.all(5),
          initialValues: const [false, false, true],
          children: const [
            GSAccordionItem(
              title: GSAccordionTitle(
                text: 'What is the default prop of the Accordion widget ?',
              ),
              content: GSAccordionContent(
                text:
                    "The defaultValue prop of the Accordion widget is used to define the open item by default. It is used when the Accordion component is uncontrolled",
              ),
            ),
            GSAccordionItem(
              title: GSAccordionTitle(text: 'Is this accordion accessible?'),
              content: GSAccordionContent(
                text:
                    "Yes, the accordion is accessible. It adheres to the WAI-ARIA design pattern. You can read more about it in the accessibility section of the docs.",
              ),
            ),
            GSAccordionItem(
              title: GSAccordionTitle(text: 'Is this accordion accessible?'),
              content: GSAccordionContent(
                text:
                    "Yes, the accordion is accessible. It adheres to the WAI-ARIA design pattern. You can read more about it in the accessibility section of the docs.",
              ),
            ),
          ],
        ),
      ),

Nested GSAccordion

You can nest GSAccordion widgets to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region.


  import 'package:gluestack_ui/gluestack_ui.dart';
    
  GSBox(
  style: GSStyle(width: 500, height: 380),
  child: const GSAccordion(
    size: GSAccordionSizes.$md,
    type: GSAccordionTypes.multiple,
    variant: GSAccordionVariants.filled,
    isCollapsible: true,
    prefixIconWhenTileCollapsed: GSAccordionIcon(icon: Icons.add),
    prefixIconWhenTileExapanded: GSAccordionIcon(icon: Icons.remove),
    itemPadding: EdgeInsets.all(5),
    children: [
      GSAccordionItem(
        title: GSAccordionTitle(
          text: 'USA',
        ),
        content: GSAccordion(
          size: GSAccordionSizes.$md,
          type: GSAccordionTypes.multiple,
          variant: GSAccordionVariants.filled,
          isCollapsible: true,
          suffixIconWhenTileExpanded: GSAccordionIcon(icon: Icons.remove),
          suffixIconWhenTileCollapsed: GSAccordionIcon(icon: Icons.add),
          itemPadding: EdgeInsets.all(5),
          children: [
            GSAccordionItem(
              title: GSAccordionTitle(
                text: 'California',
              ),
              content: GSAccordionContent(
                text:
                    "Capital city of California is Sacramento. California has a GDP of 2.89 trillion dollars and follows Pacific Standard Time zone.",
              ),
            ),
            GSAccordionItem(
              title: GSAccordionTitle(
                text: 'Nevada',
              ),
              content: GSAccordionContent(
                text:
                    "Nevada is located in a mountainous region that includes vast semiarid grasslands and sandy alkali deserts. It is the most arid state of the country.",
              ),
            ),
          ],
        ),
      ),
    ],
  ),
),