Zeba Academy Collapsible

A flexible and reusable Flutter package for building animated collapsible panels, accordions, nested expandable sections, and programmatically controlled expansion interfaces.

zeba_academy_collapsible provides a clean API for creating interactive expandable content with smooth animations, single or multiple expansion modes, nested panels, custom styling, and controller-based state management.

✨ Features

📦 Reusable collapsible panels
🪗 Accordion support
🔀 Single-item expansion mode
📚 Multiple-item expansion mode
🌳 Nested collapsible panels
🎬 Smooth expand and collapse animations
🎛️ Custom animation duration
📈 Custom animation curves
🎨 Custom header and content styling
🧩 Custom leading widgets
🔧 Custom trailing widgets
🎮 Programmatic expansion control
📖 Expand all items
📕 Collapse all items
🔄 Toggle individual items
🧠 External controller support
🪶 Lightweight and dependency-free
📱 Works with Flutter mobile, web, and desktop applications
🚫 No external packages required

📦 Installation

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_collapsible: ^0.0.1

Then run:

flutter pub get

🚀 Getting Started

Import the package:

import 'package:zeba_academy_collapsible/zeba_academy_collapsible.dart';

🪗 Basic Accordion

ZebaAccordion(
  items: [
    CollapsibleItem(
      title: const Text('What is Flutter?'),
      content: const Text(
        'Flutter is a UI toolkit for building beautiful applications.',
      ),
    ),
    CollapsibleItem(
      title: const Text('What is Dart?'),
      content: const Text(
        'Dart is the programming language used by Flutter.',
      ),
    ),
    CollapsibleItem(
      title: const Text('Is Flutter cross-platform?'),
      content: const Text(
        'Yes. Flutter supports mobile, web, desktop, and more.',
      ),
    ),
  ],
)

By default, the accordion allows only one item to remain expanded at a time.

🔀 Allow Multiple Expanded Items

Set allowMultiple to true:

ZebaAccordion(
  allowMultiple: true,
  items: [
    CollapsibleItem(
      title: const Text('Personal Information'),
      content: const Text(
        'Name, email, and phone number.',
      ),
    ),
    CollapsibleItem(
      title: const Text('Address'),
      content: const Text(
        'Street, city, and country.',
      ),
    ),
    CollapsibleItem(
      title: const Text('Preferences'),
      content: const Text(
        'Application preferences.',
      ),
    ),
  ],
)

Users can now expand multiple sections simultaneously.

📂 Initially Expanded Sections

Use initiallyExpanded:

ZebaAccordion(
  items: [
    CollapsibleItem(
      title: const Text('First Section'),
      content: const Text(
        'This section starts expanded.',
      ),
      initiallyExpanded: true,
    ),
    CollapsibleItem(
      title: const Text('Second Section'),
      content: const Text(
        'This section starts collapsed.',
      ),
    ),
  ],
)

🧩 Individual Collapsible Panel

Use ZebaCollapsible when you need a standalone expandable panel:

ZebaCollapsible(
  header: const Text('Account Settings'),
  child: const Text(
    'Your account settings appear here.',
  ),
)

🌳 Nested Collapsible Panels

Create nested expandable interfaces:

ZebaCollapsible(
  header: const Text('Account Settings'),
  child: Column(
    children: [
      ZebaCollapsible(
        header: const Text('Profile'),
        child: const Text(
          'Profile settings',
        ),
      ),
      const SizedBox(height: 8),
      ZebaCollapsible(
        header: const Text('Security'),
        child: const Text(
          'Security settings',
        ),
      ),
    ],
  ),
)

You can also combine a collapsible panel with an accordion:

ZebaCollapsible(
  header: const Text('Advanced Settings'),
  child: ZebaAccordion(
    items: [
      CollapsibleItem(
        title: const Text('Developer Options'),
        content: const Text(
          'Developer configuration.',
        ),
      ),
      CollapsibleItem(
        title: const Text('Debug Options'),
        content: const Text(
          'Debug configuration.',
        ),
      ),
    ],
  ),
)

🎨 Custom Header

Add leading widgets using CollapsibleItem:

ZebaAccordion(
  items: [
    CollapsibleItem(
      leading: const CircleAvatar(
        child: Icon(Icons.person),
      ),
      title: const Text(
        'Profile',
        style: TextStyle(
          fontWeight: FontWeight.bold,
        ),
      ),
      content: const Text(
        'Your profile information appears here.',
      ),
    ),
  ],
)

You can replace the default expansion icon:

ZebaAccordion(
  items: [
    CollapsibleItem(
      title: const Text('Notifications'),
      trailing: const Icon(
        Icons.notifications,
      ),
      content: const Text(
        'Notification settings.',
      ),
    ),
  ],
)

🎬 Custom Animations

Customize the animation duration:

ZebaAccordion(
  duration: const Duration(
    milliseconds: 500,
  ),
  items: [
    CollapsibleItem(
      title: const Text('Animated Section'),
      content: const Text(
        'This section uses a custom animation duration.',
      ),
    ),
  ],
)

Customize the animation curve:

ZebaAccordion(
  curve: Curves.easeOutCubic,
  items: [
    CollapsibleItem(
      title: const Text('Smooth Animation'),
      content: const Text(
        'This section uses a custom animation curve.',
      ),
    ),
  ],
)

🎨 Custom Styling

Customize the accordion appearance:

ZebaAccordion(
  backgroundColor: Colors.white,
  headerColor: Colors.blueGrey,
  borderRadius: BorderRadius.circular(16),
  border: Border.all(
    color: Colors.grey,
  ),
  items: [
    CollapsibleItem(
      title: const Text('Styled Section'),
      content: const Text(
        'Beautiful custom styled content.',
      ),
    ),
  ],
)

