accordion #

Accordion widget to display a list of expandable items with opening/closing and scroll-into-view animations.

Simple to use accordion widget with lots of preset properties. Use the maxOpenSections property to automatically close sections when opening a new section. This is especially helpful if you always want your list to look clean -- just set this parameter to 1 and whenever you open a new section the previous one closes. The initial opening animation of sections is hardcoded so far, but the scrollIntoView paramter can be set to fast, slow, or none. This parameter will only take affect if there are enough items in the list so scrolling is feasible.

Many parameters can be set globally on Accordion as well as individually on each AccordionSection (see list below).

The header consists of the left and right icons (right icon is preset to arrow down). Both can be set globally and individually. The headerText parameter is required and needs to be set for each AccordionSection.

The content area basically provides the container in which you drop whatever you want to display when AccordionSection opens. Background and borders can be set globally or individually per section.

Enjoy!

Sample Code #

Accordion(
	maxOpenSections: 2,
	headerTextStyle: TextStyle(color: Colors.white, fontSize: 17, fontWeight: FontWeight.bold),
	leftIcon: Icon(Icons.audiotrack, color: Colors.white),
	children: [
	AccordionSection(
		isOpen: true,
		headerText: 'Introduction',
		content: Text('This is the introduction right here ...'),
	),
	AccordionSection(
		isOpen: true,
		headerText: 'About Us',
		content: Icon(Icons.airline_seat_flat, size: 120, color: Colors.blue[200]),
	),
	AccordionSection(
		isOpen: true,
		headerText: 'Company Info',
		content: Icon(Icons.airplay, size: 70, color: Colors.green[200]),
	),
	],
),

Common Properties #

The following properties can be set globally for all sections or for each section individually:

Properties for Accordion #

Properties for AccordionSection #