zeba_academy_expandable #

A lightweight, customizable, and dependency-free Flutter package for building expandable and collapsible UI sections with smooth animations and external controller support.

✨ Features #

• ✅ Expand and collapse content
• ✅ Smooth built-in animations
• ✅ External controller support
• ✅ Programmatic expand, collapse, and toggle actions
• ✅ Custom animation duration
• ✅ Custom animation curves
• ✅ Custom header widgets
• ✅ Custom content widgets
• ✅ Custom colors and styling
• ✅ Custom borders and border radius
• ✅ Optional divider
• ✅ Expand/collapse callback
• ✅ Configurable expand and collapse icons
• ✅ Optional initial expanded state
• ✅ Ability to disable header interaction
• ✅ Lightweight and dependency-free
• ✅ Null safety support
• ✅ Material Design friendly
• ✅ Easy to integrate into any Flutter application

📦 Installation #

Add the latest version of zeba_academy_expandable to your pubspec.yaml:

dependencies:
  zeba_academy_expandable: ^1.0.0

Then run:

flutter pub get

🚀 Quick Start #

Import the package:

import 'package:zeba_academy_expandable/zeba_academy_expandable.dart';

Create a basic expandable section:

Expandable(
  header: const Text(
    'What is Flutter?',
    style: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.bold,
    ),
  ),
  child: const Text(
    'Flutter is a UI toolkit for building beautiful '
    'cross-platform applications.',
  ),
)

Tap the header to expand or collapse the content.

🎨 Basic Example #

import 'package:flutter/material.dart';
import 'package:zeba_academy_expandable/zeba_academy_expandable.dart';

class ExpandableExample extends StatelessWidget {
  const ExpandableExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expandable Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Expandable(
          header: const Text(
            'About Flutter',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          child: const Text(
            'Flutter allows developers to build beautiful '
            'applications for multiple platforms from a single codebase.',
          ),
        ),
      ),
    );
  }
}

🎯 Initially Expanded #

Use initiallyExpanded to show the content when the widget is first created:

Expandable(
  initiallyExpanded: true,
  header: const Text('Initially Expanded'),
  child: const Text(
    'This content is visible when the widget is first displayed.',
  ),
)

🎮 External Controller #

Use ExpandableController to control the expandable widget programmatically.

final controller = ExpandableController();

Pass it to the widget:

Expandable(
  controller: controller,
  header: const Text('Controlled Section'),
  child: const Text(
    'This section is controlled externally.',
  ),
)

Control the widget:

controller.expand();

controller.collapse();

controller.toggle();

controller.setExpanded(true);

Check the current state:

final isExpanded = controller.isExpanded;

🧩 Complete Controller Example #

import 'package:flutter/material.dart';
import 'package:zeba_academy_expandable/zeba_academy_expandable.dart';

class ControllerExample extends StatefulWidget {
  const ControllerExample({super.key});

  @override
  State<ControllerExample> createState() => _ControllerExampleState();
}

class _ControllerExampleState extends State<ControllerExample> {
  final ExpandableController controller = ExpandableController();

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            ElevatedButton(
              onPressed: controller.expand,
              child: const Text('Expand'),
            ),
            const SizedBox(width: 8),
            ElevatedButton(
              onPressed: controller.collapse,
              child: const Text('Collapse'),
            ),
            const SizedBox(width: 8),
            ElevatedButton(
              onPressed: controller.toggle,
              child: const Text('Toggle'),
            ),
          ],
        ),
        const SizedBox(height: 16),
        Expandable(
          controller: controller,
          header: const Text('Controlled Expandable'),
          child: const Text(
            'This content can be controlled using the external controller.',
          ),
        ),
      ],
    );
  }
}

🎬 Custom Animation #

Customize the animation duration and curve:

Expandable(
  duration: const Duration(milliseconds: 500),
  curve: Curves.easeOutBack,
  header: const Text('Custom Animation'),
  child: const Text(
    'This expandable section uses a custom animation.',
  ),
)

Available animation curves include:

Curves.easeInOut

Curves.easeOut

Curves.easeOutBack

Curves.fastOutSlowIn

🎨 Custom Styling #

Customize the appearance of the expandable widget:

Expandable(
  backgroundColor: Colors.white,
  headerColor: Colors.blue.shade50,
  border: Border.all(
    color: Colors.blue,
  ),
  borderRadius: BorderRadius.circular(16),
  headerPadding: const EdgeInsets.all(20),
  contentPadding: const EdgeInsets.all(20),
  iconColor: Colors.blue,
  header: const Text(
    'Custom Styled Section',
  ),
  child: const Text(
    'This expandable section has custom styling.',
  ),
)

