hybrid_expansion_tile 1.0.1

HybridExpansionTile widget allows creating customized ExpansionTile with various properties like padding, colors, icons, titles, and more.

Hybrid Expansion Tile

A customizable, animated expansion tile widget for Flutter.

HybridExpansionTile is a Flutter widget that makes it easy to create expandable sections with smooth animations, flexible styling options and full control over appearance and behavior.

The Widget consists of 4 parts:

• Main Tile / Configuration – defines title, style, background color, border radius, and animation.
• Trailing Icon – indicates expansion state and rotates when expanded/collapsed.
• Content – the collapsible area that can hold any widget (Text, Column, Image, etc.).
• Border & Animation – smooth expand/collapse animations with customizable expanded border color.

EXAMPLES

Example 1: Change tile, styleText and colors

 HybridExpansionTile(
  title: 'Advanced Settings',
  styleTitle: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
  backgroundTileColor: Colors.blue.shade50,
  expandedBorderColor: Colors.blue,
  borderRadius: 12,
  iconColor: Colors.blue,
  content: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: const [
      Text('• Option 1'),
      Text('• Option 2'),
      Text('• Option 3'),
    ],
  ),
)

Example 2: Change border, expanded hard edge, colors and icon

HybridExpansionTile(
  title: 'Notifications',
  backgroundTileColor: Colors.grey.shade200,
  expandedBorderColor: Colors.grey.shade300,
  hasExpandedHardEdge: true,
  borderRadius: 0,
  icon: Icons.arrow_drop_up_rounded,
  iconColor: Colors.grey.shade700,
  contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
  styleTitle: const TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w600,
    color: Colors.black87,
  ),
  content: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Container(
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.grey.shade100,
          borderRadius: BorderRadius.circular(16),
        ),
        child: const FlutterLogo(
          size: 80,
        ),
      ),
      const SizedBox(height: 12),
      Text(
        'Lorem ipsum dolor sit amet consectetur adipiscing elit. '
        'Rhoncus varius nunc morbi odio duis lacus phasellus nulla primis.',
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 14,
          height: 1.4,
          color: Colors.grey.shade700,
        ),
      ),
    ],
  ),
)

Example 3: Add more widgets and change colors

Container(
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.deepPurple.shade50,
    borderRadius: BorderRadius.circular(16),
  ),
  child: HybridExpansionTile(
    title: 'Information',
    styleTitle: const TextStyle(
      color: Colors.deepPurple,
      fontWeight: FontWeight.w600,
      fontSize: 16,
    ),
    iconColor: Colors.deepPurple,
    backgroundTileColor: Colors.white,
    expandedBorderColor: Colors.deepPurple.shade200,
    borderRadius: 12,
    contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    content: Column(
      children: [
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            color: Colors.grey.shade100,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text('Wi-Fi'),
              Switch(value: true, onChanged: (_) {}),
            ],
          ),
        ),
        const SizedBox(height: 12),
        Text(
          'Lorem ipsum dolor sit amet consectetur adipiscing elit. '
          'Rhoncus varius nunc morbi odio duis lacus phasellus nulla primis',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.grey.shade700,
            height: 1.4,
            fontSize: 14,
          ),
        ),
      ],
    ),
  ),
)

Author ✒️

• Daniela Perez Juan - Flutter Developer - [e-mail]

---

With ❤️ by RudoApps Flutter Team 😊