apptomate_custom_expansion_tile 0.0.1

An enhanced ExpansionTile widget with improved styling options and consistent Material Design aesthetics.

CustomExpansionTile

An enhanced ExpansionTile widget with improved styling options and consistent Material Design aesthetics.

Features

• Visual Customization:
  • Configurable background colors (expanded/collapsed states)
  • Custom elevation/shadow
  • Built-in padding configurations
• Flexible Content:
  • Custom leading widget
  • Dynamic children elements
  • Optional initial expanded state
• Consistent Design:
  • Built-in Card wrapper
  • Proper spacing and padding
  • Material Design compliant

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_expansion_tiler: ^0.0.1

Basic Usage

CustomExpansionTile(
  title: 'Section Title',
  leading: Icon(Icons.folder),
  children: [
    Text('Content item 1'),
    Text('Content item 2'),
  ],
)

Complete Example

ListView(
  children: [
    CustomExpansionTile(
      title: 'Account Settings',
      leading: Icon(Icons.account_circle),
      initiallyExpanded: true,
      backgroundColor: Colors.blue[50]!,
      collapsedBackgroundColor: Colors.blue[100]!,
      elevation: 4.0,
      children: [
        ListTile(
          leading: Icon(Icons.email),
          title: Text('Change Email'),
          onTap: () => _changeEmail(),
        ),
        ListTile(
          leading: Icon(Icons.lock),
          title: Text('Change Password'),
          onTap: () => _changePassword(),
        ),
      ],
    ),
    CustomExpansionTile(
      title: 'Notifications',
      leading: Icon(Icons.notifications),
      backgroundColor: Colors.purple[50]!,
      children: [
        SwitchListTile(
          title: Text('Push Notifications'),
          value: _notificationsEnabled,
          onChanged: (val) => setState(() => _notificationsEnabled = val),
        ),
      ],
    ),
  ],
)

Parameters

Parameter	Type	Default	Description
title	String	Required	Main tile title text
leading	Widget	Required	Leading widget (typically an Icon)
children	List<Widget>	Required	Content shown when expanded
initiallyExpanded	bool	false	Whether tile starts expanded
backgroundColor	Color	Colors.white	Background color when expanded
collapsedBackgroundColor	Color	Colors.grey	Background color when collapsed
elevation	double	2.0	Shadow depth

Styling Options

1. Color Schemes:

   backgroundColor: Colors.blue[50]!,
   collapsedBackgroundColor: Colors.blue[100]!,
   

2. Elevation Control:

   elevation: 4.0,  // More pronounced shadow
   

3. Custom Leading Widget:

   leading: Badge(
     child: Icon(Icons.notifications),
     isLabelVisible: hasUnread,
   ),
   

Best Practices

1. Content Organization:

   • Use ListTile for consistent child items
   • Group related settings under the same expansion tile

2. Performance:

   • Avoid extremely large child lists
   • Consider ListView.builder for many children

3. Accessibility:

   • Provide meaningful titles
   • Ensure proper color contrast

Comparison with Standard ExpansionTile

Feature	CustomExpansionTile	Standard ExpansionTile
Background Colors	Separate expanded/collapsed colors	Single color
Built-in Padding	Consistent padding defaults	Requires manual setup
Visual Hierarchy	Wrapped in Card with elevation	Flat by default
Divider Handling	Automatic divider removal	Shows dividers

Dependencies

• Flutter SDK (requires material.dart)