zeba_academy_screen_overlay

A powerful and lightweight Flutter package to create interactive tutorial overlays, highlight widgets, and guide users step-by-step — fully offline and reusable.

✨ Features

  • 🎯 Highlight specific widgets using GlobalKey
  • 🧭 Step-by-step guided tutorials
  • 🎨 Customizable tooltip UI
  • 🎬 Smooth animated transitions
  • 🧩 Works with any Flutter widget
  • ⚡ Fully offline (no API or external dependencies)
  • 🔁 Reusable overlay controller

🚀 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_screen_overlay: ^0.0.1

Then run:

flutter pub get

📦 Usage

1. Import package

import 'package:zeba_academy_screen_overlay/zeba_academy_screen_overlay.dart';

2. Create GlobalKeys

final key1 = GlobalKey();
final key2 = GlobalKey();

3. Attach keys to widgets

ElevatedButton(
  key: key1,
  onPressed: () {},
  child: Text("Button 1"),
)

4. Start Overlay Tutorial

final controller = ZebaOverlayController();

WidgetsBinding.instance.addPostFrameCallback((_) {
  controller.start(context, [
    OverlayStep(
      targetKey: key1,
      title: "Welcome",
      description: "This is your first button",
    ),
    OverlayStep(
      targetKey: key2,
      title: "Next Step",
      description: "This is your second button",
    ),
  ]);
});

🧠 How It Works

  • Uses Flutter's OverlayEntry to render UI above your app
  • Locates widgets using GlobalKey
  • Draws highlight using CustomPainter
  • Displays tooltip with step instructions

🎨 Customization Ideas

  • Custom tooltip design
  • Animation styles (fade, scale, slide)
  • Highlight shape (circle, rounded rectangle)
  • Tap outside to dismiss
  • Gesture navigation (swipe next/previous)

🧪 Testing

Run tests using:

flutter test

📦 Package Structure

lib/
 ├── zeba_academy_screen_overlay.dart
 ├── src/
 │    ├── overlay_controller.dart
 │    ├── overlay_entry_widget.dart
 │    ├── highlight_painter.dart
 │    ├── overlay_step.dart

📄 License

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

🔓 GPL-3.0 Summary

  • You can use, modify, and distribute freely
  • Must disclose source code when distributing
  • Same license must be applied to derivatives
  • No warranty provided

Full License Text: https://www.gnu.org/licenses/gpl-3.0.en.html

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

❤️ Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

⭐ Support

If you like this package, consider giving it a ⭐ on GitHub to support development.

Thank you for visiting! 🚀

Libraries

zeba_academy_screen_overlay