Expandable ListTile Button

The Expandable ListTile Button is a versatile widget that combines a list tile with an expandable panel. It allows you to create interactive sections in your app's UI where users can tap a list tile to reveal additional content. This widget comes with multiple constructors to suit different use cases, whether you need a simple expandable tile, a tile with an icon, or a fully customized header.

---

Constructors

1. Default Constructor

ExpandableListTileButton({
  Key? key,
  required ExpandableController controller,
  required Widget expanded,
  Widget? buttonBody,
  Widget? subtitle,
  Widget? buttonLeading,
  Color? backgroundColor,
  Color? expandedColor,
  Widget? trailing,
  double? size,
  Color? iconColor,
  EdgeInsetsGeometry? contentPadding,
  EdgeInsetsGeometry? padding,
  void Function()? onPressed,
})

This constructor provides a flexible setup with options for a body, subtitle, leading icon, trailing widget, and customizable colors. It’s suitable for most standard use cases where you need an expandable tile with configurable elements.

2. ListTile Button Constructor

ExpandableListTileButton.listTile({
  Key? key,
  required ExpandableController controller,
  required Widget expanded,
  Widget? buttonBody,
  Widget? subtitle,
  Widget? buttonLeading,
  Color? backgroundColor,
  Color? expandedColor,
  Widget? trailing,
  void Function()? onPressed,
})

This constructor simplifies the creation of a ListTileButton with expandable functionality, focusing on a typical list tile setup with a body, subtitle, leading, and trailing widgets.

3. Icon ListTile Button Constructor

ExpandableListTileButton.iconListTile({
  Key? key,
  required ExpandableController controller,
  required Widget expanded,
  required IconData icon,
  required Widget title,
  Widget? subtitle,
  Widget? trailing,
  Color? backgroundColor,
  Color? expandedColor,
  double? size,
  Color? iconColor,
  EdgeInsetsGeometry? contentPadding,
  EdgeInsetsGeometry? padding,
})

This constructor is ideal when you want to use an icon in the leading position of the tile. It allows for easy setup of an icon-based expandable tile with a title, optional subtitle, and trailing widget.

4. Custom Header Constructor

ExpandableListTileButton.customHeader({
  Key? key,
  required ExpandableController controller,
  required Widget expanded,
  required Widget customHeader,
  Color? backgroundColor,
  Color? expandedColor,
  Widget? trailing,
})

This constructor is designed for situations where you need a fully customized header. You can provide any widget as the header, making it highly flexible for complex UI designs.

---

Properties

Property	Type	Description
controller	ExpandableController	Controls the expansion state of the widget.
expanded	Widget	The content displayed when the tile is expanded.
buttonBody	Widget?	The main content of the tile when it is collapsed.
subtitle	Widget?	A secondary line of text or widget displayed below the buttonBody.
buttonLeading	Widget?	The leading widget displayed in the button, usually an icon.
customHeader	Widget?	A fully customizable header widget. Only used in the customHeader constructor.
icon	IconData?	The icon used in the iconListTile constructor, displayed in the leading position.
backgroundColor	Color?	The background color of the button when it is collapsed.
expandedColor	Color?	The background color of the button when it is expanded.
trailing	Widget?	The widget displayed at the end of the tile, often an icon or button.
size	double?	The size of the icon used in the iconListTile constructor.
iconColor	Color?	The color of the icon used in the iconListTile constructor.
contentPadding	EdgeInsetsGeometry?	Padding around the content of the tile.
padding	EdgeInsetsGeometry?	Padding around the entire tile.
onPressed	void Function()?	The callback function that gets triggered when the tile is tapped.

---

Usage Examples

Example with Default Constructor

ExpandableListTileButton(
  controller: ExpandableController(),
  expanded: Column(
    children: [
      Text('This is the expanded content'),
      ElevatedButton(onPressed: () {}, child: Text('Action')),
    ],
  ),
  buttonBody: Text('Tap to Expand'),
  buttonSubtitle: Text('More details'),
  buttonLeading: Icon(Icons.info),
  backgroundColor: Colors.white,
  expandedColor: Colors.grey[200],
  trailing: Icon(Icons.arrow_downward),
);

Example with ListTile Button Constructor

ExpandableListTileButton.listTile(
  controller: ExpandableController(),
  expanded: Text('Additional settings and information.'),
  buttonBody: Text('Settings'),
  subtitle: Text('Tap to expand'),
  buttonLeading: Icon(Icons.settings),
  backgroundColor: Colors.blue[50],
  expandedColor: Colors.blue[100],
  trailing: Icon(Icons.expand_more),
);

Example with Icon ListTile Button Constructor

ExpandableListTileButton.iconListTile(
  controller: ExpandableController(),
  expanded: Text('Detailed information here'),
  icon: Icons.info,
  title: Text('Information'),
  subtitle: Text('Click to expand'),
  trailing: Icon(Icons.arrow_forward),
  backgroundColor: Colors.white,
  iconColor: Colors.blue,
  size: 40.0,
);

Example with Custom Header Constructor

ExpandableListTileButton.customHeader(
  controller: ExpandableController(),
  expanded: Text('This is the expanded content with a custom header'),
  customHeader: Container(
    color: Colors.blue,
    padding: EdgeInsets.all(16.0),
    child: Row(
      children: [
        Icon(Icons.dashboard, color: Colors.white),
        SizedBox(width: 10),
        Text('Custom Header', style: TextStyle(color: Colors.white)),
      ],
    ),
  ),
  expandedColor: Colors.blue[100],
);

---

Customization Tips

• Flexible Layout: The multiple constructors allow for a high degree of flexibility. Choose the one that best fits your use case, whether you need a simple expandable tile or a fully customized header.
• ExpandableController: Control the expansion state programmatically using the ExpandableController. This is useful for dynamic UIs where the expansion state might need to be changed based on user actions or events.
• Colors and Icons: Customize the colors and icons to match the visual style of your app, providing visual cues to users about the expandable nature of the tile.
• Custom Header: Use the customHeader constructor for complex layouts that go beyond the standard list tile, allowing you to create rich, interactive headers.

---

Common Use Cases

• FAQ Sections: Ideal for creating expandable FAQ sections where each question expands to reveal the answer.
• Settings Panels: Organize settings into collapsible categories for a cleaner, more manageable UI.
• Information Disclosure: Use in contexts where you want to provide a summary of information with the option to expand for more details.