ExpandableListTileButton class

A widget that provides an expandable list tile button with customizable headers and content.

The ExpandableListTileButton can be used to create a list tile that expands to reveal additional content when tapped. It supports custom headers, icons, expanded content, elevation for the combined widget, disabled state, and external control via ExpandableController.

Uses a Stack layout to ensure the header remains fully rounded and the body expands smoothly beneath it. Background colors for the header and expanded body areas are specified separately using headerBackgroundColor and expandedBodyColor. For backward compatibility, backgroundColor and expandedColor can also be used, but the newer names are preferred.

Example usage:

ExpandableController _controller = ExpandableController();
// ...
ExpandableListTileButton.listTile(
  controller: _controller,
  title: Text('Tap to expand'),
  expanded: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text('Expanded content goes here.'),
  ),
  margin: EdgeInsets.all(8),
  elevation: 4,
  headerBackgroundColor: Colors.blue[100], // Preferred
  expandedBodyColor: Colors.blue[50],    // Preferred
  borderRadius: BorderRadius.circular(12),
);
Inheritance

Constructors

ExpandableListTileButton({Key? key, required Widget expanded, Widget customHeaderBuilder(dynamic tapAction(), bool isExpanded, bool isDisabled)?, Widget? title, Widget? subtitle, Color? headerBackgroundColor, Color? expandedBodyColor, Color? backgroundColor, Color? expandedColor, Color? iconColor, Color? trailingIconColor, Color? borderColor, double elevation = 1, EdgeInsetsGeometry? margin, double? leadingSizeFactor, Widget? leading, IconData? icon, BorderRadius borderRadius = const BorderRadius.all(Radius.circular(10)), bool disabled = false, AlignmentGeometry bodyAlignment = Alignment.center, ExpandableController? controller, Size? trailingSize, bool overlay = false})
Creates an ExpandableListTileButton with the given properties.
const
ExpandableListTileButton.custom({Key? key, required Widget expanded, required Widget customHeaderBuilder(dynamic tapAction(), bool isExpanded, bool isDisabled), Color? headerBackgroundColor, Color? expandedBodyColor, Color? backgroundColor, Color? expandedColor, Color? borderColor, double elevation = 1, EdgeInsetsGeometry? margin, BorderRadius borderRadius = const BorderRadius.all(Radius.circular(10)), bool disabled = false, AlignmentGeometry bodyAlignment = Alignment.center, ExpandableController? controller})
Creates an ExpandableListTileButton with a completely custom header provided by customHeaderBuilder.
factory
ExpandableListTileButton.iconListTile({Key? key, required Widget expanded, required IconData icon, required Widget title, Widget? subtitle, Color? headerBackgroundColor, Color? expandedBodyColor, Color? backgroundColor, Color? expandedColor, EdgeInsetsGeometry? leadingPadding, Color? iconColor, Color? trailingIconColor, Color? borderColor, double elevation = 1, double? leadingSizeFactor, EdgeInsetsGeometry? margin, BorderRadius borderRadius = const BorderRadius.all(Radius.circular(10)), bool disabled = false, AlignmentGeometry bodyAlignment = Alignment.center, ExpandableController? controller})
Creates an ExpandableListTileButton with a default header using an icon on the left.
factory
ExpandableListTileButton.listTile({Key? key, required Widget expanded, required Widget title, Widget? subtitle, Color? headerBackgroundColor, Color? expandedBodyColor, Color? backgroundColor, Color? expandedColor, Color? trailingIconColor, Color? borderColor, double elevation = 1, Widget? leading, EdgeInsetsGeometry? margin, BorderRadius borderRadius = const BorderRadius.all(Radius.circular(10)), bool disabled = false, AlignmentGeometry bodyAlignment = Alignment.center, ExpandableController? controller})
Creates an ExpandableListTileButton with a default header based on ListTile.
factory
ExpandableListTileButton.overlayMenu({Key? key, required Widget expanded, required Widget title, Widget? subtitle, Widget? leading, Color? headerBackgroundColor, Color? expandedBodyColor, Color? trailingIconColor, Color? borderColor, double elevation = 1, EdgeInsetsGeometry? margin, BorderRadius borderRadius = const BorderRadius.all(Radius.circular(10)), bool disabled = false, AlignmentGeometry bodyAlignment = Alignment.center, ExpandableController? controller, double leadingSizeFactor = 1, Size? trailingSize})
Creates a tile whose expanded content floats in an Overlay above other widgets.
factory

Properties

backgroundColor Color?
An alternative way to set the header background color for backward compatibility. headerBackgroundColor takes priority if both are provided.
final
bodyAlignment AlignmentGeometry
Alignment of the expanded widget within the body container.
final
borderColor Color?
The color of the border around the combined widget. Applied to the header Material shape.
final
borderRadius BorderRadius
Controls the radius of the corners for the header and the overall shape.
final
controller ExpandableController?
An optional controller to manage the expansion state externally. If provided, the widget's state will synchronize with the controller. If null, the widget manages its own expansion state internally.
final
customHeaderBuilder Widget Function(dynamic tapAction(), bool isExpanded, bool isDisabled)?
A builder function to create a custom header widget.
final
disabled bool
Whether the tile is interactive. If true, the tile cannot be expanded or collapsed by user tap, and its appearance is dimmed.
final
elevation double
The elevation of the header's shadow.
final
expanded Widget
The content to display when the tile is expanded.
final
expandedBodyColor Color?
The background color of the expanded content area. If null, expandedColor is used. If both are null, theme default is used. Using expandedBodyColor is preferred for clarity.
final
expandedColor Color?
An alternative way to set the expanded body background color for backward compatibility. expandedBodyColor takes priority if both are provided.
final
hashCode int
The hash code for this object.
no setterinherited
headerBackgroundColor Color?
The background color of the header area. If null, backgroundColor is used. If both are null, theme default is used. Using headerBackgroundColor is preferred for clarity.
final
icon IconData?
The icon data for the leading icon (used by default .iconListTile header).
final
iconColor Color?
The color of the leading icon (used by default .iconListTile header).
final
key Key?
Controls how one widget replaces another widget in the tree.
finalinherited
leading Widget?
The leading widget of the tile (used by default .listTile header).
final
leadingSizeFactor double?
Factor to scale the size of the leading icon (used by default .iconListTile header).
final
margin EdgeInsetsGeometry?
The external margin around the widget.
final
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
subtitle Widget?
Additional content displayed below the title when collapsed (used by default headers).
final
title Widget?
The primary content of the tile when collapsed (used by default headers).
final
trailingIconColor Color?
The color of the trailing expand/collapse icon (used by default headers).
final
trailingSize Size?
If non-null, constrains the trailing widget to this size.
final

Methods

createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() State<ExpandableListTileButton>
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