zeba_academy_reorder

License: GPL v3 Flutter Dart

A lightweight, customizable, and production-ready Flutter package for building beautiful reorderable user interfaces. Easily create drag-and-drop reorderable lists, animated reorder effects, and reorderable grids with a clean and intuitive API.

✨ Features

  • ✅ Drag & Drop Reorder List
  • ✅ Animated Reordering
  • ✅ Reorderable Grid
  • ✅ Reorder Controller
  • ✅ Generic Type Support
  • ✅ Custom Item Builder
  • ✅ Callback Support
  • ✅ Lightweight & Fast
  • ✅ Null Safety
  • ✅ Flutter 3.x Support
  • ✅ No Third-Party Dependencies
  • ✅ Easy Integration

📦 Installation

Add the package to your pubspec.yaml

dependencies:
  zeba_academy_reorder: ^1.0.0

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_reorder/zeba_academy_reorder.dart';

Drag Reorder List

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

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  final items = [
    "Apple",
    "Orange",
    "Banana",
    "Mango",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Reorder List")),
      body: ZebaReorderableList<String>(
        items: items,
        onReorder: (oldIndex, newIndex) {
          setState(() {
            if (newIndex > oldIndex) {
              newIndex--;
            }

            final item = items.removeAt(oldIndex);
            items.insert(newIndex, item);
          });
        },
        itemBuilder: (context, index, item) {
          return ListTile(
            title: Text(item),
          );
        },
      ),
    );
  }
}

Animated Reorder

ZebaAnimatedReorder(
  child: Card(
    child: ListTile(
      title: Text("Animated Item"),
    ),
  ),
)

Reorderable Grid

ZebaReorderableGrid<String>(
  items: items,
  itemBuilder: (context, index, item) {
    return Card(
      child: Center(
        child: Text(item),
      ),
    );
  },
  onChanged: (updatedItems) {
    setState(() {
      items
        ..clear()
        ..addAll(updatedItems);
    });
  },
)

Reorder Controller

final controller = ReorderController<String>([
  "Apple",
  "Orange",
  "Banana",
]);

controller.reorder(0, 2);

Reorder Extension

final items = [
  1,
  2,
  3,
  4,
];

items.reorder(0, 3);

Included Widgets

Widget Description
ZebaReorderableList Drag-and-drop reorderable list
ZebaAnimatedReorder Animated wrapper for reorder transitions
ZebaReorderableGrid Reorderable grid layout
ReorderController Programmatic reorder controller
Reorder Extension Convenient list reorder helper

Why zeba_academy_reorder?

  • Clean API
  • Production Ready
  • Lightweight
  • Easy to Customize
  • Generic Data Support
  • Smooth User Experience
  • Modern Flutter Architecture
  • Minimal Boilerplate
  • No External Dependencies
  • Well Documented

Platform Support

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

Roadmap

Future improvements include:

  • Auto-scrolling while dragging
  • Horizontal reorder support
  • Drag handles
  • Placeholder widgets
  • Custom drag feedback
  • Animated grid transitions
  • Keyboard accessibility
  • Advanced reorder animations
  • Performance optimizations

Contributing

Contributions are welcome!

If you discover a bug, have an idea for a new feature, or would like to improve the package, feel free to open an issue or submit a pull request.

License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

See the LICENSE file for complete license information.

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 https://sufyanism.com/ or connect with me on LinkedIn:

https://www.linkedin.com/in/sufyanism

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at Zeba Academy. Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

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

🌐 Main Website https://zeba.academy

💻 Learning Platform https://code.zeba.academy

📺 YouTube https://www.youtube.com/@zeba.academy

📸 Instagram https://www.instagram.com/zeba.academy/

⭐ Support

If you find this package useful, consider:

  • ⭐ Starring the repository
  • 👍 Sharing it with the Flutter community
  • 🐛 Reporting bugs
  • 💡 Suggesting new features
  • 🤝 Contributing improvements

Your support helps make open-source software better for everyone.

❤️ Thank You

Thank you for using zeba_academy_reorder.

We hope this package helps you build beautiful, interactive, and intuitive Flutter applications with ease.

Happy Coding! 🚀

Libraries

zeba_academy_reorder