zeba_academy_collapsible 0.0.1

A flexible Flutter package for building animated collapsible panels, accordions, and nested expandable sections.

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.',
      ),
    ),
  ],
)

---

🔧 Custom Trailing Widget

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:

1. Fork the repository.
2. Create a feature branch.
3. Make your changes.
4. Add or update tests.
5. Run flutter analyze.
6. Run flutter test.
7. 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

Copyright © 2026 Sufyan bin Uzayr

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! 💙