🎮 Programmatic Control

Create a controller:

final controller = CollapsibleController();

Pass it to the accordion:

ZebaAccordion(
  controller: controller,
  allowMultiple: true,
  items: [
    CollapsibleItem(
      title: const Text('Section 1'),
      content: const Text('Content 1'),
    ),
    CollapsibleItem(
      title: const Text('Section 2'),
      content: const Text('Content 2'),
    ),
    CollapsibleItem(
      title: const Text('Section 3'),
      content: const Text('Content 3'),
    ),
  ],
)

Expand an Item

controller.expand(0);

Collapse an Item

controller.collapse(0);

Toggle an Item

controller.toggle(0);

Expand Multiple Items

controller.expandAll([0, 1, 2]);

Collapse All Items

controller.collapseAll();

Check Expansion State

final isExpanded = controller.isExpanded(0);

Read Expanded Indexes

final expandedIndexes = controller.expandedIndexes;

📚 API Overview

`ZebaCollapsible`

A standalone animated collapsible panel.

Main Properties

Property	Type	Description
`header`	`Widget`	Header content
`child`	`Widget`	Expandable content
`initiallyExpanded`	`bool`	Initial expansion state
`duration`	`Duration`	Animation duration
`curve`	`Curve`	Animation curve
`padding`	`EdgeInsetsGeometry`	Content padding
`headerPadding`	`EdgeInsetsGeometry`	Header padding
`backgroundColor`	`Color?`	Panel background
`headerColor`	`Color?`	Header background
`borderRadius`	`BorderRadius`	Panel radius
`border`	`Border?`	Panel border

`ZebaAccordion`

A collection of collapsible items.

Main Properties

Property	Type	Description
`items`	`List<CollapsibleItem>`	Accordion items
`allowMultiple`	`bool`	Allow multiple open items
`controller`	`CollapsibleController?`	External controller
`duration`	`Duration`	Animation duration
`curve`	`Curve`	Animation curve
`spacing`	`double`	Space between items
`onExpansionChanged`	Callback	Expansion state callback

`CollapsibleItem`

Represents one accordion item.

CollapsibleItem(
  title: const Text('Title'),
  content: const Text('Content'),
)

Properties

title
content
initiallyExpanded
leading
trailing

`CollapsibleController`

Controls accordion expansion programmatically.

Methods

expand(int index)

collapse(int index)

toggle(int index)

expandAll(Iterable<int> indexes)

collapseAll()

setExpandedIndexes(Iterable<int> indexes)

isExpanded(int index)

🧪 Testing

Run static analysis:

flutter analyze

Run tests:

flutter test

Run package validation:

flutter pub publish --dry-run

📱 Supported Platforms

Platform	Supported
Android	✅
iOS	✅
Web	✅
Windows	✅
macOS	✅
Linux	✅

📁 Project Structure

lib/
├── zeba_academy_collapsible.dart
└── src/
    ├── controllers/
    │   └── collapsible_controller.dart
    ├── models/
    │   └── collapsible_item.dart
    └── widgets/
        ├── zeba_accordion.dart
        ├── zeba_collapsible.dart
        └── zeba_collapsible_item.dart

🤝 Contributing

Contributions are welcome and appreciated.

To contribute:

Fork the repository.
Create a feature branch.
Make your changes.
Add or update tests.
Run flutter analyze.
Run flutter test.
Submit a pull request.

Please ensure that all contributions maintain the existing code quality and package design principles.

🐛 Issues and Feature Requests

If you find a bug or have an idea for a new feature, please open an issue in the project repository.

When reporting a bug, please include:

Flutter version
Dart version
Operating system
Minimal reproduction code
Expected behavior
Actual behavior

👨‍💻 About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at:

➡️ sufyanism.com

Or connect with me on:

➡️ LinkedIn

🚀 Your All-in-One Learning Hub

🚀 Explore courses and resources in coding, technology, and development at Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡️ Visit our main site: zeba.academy

➡️ Explore hands-on courses and resources: code.zeba.academy

➡️ Watch tutorials on YouTube: zeba.academy

➡️ Follow us on Instagram: zeba.academy

📄 License

This project is licensed under the GNU General Public License v3.0.

You may use, study, modify, and redistribute this software under the terms of the GPL-3.0 license.

See the LICENSE file for the complete license text.

⭐ Support the Project

If you find this package useful:

⭐ Star the repository
📦 Publish your own projects using the package
🐛 Report bugs
💡 Suggest improvements
🤝 Contribute to the project

Thank you for visiting! 💙

Zeba Academy Collapsible

✨ Features

📦 Installation

🚀 Getting Started

🪗 Basic Accordion

🔀 Allow Multiple Expanded Items

📂 Initially Expanded Sections

🧩 Individual Collapsible Panel

🌳 Nested Collapsible Panels

🎨 Custom Header

🔧 Custom Trailing Widget

🎬 Custom Animations

🎨 Custom Styling

🎮 Programmatic Control

Expand an Item

Collapse an Item

Toggle an Item

Expand Multiple Items

Collapse All Items

Check Expansion State

Read Expanded Indexes

📚 API Overview

ZebaCollapsible

Main Properties

ZebaAccordion

Main Properties

CollapsibleItem

Properties

CollapsibleController

Methods

🧪 Testing

📱 Supported Platforms

📁 Project Structure

🤝 Contributing

🐛 Issues and Feature Requests

👨‍💻 About Me

🚀 Your All-in-One Learning Hub

📄 License

⭐ Support the Project

Libraries

zeba_academy_collapsible package

`ZebaCollapsible`

`ZebaAccordion`

`CollapsibleItem`

`CollapsibleController`