🚫 Disable Header Interaction #

You can disable header tapping and control the widget only through an external controller:

final controller = ExpandableController();

Expandable(
  controller: controller,
  enableHeaderTap: false,
  header: const Text(
    'Programmatically Controlled',
  ),
  child: const Text(
    'This section can only be controlled through the controller.',
  ),
)

Control it manually:

controller.expand();

controller.collapse();

🔔 Expansion Callback #

Listen for expansion state changes:

Expandable(
  onExpansionChanged: (isExpanded) {
    debugPrint(
      'Expanded: $isExpanded',
    );
  },
  header: const Text('Expansion Callback'),
  child: const Text(
    'The callback is triggered whenever the state changes.',
  ),
)

🧱 Custom Header Widgets #

The header accepts any Flutter widget.

Icon and Text #

Expandable(
  header: const Row(
    children: [
      Icon(Icons.info_outline),
      SizedBox(width: 12),
      Text('Information'),
    ],
  ),
  child: const Text(
    'Additional information is displayed here.',
  ),
)

Custom Header Container #

Expandable(
  header: Container(
    padding: const EdgeInsets.all(12),
    child: const Row(
      children: [
        CircleAvatar(
          child: Icon(Icons.person),
        ),
        SizedBox(width: 12),
        Text('Profile Details'),
      ],
    ),
  ),
  child: const Text(
    'Profile information goes here.',
  ),
)

📚 FAQ Example #

Column(
  children: [
    Expandable(
      header: const Text('What is Flutter?'),
      child: const Text(
        'Flutter is a cross-platform UI toolkit.',
      ),
    ),
    Expandable(
      header: const Text('What is Dart?'),
      child: const Text(
        'Dart is the programming language used by Flutter.',
      ),
    ),
    Expandable(
      header: const Text('Is Flutter free?'),
      child: const Text(
        'Yes, Flutter is an open-source framework.',
      ),
    ),
  ],
)

📖 API Reference #

Expandable #

ExpandableController #

isExpanded

Returns the current expansion state:

controller.isExpanded;

expand()

Expands the content:

controller.expand();

collapse()

Collapses the content:

controller.collapse();

toggle()

Toggles the current state:

controller.toggle();

setExpanded(bool value)

Sets a specific state:

controller.setExpanded(true);

controller.setExpanded(false);

🧪 Testing #

Run static analysis:

flutter analyze

Run tests:

flutter test

Run package publishing validation:

flutter pub publish --dry-run

🛠️ Requirements #

• Flutter >=1.17.0
• Dart ^3.12.0
• Null safety enabled

📦 Dependencies #

This package has no third-party dependencies.

It only depends on the Flutter SDK.

🌟 Why Use zeba_academy_expandable? #

zeba_academy_expandable is designed to provide a simple and flexible solution for expandable UI components without requiring a large dependency or complex setup.

It is suitable for:

• FAQ sections
• Settings panels
• Profile details
• Product information
• Documentation sections
• Help sections
• Accordion-style interfaces
• Expandable cards
• Collapsible menus
• Custom dashboard sections

🤝 Contributing #

Contributions are welcome!

If you find a bug, have an idea, or want to improve this package:

1. Fork the repository.
2. Create a new branch.
3. Make your changes.
4. Add or update tests.
5. Run flutter analyze.
6. Run flutter test.
7. Submit a pull request.

🐛 Issues and Feature Requests #

If you discover a bug or have a feature request, please open an issue in the project's issue tracker.

When reporting an issue, please include:

• Flutter version
• Dart version
• Package version
• Operating system
• Minimal reproducible example
• Expected behavior
• Actual behavior

📄 License #

Copyright © 2026 Sufyan bin Uzayr.

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

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

See the LICENSE file for the complete license text.

👨‍💻 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.

🎓 Zeba Academy #

Your all-in-one learning hub! #

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.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 at: code.zeba.academy

➡ Check out our YouTube for more tutorials: zeba.academy

➡ Follow us on Instagram: zeba.academy

⭐ Support the Project #

If you find this package useful:

• ⭐ Star the repository
• 📦 Like the package on pub.flutter-io.cn
• 🐛 Report bugs
• 💡 Suggest improvements
• 🤝 Contribute to the project

Every contribution helps make the Flutter ecosystem better.

Thank you for visiting! 💙

Built with ❤️ by Sufyan bin Uzayr and Zeba Academy.