accordion 2.1.1
accordion: ^2.1.1 copied to clipboard

An expandable Flutter widget list where each item can be expanded or collapsed simply by clicking on the header.

accordion #

An expandable Flutter widget list where each item can be expanded or collapsed simply by clicking on the header.


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. scrollIntoView paramter can be set to fast, slow, or none and makes sure that just opened items will be fully visible. 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. As of version 2.1: the headerText, headerTextStyle & headerTextAlign parameters have been removed and should be replaced with the header widget parameter.

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.

Side note: it is possible to nest an Accordion within an AccordionSection but you will have to watch out for the following:

  • you should set maxOpenSections of the main Accordion to at least >= 2
  • scrollIntoView will not work for nested Accordions at this point!
  • see the example app (in the "Accordion within Accordion" section) for further info

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,
			header: Text('Introduction', TextStyle(color: Colors.white, fontSize: 17)),
			content: Text('This is the introduction right here ...'),
		),
		AccordionSection(
			isOpen: true,
			header: Text('About Us', TextStyle(color: Colors.white, fontSize: 17)),
			content: Icon(Icons.airline_seat_flat, size: 120, color: Colors.blue[200]),
		),
		AccordionSection(
			isOpen: true,
			header: Text('Company Info', TextStyle(color: Colors.white, fontSize: 17)),
			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:

PropertyDescriptionTypeRequiredDefault value
headerBackgroundColorbackground color of the section headerColornoprimaryColor (of theme)
headerBorderRadiusborder radius of the section headerdoubleno30
headerPaddingpadding of the title in the section headerEdgeInsetsnoEdgeInsets.symmetric(horizontal: 20, vertical: 10)
leftIconwidget to the left of the title in the section headerWidgetnonull
rightIconwidget to the right of the title in the section headerWidgetnoIcon(Icons.keyboard_arrow_down, color: Colors.white60, size: 20)
flipRightIconIfOpenif the right icon in the header should be flipped when section is openboolnotrue
contentBackgroundColorbackground color of the content part of the sectionColornoColors.white
contentBorderColorborder color of the content part of the sectionColornoColors.white
contentBorderWidthborder width of the content part of the sectiondoubleno0
contentBorderRadiusborder radius of the content part of the sectiondoubleno20
contentHorizontalPaddinghorizontal padding within the content part of the sectiondoubleno10
contentVerticalPaddingvertical padding within the content part of the sectiondoubleno10
paddingBetweenClosedSectionspadding below closed sectionsdoubleno3
paddingBetweenOpenSectionspadding below an open section to visually make it stand out moredoubleno10
scrollIntoViewOfItemsif a section should automatically be scrolled to the center of the list when openedScrollIntoViewOfItemsnoScrollIntoViewOfItems.fast
initialOpeningSequenceDelaythe delay in milliseconds (when the entire accordion loads) before the individual sections open one after another. Helpful if you go to a new page in your app and then (after the delay) have a nice opening sequence.intno0



Properties for Accordion #

PropertyDescriptionTypeRequiredDefault value
maxOpenSectionsmaximum number of open sections at any given time. Opening a new section will close the "oldest" open sectionintno1
childrenthe list of AccordionSectionListYES[]
paddingListToppadding of the Accordion list at the topdoubleno20.0
paddingListBottompadding of the Accordion list at the bottomdoubleno40.0
paddingListHorizontalhorizontal padding of the Accordion listdoubleno10.0



Properties for AccordionSection #

PropertyDescriptionTypeRequiredDefault value
isOpenif this section should initially be displayed open or notboolnofalse
headerthe header widget located between leftIcon & rightIconWidgetno
contentthe widget you want to display as the visible content when the section is openWidgetYES
paddingListBottompadding of the Accordion list at the bottomdoubleno40.0
paddingListHorizontalhorizontal padding of the Accordion listdoubleno10.0
31
likes
130
pub points
87%
popularity

Publisher

vulcansoft.com

An expandable Flutter widget list where each item can be expanded or collapsed simply by clicking on the header.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter, get, scroll_to_index

More

Packages that depend on accordion