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
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- ExpandableListTileButton
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
.iconListTileheader).final - iconColor → Color?
-
The color of the leading icon (used by default
.iconListTileheader).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
.listTileheader).final - leadingSizeFactor → double?
-
Factor to scale the size of the leading icon (used by default
.iconListTileheader).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