Collapsible Widget

The Collapsible widget allows you to display a list of items in a collapsible or 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 isAccordion property determines whether only one section can be open at a time (accordion mode) or multiple sections can be open simultaneously. Defaults to true.
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.
Animation: Customize the opening and closing animations of the sections with openAndCloseAnimation and scaleWhenAnimating. Both default to true.
Padding and Spacing: Control padding inside sections and spacing between sections using properties like paddingListTop, paddingListBottom, paddingBetweenOpenSections, and paddingBetweenClosedSections. Default values for padding are 0.0.

Open in Studio

Properties

Property	Type	Description
items	List	A list of items representing the sections of the collapsible. Each item can have its own header, body, and individual styles.
isAccordion	boolean	Determines whether only one section can be open at a time `true` or multiple sections can be open simultaneously `false`. Defaults to `true`.
headerStyle	HeaderStyleComposite	Defines the style properties for the section headers.
bodyStyle	BodyStyleComposite	Defines the style properties for the section bodies.
leftIcon	object	Specifies an icon to display on the left of the header.
rightIcon	object	Specifies an icon to display on the right of the header.
flipLeftIconIfOpen	boolean	Determines whether the left icon should flip when the section is opened. Defaults to `false`.
flipRightIconIfOpen	boolean	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 collapsible list. Defaults to `0.0`.
paddingListBottom	double	Sets the padding at the bottom of the collapsible 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 `0.0`.
paddingBetweenClosedSections	double	Controls the padding between closed sections. Defaults to `0.0`.
disableScrolling	boolean	If `true`, disables scrolling for the collapsible widget. Defaults to `false`.
openAndCloseAnimation	boolean	If `true`, enables the open and close animations for sections. Defaults to `true`.
scaleWhenAnimating	boolean	If `true`, the sections will scale when opening and closing as part of the animation. Defaults to `true`.
accordionId	string	Specifies a unique identifier for the accordion, useful when dealing with multiple accordions.

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 collapsible.
bodyStyle	object	Retrieves the body style properties of the collapsible.

HeaderStyleComposite

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

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 `1.0`.
borderRadius	double	The radius of the header's corners. Defaults to `0.0`.
padding	EdgeInsets	The padding inside the header. Defaults to `EdgeInsets.zero`.

BodyStyleComposite

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

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 `1.0`.
borderRadius	double	The radius of the body's corners. Defaults to `0.0`.
horizontalPadding	double	The horizontal padding inside the body. Defaults to `0.0`.
verticalPadding	double	The vertical padding inside the body. Defaults to `0.0`.

Box Styles (Inherited)

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.

Checkbox Column