zeba_academy_showcase

A powerful Flutter package for building interactive onboarding experiences, coach marks, feature discovery systems, and guided walkthroughs with beautiful spotlight animations.

zeba_academy_showcase banner

pub version Flutter License

✨ Features

✅ Widget highlighting ✅ Spotlight effects ✅ Interactive tutorials ✅ Coach marks ✅ Guided onboarding ✅ Step indicators ✅ Feature discovery system ✅ Animated overlays ✅ Skip & next controls ✅ Lightweight & customizable ✅ Beginner-friendly API

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_showcase: ^0.0.1

Then run:

flutter pub get

🚀 Quick Start

Import the package:

import 'package:zeba_academy_showcase/zeba_academy_showcase.dart';

🧠 Basic Usage

1. Create Global Keys

final GlobalKey menuKey = GlobalKey();
final GlobalKey searchKey = GlobalKey();
final GlobalKey fabKey = GlobalKey();

2. Create Showcase Controller

late ShowcaseController controller;

@override
void initState() {
  super.initState();

  controller = ShowcaseController(
    steps: [
      ShowcaseStep(
        key: menuKey,
        title: "Menu",
        description: "Open navigation drawer from here.",
      ),
      ShowcaseStep(
        key: searchKey,
        title: "Search",
        description: "Search anything instantly.",
      ),
      ShowcaseStep(
        key: fabKey,
        title: "Add",
        description: "Create new items quickly.",
      ),
    ],
  );

  WidgetsBinding.instance.addPostFrameCallback((_) {
    controller.start();
  });
}

3. Wrap Your App

ShowcaseOverlay(
  controller: controller,
  child: Scaffold(
    body: YourWidget(),
  ),
)

4. Wrap Target Widgets

ShowcaseTarget(
  showcaseKey: menuKey,
  child: IconButton(
    onPressed: () {},
    icon: const Icon(Icons.menu),
  ),
)

📘 Complete Example

import 'package:flutter/material.dart';
import 'package:zeba_academy_showcase/zeba_academy_showcase.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 StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey menuKey = GlobalKey();
  final GlobalKey searchKey = GlobalKey();
  final GlobalKey fabKey = GlobalKey();

  late ShowcaseController controller;

  @override
  void initState() {
    super.initState();

    controller = ShowcaseController(
      steps: [
        ShowcaseStep(
          key: menuKey,
          title: "Menu",
          description: "Open the app menu from here.",
        ),
        ShowcaseStep(
          key: searchKey,
          title: "Search",
          description: "Search content instantly.",
        ),
        ShowcaseStep(
          key: fabKey,
          title: "Create",
          description: "Tap here to add new items.",
        ),
      ],
    );

    WidgetsBinding.instance.addPostFrameCallback((_) {
      controller.start();
    });
  }

  @override
  Widget build(BuildContext context) {
    return ShowcaseOverlay(
      controller: controller,
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Zeba Showcase"),
          leading: ShowcaseTarget(
            showcaseKey: menuKey,
            child: IconButton(
              onPressed: () {},
              icon: const Icon(Icons.menu),
            ),
          ),
          actions: [
            ShowcaseTarget(
              showcaseKey: searchKey,
              child: IconButton(
                onPressed: () {},
                icon: const Icon(Icons.search),
              ),
            ),
          ],
        ),
        body: const Center(
          child: Text(
            "zeba_academy_showcase Demo",
            style: TextStyle(fontSize: 22),
          ),
        ),
        floatingActionButton: ShowcaseTarget(
          showcaseKey: fabKey,
          child: FloatingActionButton(
            onPressed: () {},
            child: const Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

🎨 Customization

You can customize:

  • Spotlight shape
  • Overlay opacity
  • Tooltip design
  • Animation duration
  • Button styles
  • Text styles
  • Highlight padding
  • Border radius

📂 Package Structure

lib/
│
├── zeba_academy_showcase.dart
│
└── src/
    ├── controller/
    ├── models/
    ├── widgets/
    └── utils/

🧪 Running Tests

flutter test

🛠 Roadmap

  • Circular spotlight support
  • Auto tooltip positioning
  • Progress indicators
  • Back button support
  • Showcase persistence
  • Multiple overlay themes
  • Custom animation system
  • Accessibility improvements

🤝 Contributing

Contributions are welcome!

If you find bugs or want new features, feel free to open issues and pull requests.

📄 License

This project is licensed 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: 🌐 https://sufyanism.com/

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:

🌍 https://zeba.academy 💻 https://code.zeba.academy

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Level up your tech game today! 💻✨

🔗 Links

🌐 Main Website https://zeba.academy

💻 Coding Platform 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!

Libraries

zeba_academy_showcase