apptomate_custom_expansion_tile 0.0.3

An enhanced expansion tile widget with extensive customization options for building interactive expandable content sections.

CustomExpansionTile

An enhanced expansion tile widget with extensive customization options for building interactive expandable content sections.

Features

• Visual Customization:

  • Custom colors for expanded/collapsed states
  • Adjustable elevation and shadows
  • Flexible border and radius options
  • Custom text styling
  • Icon color control

• Layout Control:

  • Header and content spacing
  • Leading/trailing widget support
  • Dense mode for compact layouts
  • Flexible padding and margins

• Content Options:

  • Main title and subtitle
  • Alternate expanded title
  • Custom child widgets
  • Optional divider

• Interaction:

  • Expansion state callback
  • Animation controls
  • Tap enable/disable
  • Visual feedback

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_expansion_tile: ^0.0.3

Basic Usage

CustomExpansionTile(
  title: 'Section Title',
  children: [Text('Content'), Text('More content')],
)

Complete Examples

1. Styled Expansion Tile

CustomExpansionTile(
  title: 'Advanced Settings',
  subtitle: Text('Tap to expand'),
  leading: Icon(Icons.settings),
  backgroundColor: Colors.blue[50],
  collapsedBackgroundColor: Colors.grey[100],
  elevation: 4,
  border: Border.all(color: Colors.blue),
  children: [
    SwitchListTile(title: Text('Option 1'), value: true, onChanged: (v) {}),
    SwitchListTile(title: Text('Option 2'), value: false, onChanged: (v) {}),
  ],
)

2. Compact Expansion Tile

CustomExpansionTile(
  title: 'Notifications',
  dense: true,
  initiallyExpanded: true,
  showDivider: false,
  childrenSpacing: 4,
  children: [
    Text('No new notifications'),
  ],
)

3. Custom Header Content

CustomExpansionTile(
  title: 'Monthly Report',
  expandedTitle: Chip(label: Text('Current')),
  trailing: Icon(Icons.calendar_today),
  expandedBackgroundColor: Colors.green[50],
  children: [
    DataTable(
      columns: [/*...*/],
      rows: [/*...*/],
    )
  ],
)

Parameter Reference

Core Properties

Parameter	Type	Description
title	String	Required header text
children	List<Widget>	Content widgets
initiallyExpanded	bool	Initial expansion state

Visual Styling

Parameter	Type	Default	Description
backgroundColor	Color?	Theme-based	Expanded state color
collapsedBackgroundColor	Color?	Theme-based	Collapsed state color
expandedBackgroundColor	Color?	null	Alternate expanded color
elevation	double	2.0	Shadow depth
borderRadius	BorderRadius?	null	Corner radius
border	Border?	null	Border styling
shadow	List<BoxShadow>?	null	Custom shadows
titleStyle	TextStyle?	null	Expanded title style
collapsedTitleStyle	TextStyle?	null	Collapsed title style
iconColor	Color?	Theme-based	Expanded icon color
collapsedIconColor	Color?	Theme-based	Collapsed icon color

Content Options

Parameter	Type	Description
leading	Widget?	Leading widget
trailing	Widget?	Trailing widget
subtitle	Widget?	Collapsed subtitle
expandedTitle	Widget?	Alternate expanded title

Layout Control

Parameter	Type	Default	Description
margin	EdgeInsets?	12h/6v	Outer spacing
padding	EdgeInsets?	16h/8v	Header padding
titleSpacing	double?	16	Leading/title gap
childrenSpacing	double?	8	Child spacing
dense	bool	false	Compact layout

Interaction

Parameter	Type	Default	Description
onExpansionChanged	VoidCallback?	null	Expansion callback
enableTap	bool	true	Toggle interaction
expandIconAtEnd	bool	true	Icon position
maintainState	bool	false	Preserve state

Divider

Parameter	Type	Default	Description
showDivider	bool	true	Show divider
dividerColor	Color?	Theme-based	Divider color
dividerThickness	double?	1	Divider thickness

Animation

Parameter	Type	Default	Description
animationDuration	Duration?	null	Animation length
animationCurve	Curve?	easeInOut	Animation curve

Best Practices

1. Performance:

   • Use maintainState for complex child content
   • Avoid expensive rebuilds in children
   • Consider dense mode for long lists

2. Accessibility:

   • Ensure sufficient text contrast
   • Provide clear expansion indicators
   • Include semantic labels

3. Design Consistency:

   • Standardize elevation across app
   • Maintain consistent spacing
   • Use a limited set of variants

4. Responsive Design:

   • Adjust padding for different screen sizes
   • Consider landscape layouts
   • Test with varying content lengths