Expandable Layout Engine

A powerful, lightweight, and customizable Flutter package for building expandable and collapsible sections, accordions, and dynamic layouts with smooth animations.

✨ Features

• Smooth Animations: seamless expansion and collapse transitions.
• Controller Support: Full programmatic control via ExpandableController.
• Accordion / Grouping: Use ExpandableGroup to ensure only one section is open at a time.
• Auto Scrolling: Automatically scrolls to the expanded section if it goes off-screen (autoScroll: true).
• Ready-to-use Widgets: Includes ExpandableCard, ExpandableListTile, and ExpandableIcon.
• Highly Customizable: Define your own headers, bodies, curves, and animation durations.
• Nested Support: Works perfectly with nested expandables.

🚀 Installation

Add the package to your pubspec.yaml:

dependencies:
  expandable_layout_engine: ^0.0.2

Or run:

flutter pub add expandable_layout_engine

📖 Usage

Basic Usage

The simplest way to use the package is with ExpandableSection.

import 'package:expandable_layout_engine/expandable_layout_engine.dart';

ExpandableSection(
  header: Text("Tap me to expand"),
  body: Text("This is the hidden content!"),
)

Expandable Card

A pre-styled card widget that looks great out of the box.

ExpandableCard(
  elevation: 4,
  header: Padding(
    padding: EdgeInsets.all(16),
    child: Row(
      children: [
        Icon(Icons.person),
        SizedBox(width: 8),
        Text("User Profile"),
        Spacer(),
        ExpandableIcon(), // Rotates automatically
      ],
    ),
  ),
  body: Padding(
    padding: EdgeInsets.all(16),
    child: Text("Detailed user information goes here..."),
  ),
)

Accordion / Group

Use ExpandableGroup to create an accordion where opening one section closes others.

ExpandableGroup(
  children: [
    ExpandableCard(
      header: Text("Section 1"),
      body: Text("Content for section 1"),
    ),
    ExpandableCard(
      header: Text("Section 2"),
      body: Text("Content for section 2"),
    ),
    ExpandableCard(
      header: Text("Section 3"),
      body: Text("Content for section 3"),
    ),
  ],
)

Note: When using ExpandableGroup, the controller for each child is managed automatically by the group logic.

Programmatic Control

You can control the state of an expandable section from anywhere using ExpandableController.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final ExpandableController _controller = ExpandableController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () => _controller.toggle(),
          child: Text("Toggle Section"),
        ),
        ExpandableSection(
          controller: _controller,
          header: Text("Controlled Header"),
          body: Text("I am controlled by the button above!"),
        ),
      ],
    );
  }
}

⚙️ Advanced Configuration

Auto Scroll

If your content is long, the expandable section might push important content off-screen. internal auto-scrolling can fix this:

ExpandableSection(
  autoScroll: true, // Automatically scrolls the section into view upon expansion
  header: Text("Auto Scrolling Section"),
  body: Container(height: 500, color: Colors.blue),
)

Custom Animations

You can customize the duration and curve of the animation:

ExpandableSection(
  animationDuration: Duration(milliseconds: 500),
  curve: Curves.bounceOut,
  header: Text("Bouncy Expansion"),
  body: Text("Look at me bounce!"),
)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.