Expander constructor

const Expander({
  1. Key? key,
  2. required Widget child,
  3. required Widget header,
  4. double gapPadding = 8,
  5. CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.start,
  6. bool initiallyExpanded = false,
  7. ExpanderController? controller,
  8. Duration duration = const Duration(milliseconds: 250),
  9. Duration reverseDuration = const Duration(milliseconds: 250),
  10. Curve curve = Curves.easeOutCirc,
  11. AlignmentGeometry alignment = Alignment.topCenter,
  12. Widget? overrideSeparator,
})

Creates an Expander widget.

Required parameters:

  • child: The widget displayed when expanded; supports any content like Text, Column, or complex layouts such as DataTable or StaticTable.
  • header: The persistent, clickable widget that toggles expansion; typically Text, Row with icons, or themed elements from ArcaneTheme.

Optional parameters:

  • initiallyExpanded: Starts the widget in expanded state (default: false).
  • controller: ExpanderController for external state syncing (default: null).
  • duration: Expansion animation length (default: 250ms).
  • reverseDuration: Collapse animation length (default: 250ms).
  • curve: Easing for expansion (default: Curves.easeOutCirc for smooth deceleration).
  • alignment: Alignment during size transition (default: Alignment.topCenter).
  • overrideSeparator: Custom widget between header and child (default: null, uses Gap).
  • gapPadding: Padding value for default separator (default: 8.0).
  • crossAxisAlignment: Column alignment when expanded (default: CrossAxisAlignment.start).

Example:

Expander(
  header: Text("Click to expand", style: TextStyle(fontWeight: FontWeight.bold)),
  child: Padding(
    padding: EdgeInsets.symmetric(vertical: 8.0),
    child: Text("This is the expandable content."),
  ),
)

Implementation

const Expander({
  super.key,
  required this.child,
  required this.header,
  this.gapPadding = 8,
  this.crossAxisAlignment = CrossAxisAlignment.start,
  this.initiallyExpanded = false,
  this.controller,
  this.duration = const Duration(milliseconds: 250),
  this.reverseDuration = const Duration(milliseconds: 250),
  this.curve = Curves.easeOutCirc,
  this.alignment = Alignment.topCenter,
  this.overrideSeparator,
});