zeba_academy_loading_overlay

A beautiful and production-ready fullscreen loading overlay package for Flutter with blur background, custom loaders, global controller support, and intelligent queue management.

---

✨ Features

✅ Fullscreen loading overlay
✅ Blur background effect
✅ Global show/hide controller
✅ Custom loader widgets
✅ Queue-based overlay handling
✅ Smooth animations
✅ Lightweight & easy integration
✅ Production-ready architecture
✅ Custom messages support
✅ Configurable barrier color & blur

---

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_loading_overlay: latest

Then run:

flutter pub get

---

🚀 Getting Started

Import the package:

import 'package:zeba_academy_loading_overlay/zeba_academy_loading_overlay.dart';

---

Basic Usage

Show Loader

ZebaLoadingController.show(
  context,
  message: 'Loading...',
);

---

Hide Loader

ZebaLoadingController.hide();

---

🪄 Full Example

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

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

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

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

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

  Future<void> _loadData(BuildContext context) async {
    ZebaLoadingController.show(
      context,
      message: 'Please wait...',
      blur: 8,
    );

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

    ZebaLoadingController.hide();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Loading Overlay Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _loadData(context),
          child: const Text('Show Loader'),
        ),
      ),
    );
  }
}

---

🎨 Custom Loader

You can use your own custom loader widget.

ZebaLoadingController.show(
  context,
  loader: const FlutterLogo(
    size: 60,
  ),
  message: 'Uploading...',
);

---

🌫 Blur Background

Customize blur intensity easily.

ZebaLoadingController.show(
  context,
  blur: 12,
);

---

🎨 Custom Barrier Color

ZebaLoadingController.show(
  context,
  barrierColor: Colors.black54,
);

---

🧠 Queue System

The package intelligently manages multiple loading requests.

ZebaLoadingController.show(context, id: 'api_1');

ZebaLoadingController.show(context, id: 'api_2');

ZebaLoadingController.hide('api_1');

/// Loader still visible

ZebaLoadingController.hide('api_2');

/// Loader hidden

---

⚙ Parameters

Parameter	Type	Description
context	BuildContext	Flutter context
id	String	Unique queue ID
loader	Widget?	Custom loader widget
message	String?	Loading message
blur	double	Blur intensity
barrierColor	Color	Background overlay color
dismissible	bool	Allow tap dismiss

---

📁 Package Structure

lib/
│
├── zeba_academy_loading_overlay.dart
│
├── src/
│   ├── loading_controller.dart
│   ├── loading_overlay.dart
│   ├── overlay_manager.dart
│   ├── queue_manager.dart
│   └── widgets/
│       └── default_loader.dart

---

🧪 Testing

Run tests using:

flutter test

---

📊 Future Improvements

• Lottie animation support
• Progress indicators
• Overlay themes
• Smart auto-dismiss
• Success/error states
• Web optimizations
• Animated transitions

---

🤝 Contributing

Contributions are welcome!

Feel free to open issues or submit pull requests to improve the package.

---

📄 License

This project is licensed under the MIT 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

A learning platform dedicated to coding, technology, and development.

➡ Visit our main site: https://zeba.academy
➡ Explore hands-on courses and resources: https://code.zeba.academy
➡ YouTube: https://www.youtube.com/@zeba.academy
➡ Instagram: https://www.instagram.com/zeba.academy/

---

❤️ Support

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

---

🙌 Thank You

Thank you for visiting and supporting open-source development!