zeba_academy_list_animations

A powerful and customizable Flutter package for creating beautiful animated lists with staggered effects, fade/slide transitions, lazy loading, reorder support, and smooth insert/remove animations.

---

✨ Features

✅ Insert animations
✅ Remove animations
✅ Staggered list effects
✅ Fade animations
✅ Slide animations
✅ Scale animations
✅ Rotation animations
✅ Reorderable animated lists
✅ Lazy loading support
✅ Highly customizable
✅ Smooth performance
✅ Simple API

---

📦 Installation

Add dependency in your pubspec.yaml:

dependencies:
  zeba_academy_list_animations: ^1.0.0

Then run:

flutter pub get

---

🚀 Import

import 'package:zeba_academy_list_animations/zeba_academy_list_animations.dart';

---

🧩 Available Widgets

Widget	Description
ZebaAnimatedListView	Animated list with staggered effects
ZebaStaggeredItem	Individual animated item
ZebaLazyLoadingList	Infinite scrolling animated list
ZebaReorderableAnimatedList	Drag-and-drop reorderable list
ZebaListAnimationController	Insert/remove controller

---

🎬 Basic Animated List

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animated List'),
      ),
      body: ZebaAnimatedListView(
        itemCount: 10,
        animationType: ZebaAnimationType.slide,
        itemBuilder: (context, index) {
          return Card(
            margin: const EdgeInsets.all(12),
            child: ListTile(
              title: Text('Item $index'),
            ),
          );
        },
      ),
    );
  }
}

---

🌟 Animation Types

Supported animation types:

ZebaAnimationType.fade
ZebaAnimationType.slide
ZebaAnimationType.scale
ZebaAnimationType.rotation

Example:

ZebaAnimatedListView(
  itemCount: 20,
  animationType: ZebaAnimationType.scale,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Scale Item $index'),
    );
  },
)

---

🔥 Staggered Animations

ZebaStaggeredItem(
  index: index,
  animationType: ZebaAnimationType.slide,
  child: Card(
    child: ListTile(
      title: Text('Animated Item'),
    ),
  ),
)

---

📜 Lazy Loading List

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

  @override
  State<LazyDemo> createState() => _LazyDemoState();
}

class _LazyDemoState extends State<LazyDemo> {
  final List<String> items = List.generate(
    20,
    (index) => 'Item $index',
  );

  bool isLoading = false;

  Future<void> loadMore() async {
    if (isLoading) return;

    setState(() {
      isLoading = true;
    });

    await Future.delayed(const Duration(seconds: 2));

    items.addAll(
      List.generate(
        10,
        (index) => 'New Item $index',
      ),
    );

    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ZebaLazyLoadingList(
      itemCount: items.length,
      isLoading: isLoading,
      onLoadMore: loadMore,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(items[index]),
        );
      },
    );
  }
}

---

🔄 Reorderable Animated List

ZebaReorderableAnimatedList(
  children: List.generate(
    10,
    (index) => Card(
      key: ValueKey(index),
      child: ListTile(
        title: Text('Item $index'),
      ),
    ),
  ),
)

---

🎛 Insert & Remove Animations

final controller = ZebaListAnimationController();

controller.insertItem(0);

controller.removeItem(
  0,
  (context, animation) {
    return FadeTransition(
      opacity: animation,
      child: const ListTile(
        title: Text('Removed Item'),
      ),
    );
  },
);

---

📱 Full Example

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DemoPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Zeba Academy List Animations'),
      ),
      body: ZebaAnimatedListView(
        itemCount: 15,
        animationType: ZebaAnimationType.slide,
        itemBuilder: (context, index) {
          return Card(
            margin: const EdgeInsets.all(12),
            child: ListTile(
              leading: CircleAvatar(
                child: Text('$index'),
              ),
              title: Text('Animated Item $index'),
              subtitle: const Text('Smooth staggered animations'),
            ),
          );
        },
      ),
    );
  }
}

---

🧪 Testing

Run tests:

flutter test

Analyze package:

flutter analyze

---

📂 Project Structure

lib/
│
├── zeba_academy_list_animations.dart
│
└── src/
    ├── animated_list_view.dart
    ├── staggered_item.dart
    ├── reorderable_animated_list.dart
    ├── lazy_loading_list.dart
    ├── animation_types.dart
    └── controllers/
        └── list_animation_controller.dart

---

🛣 Roadmap

Upcoming features:

• Grid animations
• Sliver support
• Animated separators
• Pull-to-refresh
• Infinite pagination
• Physics customization
• Masonry layout support
• Hero animations
• Custom animation curves

---

🤝 Contributing

Contributions are welcome!

Feel free to fork the repository, improve the package, and submit pull requests.

---

📄 License

This package is released under the GPL License.

---

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

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

Thank you for using zeba_academy_list_animations.

If you like this package, please give it a ⭐ on GitHub and share it with the Flutter community!