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.1

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.