Accordion Widget

The Accordion widget allows you to display a list of items in an accordion-style UI, where individual sections can be expanded or collapsed. This widget is highly customizable, offering options for styling the headers and bodies, controlling the behavior of sections (whether multiple sections can be open at once), and customizing animations and icons.

Key Properties and Features

Accordion Mode: The limitExpandedToOne property determines whether only one section can be open at a time (accordion mode) or multiple sections can be open simultaneously. Defaults to true.
Initial Opening Sequence Delay: The initialOpeningSequenceDelay property allows you to add a delay (in milliseconds) before the initial opening of the sections.
Section Styling: The headerStyle and bodyStyle properties allow you to customize the appearance of the header and body sections, respectively.
Icons: You can add icons to the left and right of each section using leftIcon and rightIcon, and choose whether they flip when the section is opened or closed.
Padding and Spacing: Control padding inside sections and spacing between sections using properties like paddingListTop, paddingListBottom, paddingListHorizontal, paddingBetweenOpenSections, and paddingBetweenClosedSections. Default values for padding are 0.0.
Animations: Customize the opening and closing animations of the sections with openAndCloseAnimation and scaleWhenAnimating. Both default to true.
Scrolling: Disable scrolling for the accordion using the disableScrolling property. Defaults to false.

Open in Studio

Properties

Property	Type	Description
items	List	A list of items representing the sections of the accordion. Each item can have its own header, body, and individual styles.
limitExpandedToOne	boolean	Determines whether only one section can be open at a time `true` or multiple sections can be open simultaneously `false`. Defaults to `true`.
initialOpeningSequenceDelay	int?	Specifies a delay (in milliseconds) before the initial opening of the sections. Defaults to `null`.
headerStyle	HeaderStyleComposite	Defines the style properties for the section headers.
bodyStyle	BodyStyleComposite	Defines the style properties for the section bodies.
leftIcon	dynamic	Specifies an icon to display on the left of the header.
rightIcon	dynamic	Specifies an icon to display on the right of the header.
flipLeftIconIfOpen	bool?	Determines whether the left icon should flip when the section is opened. Defaults to `null`.
flipRightIconIfOpen	bool?	Determines whether the right icon should flip when the section is opened. Defaults to `true`.
paddingListTop	double	Sets the padding at the top of the accordion list. Defaults to `0.0`.
paddingListBottom	double	Sets the padding at the bottom of the accordion list. Defaults to `0.0`.
paddingListHorizontal	double	Sets the horizontal padding for the entire list of sections. Defaults to `0.0`.
paddingBetweenOpenSections	double?	Controls the padding between open sections. Defaults to `null`.
paddingBetweenClosedSections	double?	Controls the padding between closed sections. Defaults to `null`.
disableScrolling	bool	If `true`, disables scrolling for the accordion widget. Defaults to `false`.
openAndCloseAnimation	bool?	If `true`, enables the open and close animations for sections. Defaults to `true`.
scaleWhenAnimating	bool?	If `true`, the sections will scale when opening and closing as part of the animation. Defaults to `true`.

Events

Event	Description
onOpenSection	Triggered when a section is opened. You can define actions or code to be executed when a section opens.
onCloseSection	Triggered when a section is closed. Allows you to define actions or code to be executed on section close.

Methods

Method	Description
openSection	Opens a specific section by its index.
closeSection	Closes a specific section by its index.

Getters

Getter	Type	Description
openSections	List	Retrieves the list of currently open section indices.
headerStyle	object	Retrieves the header style properties of the accordion.
bodyStyle	object	Retrieves the body style properties of the accordion.

HeaderStyleComposite

The HeaderStyleComposite is a class that defines the styling options for the headers of each section in the accordion.

Properties

Property	Type	Description
backgroundColor	Color	The background color of the header. Defaults to `null`.
backgroundColorOpened	Color	The background color of the header when the section is opened. Defaults to `null`.
borderColor	Color	The border color of the header. Defaults to `null`.
borderColorOpened	Color	The border color of the header when the section is opened. Defaults to `null`.
borderWidth	double?	The width of the header's border. Defaults to `null`.
borderRadius	double?	The radius of the header's corners. Defaults to `null`.
padding	EdgeInsets?	The padding inside the header. Defaults to `null`.

BodyStyleComposite

The BodyStyleComposite is a class that defines the styling options for the body of each section in the accordion.

Properties

Property	Type	Description
backgroundColor	Color	The background color of the body. Defaults to `null`.
borderColor	Color	The border color of the body. Defaults to `null`.
borderWidth	double?	The width of the body's border. Defaults to `null`.
borderRadius	double?	The radius of the body's corners. Defaults to `null`.
horizontalPadding	double?	The horizontal padding inside the body. Defaults to `null`.
verticalPadding	double?	The vertical padding inside the body. Defaults to `null`.

This widget also inherits these styles:

Property	Type	Description
margin	integer/string	Margin with CSS-style notation (1 to 4 integers) e.g. margin: 5 20 5
padding	integer/string	Padding with CSS-style notation (1 to 4 integers) e.g. padding: 5 20 5
backgroundColor	Color	The background color of this widget.
backgroundImage	BackgroundImage	The background image of this widget.
backgroundGradient	Gradient	The background gradient of this widget.
border	Border	The border of this widget.
shadow	Shadow	The shadow of this widget
clipContent	boolean	Some widgets (such as Image) may bleed through the container when borderRadius is set. Use this to apply a clipping to ensure this does not happen.
width	integer	The width of this widget.
height	integer	The height of this widget.
borderRadius	string or integer	The border radius of the widget. This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0.
borderColor	integer or string	Sets the border color, starting with '0xFF' for full opacity. Possible values: transparent, black, blue, white, red, grey, teal, amber, pink, purple, yellow, green, brown, cyan, indigo, lime, orange.
borderWidth	integer	Thickness of the border. Minimum value should be 0.
shadowColor	integer or string	Sets the box shadow color starting with '0xFF' for full opacity. Possible values: transparent, black, blue, white, red, grey, teal, amber, pink, purple, yellow, green, brown, cyan, indigo, lime, orange.
shadowOffset	array	The values in the array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position.
shadowRadius	string or integer	The border radius of the widget. This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0.
shadowStyle	string	The blur style to apply on the shadow: normal, solid, outer, inner.

Base Styles (Inherited)

This widget also inherits these base styles:

Property	Type	Description
visible	boolean	Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified.
visibilityTransitionDuration	number	Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible.
elevation	integer	The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. (Minimum: 0, Maximum: 24)
elevationShadowColor	Color	The shadow color for the elevation.
elevationBorderRadius	integer / string	If the widget has a borderRadius, this should be changed to have the same value. Use with CSS-like notation (1 to 4 integers).
alignment	Alignment	Align this widget relative to its parent.
stackPositionTop	integer	The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children.
stackPositionBottom	integer	The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children.
stackPositionLeft	integer	The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children.
stackPositionRight	integer	The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children.
captureWebPointer	boolean	Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g., Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget.

By utilizing these properties, methods, and events, you can effectively integrate and customize the Collapsible widget to match your application's requirements.

Widgets Avatar