zeba_academy_drag_sortable_list

A powerful, flexible, and lightweight Flutter package to create draggable and sortable lists with smooth animations and optional offline persistence.

✨ Features

  • 🔄 Drag & drop reordering
  • 🧩 Supports single-level and nested lists
  • 🎯 Smooth animations with snapping
  • 💾 Optional offline persistence
  • ⚡ Lightweight and performant
  • 🎨 Fully customizable UI via builder

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_drag_sortable_list: ^0.0.1

🚀 Usage

1. Import

import 'package:zeba_academy_drag_sortable_list/zeba_academy_drag_sortable_list.dart';

2. Create Controller

final controller = DragSortController(
  items: List.generate(
    5,
    (i) => SortableItemModel(id: '$i', data: 'Item $i'),
  ),
  onChanged: (items) {
    // Handle updated order
  },
);

3. Use Widget

ZebaSortableList(
  controller: controller,
  itemBuilder: (context, item) {
    return ListTile(
      title: Text(item.data.toString()),
      leading: const Icon(Icons.drag_handle),
    );
  },
)

🧠 Nested List Support

Widget buildNested(SortableItemModel item) {
  return Column(
    children: [
      ListTile(title: Text(item.data.toString())),
      if (item.children.isNotEmpty)
        Padding(
          padding: const EdgeInsets.only(left: 16),
          child: Column(
            children: item.children.map(buildNested).toList(),
          ),
        )
    ],
  );
}

💾 Persistence Example

controller = DragSortController(
  items: items,
  onChanged: (items) async {
    await SortPersistence.save(items);
  },
);

🧪 Testing

Run tests:

flutter test

📂 Project Structure

lib/
 ├── zeba_academy_drag_sortable_list.dart
 └── src/
     ├── sortable_list.dart
     ├── sortable_item.dart
     ├── drag_controller.dart
     └── models.dart

📜 License (GPL-3.0)

👨‍💻 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 no-bloat hub!

🚀 Explore cutting-edge resources in coding, tech, and development at zeba.academy and code.zeba.academy. Empower yourself with practical skills through curated directives, 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: https://zeba.academy ➡ Explore hands-on courses and resources at: https://code.zeba.academy ➡ Check out our YouTube for more tutorials: https://www.youtube.com/@zeba.academy ➡ Follow us on Instagram: https://www.instagram.com/zeba.academy/

Thank you for visiting! 🙌

Libraries

zeba_academy_drag_sortable_list