ExpansionPanelList class

A material expansion panel list that lays out its children and animates expansions.

The expansionCallback is called when the expansion state changes. For normal ExpansionPanelList widgets, it is the responsibility of the parent widget to rebuild the ExpansionPanelList with updated values for ExpansionPanel.isExpanded. For ExpansionPanelList.radio widgets, the open state is tracked internally and the callback is invoked both for the previously open panel, which is closing, and the previously closed panel, which is opening.

Here is a simple example of how to use ExpansionPanelList.

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [ExpansionPanelList].

void main() => runApp(const ExpansionPanelListExampleApp());

class ExpansionPanelListExampleApp extends StatelessWidget {
  const ExpansionPanelListExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ExpansionPanelList Sample')),
        body: const ExpansionPanelListExample(),
      ),
    );
  }
}

// stores ExpansionPanel state information
class Item {
  Item({
    required this.expandedValue,
    required this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

class ExpansionPanelListExample extends StatefulWidget {
  const ExpansionPanelListExample({super.key});

  @override
  State<ExpansionPanelListExample> createState() =>
      _ExpansionPanelListExampleState();
}

class _ExpansionPanelListExampleState extends State<ExpansionPanelListExample> {
  final List<Item> _data = generateItems(8);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(child: Container(child: _buildPanel()));
  }

  Widget _buildPanel() {
    return ExpansionPanelList(
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _data[index].isExpanded = isExpanded;
        });
      },
      children: _data.map<ExpansionPanel>((Item item) {
        return ExpansionPanel(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(title: Text(item.headerValue));
          },
          body: ListTile(
            title: Text(item.expandedValue),
            subtitle: const Text(
              'To delete this panel, tap the trash can icon',
            ),
            trailing: const Icon(Icons.delete),
            onTap: () {
              setState(() {
                _data.removeWhere((Item currentItem) => item == currentItem);
              });
            },
          ),
          isExpanded: item.isExpanded,
        );
      }).toList(),
    );
  }
}

Constructors

ExpansionPanelList({Key? key, List<ExpansionPanel> children = const <ExpansionPanel>[], ExpansionPanelCallback? expansionCallback, Duration animationDuration = kThemeAnimationDuration, EdgeInsets expandedHeaderPadding = _kPanelHeaderExpandedDefaultPadding, Color? dividerColor, double elevation = 2, Color? expandIconColor, double materialGapSize = 16.0}): Creates an expansion panel list widget. The expansionCallback is triggered when an expansion panel expand/collapse button is pushed.
const
ExpansionPanelList.radio({Key? key, List<ExpansionPanel> children = const <ExpansionPanelRadio>[], ExpansionPanelCallback? expansionCallback, Duration animationDuration = kThemeAnimationDuration, Object? initialOpenPanelValue, EdgeInsets expandedHeaderPadding = _kPanelHeaderExpandedDefaultPadding, Color? dividerColor, double elevation = 2, Color? expandIconColor, double materialGapSize = 16.0}): Creates a radio expansion panel list widget.
const

Properties

animationDuration → Duration: The duration of the expansion animation.
final
children → List<ExpansionPanel>: The children of the expansion panel list. They are laid out in a similar fashion to ListBody.
final
dividerColor → Color?: Defines color for the divider when ExpansionPanel.isExpanded is false.
final
elevation → double: Defines elevation for the ExpansionPanel while it's expanded.
final
expandedHeaderPadding → EdgeInsets: The padding that surrounds the panel header when expanded.
final
expandIconColor → Color?: The color of the icon.
final
expansionCallback → ExpansionPanelCallback?: The callback that gets called whenever one of the expand/collapse buttons is pressed. The arguments passed to the callback are the index of the pressed panel and whether the panel is currently expanded or not.
final
hashCode → int: The hash code for this object.
no setterinherited
initialOpenPanelValue → Object?: The value of the panel that initially begins open. (This value is only used when initializing with the ExpansionPanelList.radio constructor.)
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
materialGapSize → double: Defines the MaterialGap.size of the MaterialGap which is placed between the ExpansionPanelList.children when they're expanded.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<StatefulWidget>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited

ExpansionPanelList class

Constructors

Properties

Methods

Operators

material_ui library