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! 🚀