Group features topic

ExpansionTileItems can be seamlessly grouped and their interactions easily managed, offering you unparalleled control and flexibility.

Check out Example

Get Started

You have defined a list of ExpansionTileItem, to group them just simply wrap them into ExpansionTileGroup widget.

For example:

class ExpansionGroupExample extends StatelessWidget {
 const ExpansionGroupExample({Key? key}) : super(key: key);
 @override
 Widget build(BuildContext context) {
   return ExpansionTileGroup(
       children: [
         const ExpansionTileItem(
           title: Text('ExpansionTile item 1'),
           expendedBorderColor: Colors.blue,
           children: [
             Text('Title of expansion tile item 1'),
           ],
         ),
         const ExpansionTileOutlined(
           title: Text('ExpansionTile item 2'),
           expendedBorderColor: Colors.blue,
           children: [
             Text('Title of expansion tile item 2'),
           ],
         ),
         const ExpansionTileFlat(
           title: Text('ExpansionTile item 3'),
           expendedBorderColor: Colors.blue,
           children: [
             Text('Title of expansion tile item 3'),
           ],
         ),
       ]
   );
 }
}

Behaviors between items in the group

You can control behaviors between items in the group by adding toggleType parameter to ExpansionTileGrouplike this:

class ExpansionGroupExample extends StatelessWidget {
 const ExpansionGroupExample({Key? key}) : super(key: key);
 @override
 Widget build(BuildContext context) {
   return ExpansionTileGroup(
       toggleType: ToggleType.expandOnlyCurrent,
       children: []
   );
 }
}

There are many types of toggleType, it support almost common case you will be met:

toggleType type	Description
none	It's default. Do nothing if an item changed behavior
expandOnlyCurrent	When an item in group is expanded, would collapse all the others
collapseAll	Collapse all items if any item in group is collapsed
expandAll	Expanded all items if any item in group is expanded
expandAllOrCollapseAll	Expanded/Collapsed all items if any item in group is Expanded/Collapsed
expandAlwaysCurrent	Expand tapped item and collapse all others, but not collapse the expanded one when tap again

ToggleType.expandOnlyCurrent	ToggleType.collapseAll
ToggleType.expandAll	ToggleType.expandAllOrCollapseAll

Listen the changed of any item in the group

Adding the onExpansionItemChanged parameter into ExpansionTileGroup to listen the changed of any item in the group:

class ExpansionGroupExample extends StatelessWidget {
 const ExpansionGroupExample({Key? key}) : super(key: key);
 @override
 Widget build(BuildContext context) {
   return ExpansionTileGroup(
       onExpansionItemChanged: (index, isExpanded) {
         //index: the position of item that just changed state,
         //isExpanded: present current behavior:
         //- true: the item is expanding,
         //- false: the item is collapsing
       },
       children: []
   );
 }
}

Adding space between items

Adding the spaceBetweenItem parameter into ExpansionTileGroup to spacing between items:

class ExpansionGroupExample extends StatelessWidget {
 const ExpansionGroupExample({Key? key}) : super(key: key);
 @override
 Widget build(BuildContext context) {
   return ExpansionTileGroup(
       spaceBetweenItem: 16,
       children: []
   );
 }
}

ExpansionTileGroup parameters

Parameter	Description
key	Controls how one widget replaces another widget in the tree.
children*	The children in this group, ExpansionTileItem
toggleType	Provide the behavior of items in this group, it's enum
spaceBetweenItem	The gap space between item in the group
onExpansionItemChanged	Listen the changed behavior of any item in the group

Libraries

expansion_tile_group

This package overcomes the limitations of the standard ExpansionTile widget by incorporating highly customizable widgets that fully extends its functionality. These widgets can be seamlessly grouped and their interactions easily managed, offering you unparalleled control and flexibility.