Expand item inside list of items - ExpansionPanel in flutter

This Article is posted by seven.srikanth at 10/1/2021 7:45:39 PM



<p>Here is an example of how to expand items in a list of items in flutter.</p> <p>![](../../../Uploads/aaceb552-b695-4ddf-bc12-e05b537314dc.pngwidth="50%height="auto](</p> <p>Here is the complete code. color: #dcdcaa;](runApp(color: #569cd6;](const color: #4ec9b0;](MyApp());</p> <p id="9cdcfe;](key" color:="" color:="" color:=>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget ) : color: #569cd6;](super(color: #9cdcfe;](key: color: #9cdcfe;](key); color: #569cd6;](static color: #569cd6;](const color: #4ec9b0;](String color: #9cdcfe;](_title = color: #ce9178;]('Flutter Code Sample'; color: #9cdcfe;](@ color: #9cdcfe;](override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext color: #9cdcfe;](context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( color: #9cdcfe;](title: color: #9cdcfe;](_title, color: #9cdcfe;](home: color: #4ec9b0;](Scaffold( color: #9cdcfe;](appBar: color: #4ec9b0;](AppBar(color: #9cdcfe;](title: color: #569cd6;](const color: #4ec9b0;](Text(color: #9cdcfe;](_title)), color: #9cdcfe;](body: color: #569cd6;](const color: #4ec9b0;](MyStatefulWidget(), ), ); } }</p> <p>color: #569cd6;](class color: #4ec9b0;](Item { color: #4ec9b0;](Item({ color: #569cd6;](required color: #569cd6;](this.color: #9cdcfe;](expandedValue, color: #569cd6;](required color: #569cd6;](this.color: #9cdcfe;](headerValue, color: #569cd6;](this.color: #9cdcfe;](isExpanded = color: #569cd6;](false, }); color: #4ec9b0;](String color: #9cdcfe;](expandedValue; color: #4ec9b0;](String color: #9cdcfe;](headerValue; color: #4ec9b0;](bool color: #9cdcfe;](isExpanded; }</p> <p>color: #4ec9b0;](List color: #dcdcaa;](generateItems(color: #4ec9b0;](int color: #9cdcfe;](numberOfItems) { color: #c586c0;](return color: #4ec9b0;](List.color: #4ec9b0;](generate(color: #9cdcfe;](numberOfItems, (color: #4ec9b0;](int color: #9cdcfe;](index) { color: #c586c0;](return color: #4ec9b0;](Item( color: #9cdcfe;](headerValue: color: #ce9178;]('Item color: #ce9178;]($ color: #9cdcfe;](index color: #ce9178;](', color: #9cdcfe;](expandedValue: color: #ce9178;]('This is item number color: #ce9178;]($ color: #9cdcfe;](index color: #ce9178;](', ); }); }</p> <p id="9cdcfe;](key" color:= color:="" color:="">color: #569cd6;](class color: #4ec9b0;](MyStatefulWidget color: #569cd6;](extends color: #4ec9b0;](StatefulWidget ) : color: #569cd6;](super(color: #9cdcfe;](key: color: #9cdcfe;](key); color: #9cdcfe;](@ color: #9cdcfe;](override</p> <p>color: #4ec9b0;](State color: #dcdcaa;](createState() => color: #4ec9b0;](_MyStatefulWidgetState(); }</p> <p>color: #569cd6;](class color: #4ec9b0;](_MyStatefulWidgetState color: #569cd6;](extends color: #4ec9b0;](State { color: #569cd6;](final color: #4ec9b0;](List color: #9cdcfe;](_data = color: #dcdcaa;](generateItems(color: #b5cea8;](8); color: #9cdcfe;](@ color: #9cdcfe;](override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext color: #9cdcfe;](context) { color: #c586c0;](return color: #4ec9b0;](SingleChildScrollView( color: #9cdcfe;](child: color: #4ec9b0;](Container( color: #9cdcfe;](child: color: #dcdcaa;](_buildPanel(), ), ); } color: #4ec9b0;](Widget color: #dcdcaa;](_buildPanel() { color: #c586c0;](return color: #4ec9b0;](ExpansionPanelList( color: #9cdcfe;](expansionCallback: (color: #9cdcfe;](panelIndex, color: #9cdcfe;](isExpanded) { color: #dcdcaa;](setState(() { color: #9cdcfe;](_data[color: #9cdcfe;](panelIndex].color: #9cdcfe;](isExpanded = !color: #9cdcfe;](isExpanded; }); }, color: #9cdcfe;](children: color: #9cdcfe;](_data</p> <pre> .color: #dcdcaa;](map((color: #9cdcfe;](e) => color: #4ec9b0;](ExpansionPanel( color: #9cdcfe;](isExpanded: color: #9cdcfe;](e.color: #9cdcfe;](isExpanded, color: #9cdcfe;](headerBuilder: (color: #9cdcfe;](context, color: #9cdcfe;](isExpanded) => color: #4ec9b0;](ListTile(color: #9cdcfe;](title: color: #4ec9b0;](Text(color: #9cdcfe;](e.color: #9cdcfe;](headerValue)), color: #9cdcfe;](body: color: #4ec9b0;](ListTile( color: #9cdcfe;](title: color: #4ec9b0;](Text(color: #9cdcfe;](e.color: #9cdcfe;](expandedValue), ))) .color: #dcdcaa;](toList(), ); </pre> <p>} } ` Thanks, Srikanth</p>


Tags: Expand item;








0 Comments
Login to comment.
Recent Comments