These two widgets are designed to work together to present a list of expandable panels to the user
We have to manage the state of what was expanded / collapsed and rebuild the ExpansionPanelList & ExpansionPanels everytime the state changes
Shrink the panel. It has a title and a body that can be expanded or collapsed. The body of the panel is only visible when expanded.
The shrink panel is only used as a child of ExpansionPanelList. Example implementation, please use ExpansionPanelList
|
ExpansionPanel({ @required this.headerBuilder, @required this.body, this.isExpanded = false, this.canTapOnHeader = false, }) |
A material expansion panel list that lays out its children and animates expansions
Lays out the child ExpansionPanels
|
const ExpansionPanelList({ Key key, this.children = const <ExpansionPanel>[], this.expansionCallback, this.animationDuration = kThemeAnimationDuration, }) |
There are only three parameters that we need to use:
children: Needless to say, it is ExpansionPanel
expansionCallback: expansion callback, here will return the index of the click
animationDuration: the duration of the animation
Example:
|
class ExpansionWidget extends StatefulWidget{ @override State<StatefulWidget> createState() { // TODO: implement createState return ExpansionWidgetState(); } } class ExpansionWidgetState extends State<ExpansionWidget>{ List<bool>listExpans=List(); @override void initState() { // TODO: implement initState super.initState(); listExpans.add(false); listExpans.add(false); } @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( backgroundColor: Colors.grey, appBar: AppBar(title: Text("Expansionpanel"),backgroundColor: Colors.pink,), body: SingleChildScrollView( child: Container( alignment: Alignment.center, child: Column( children: <Widget>[ ExpansionPanelList( children : <ExpansionPanel>[ ExpansionPanel( headerBuilder:(context, isExpanded){ return ListTile( title: Text('Try Expansion 1'), ); }, body: Padding( padding: EdgeInsets.fromLTRB(15, 0, 15, 15), child: ListBody( children: <Widget>[ Card( margin:EdgeInsets.fromLTRB(0, 0, 0, 10), child: Padding(padding: EdgeInsets.all(8),child: Text('Content 1'),), ), Card( margin:EdgeInsets.fromLTRB(0, 0, 0, 10), child: Padding(padding: EdgeInsets.all(8),child: Text('Content 2'),), ), Card( margin:EdgeInsets.fromLTRB(0, 0, 0, 10), child: Padding(padding: EdgeInsets.all(8),child: Text('Content 3'),), ), Card( margin:EdgeInsets.fromLTRB(0, 0, 0, 10), child: Padding(padding: EdgeInsets.all(8),child: Text('Content 4'),), ), Card( margin:EdgeInsets.fromLTRB(0, 0, 0, 10), child: Padding(padding: EdgeInsets.all(8),child: Text('Content 5'),), ), ], ), ), isExpanded: listExpans[0], canTapOnHeader: true, ),
ExpansionPanel( headerBuilder:(context, isExpanded){ return ListTile( title: Text('Try Expansion 2 '), ); }, body: Padding( padding: EdgeInsets.fromLTRB(15, 0, 15, 15), child: ListBody( children: <Widget>[ Card( margin:EdgeInsets.fromLTRB(0, 0, 0, 10), child: Padding(padding: EdgeInsets.all(8),child: Text('Content 1'),), ), Card( margin:EdgeInsets.fromLTRB(0, 0, 0, 10), child: Padding(padding: EdgeInsets.all(8),child: Text('Content 2'),), ), Card( margin:EdgeInsets.fromLTRB(0, 0, 0, 10), child: Padding(padding: EdgeInsets.all(8),child: Text('Content 3'),), ), Card( margin:EdgeInsets.fromLTRB(0, 0, 0, 10), child: Padding(padding: EdgeInsets.all(8),child: Text('Content 4'),), ), Card( margin:EdgeInsets.fromLTRB(0, 0, 0, 10), child: Padding(padding: EdgeInsets.all(8),child: Text('Content 5'),), ), ], ), ), isExpanded: listExpans[1], canTapOnHeader: true, ), ], expansionCallback:(panelIndex, isExpanded){ setState(() { listExpans[panelIndex] = !isExpanded; }); }, animationDuration : kThemeAnimationDuration, ), ], ), ), ) ); } } |
|
|
|
Flutter Expandable Listview Example
